/* LIVE REEF — genuine independent CSS motion in the interactive world.
   No GIF/video. Applies ONLY to world 1's Adventure map.
   Background, fish, jellyfish and coral animate separately while scrolling. */
html[data-world="reef"][data-screen="map-screen"] .voyage-track{
  background-image:
    linear-gradient(180deg,#020e28e1 0%,#07173492 21%,#0e5e8350 53%,#0e7c9a26 79%,#062e43ac 100%),
    radial-gradient(ellipse at 55% 42%,#4bf9f929,transparent 60%),
    var(--voyage-art);
  box-shadow:inset 0 0 55px #00122692;
}
.voyage-live{
  position:absolute;inset:0;z-index:1;
  pointer-events:none;overflow:hidden;isolation:isolate;
  contain:paint;
}
.voyage-live-ray{
  position:absolute;top:-5%;height:112%;width:34%;
  background:linear-gradient(100deg,transparent 7%,#a7ffff09 26%,#9ff8ee38 49%,#bcfff012 69%,transparent 91%);
  mix-blend-mode:screen;
  opacity:.55;filter:blur(7px);
  transform:rotate(-15deg);
  animation:voyage-light-breathe 12s ease-in-out infinite alternate;
  will-change:transform,opacity;
}
.voyage-live-ray.ray-0{left:6%;animation-delay:-3s}
.voyage-live-ray.ray-1{left:38%;width:21%;opacity:.35;animation-duration:16s;animation-delay:-6s;transform:rotate(12deg)}
.voyage-live-ray.ray-2{left:76%;width:28%;animation-duration:18s;animation-delay:-8s}
@keyframes voyage-light-breathe{
  0%{opacity:.21;transform:translate3d(-17px,0,0) rotate(-18deg)}
  50%{opacity:.7}
  100%{opacity:.33;transform:translate3d(24px,0,0) rotate(-11deg)}
}
/* Actual bubbles rise, drift side-to-side and disappear into the water. */
.voyage-live-bubble{
  position:absolute;
  left:var(--bubble-left);bottom:var(--bubble-bottom);
  width:var(--bubble-size);height:var(--bubble-size);border-radius:50%;
  background:
    radial-gradient(circle at 28% 22%,#ffffffea 0 6%,transparent 23%),
    radial-gradient(circle at 70% 78%,#65d6ff22,transparent 55%),
    radial-gradient(circle at 53% 48%,#64f5fc00 40%,#a0e7ff8e 85%,#d2fcffae 100%);
  box-shadow:inset 0 0 3px #bdffff77,0 0 4px #70f4fa66;
  opacity:0;
  animation:voyage-bubble-rise var(--bubble-time) linear var(--bubble-delay) infinite;
  will-change:transform,opacity;
}
@keyframes voyage-bubble-rise{
  0%{opacity:0;transform:translate3d(0,26px,0) scale(.68)}
  12%{opacity:.77}
  54%{opacity:.64}
  90%{opacity:.52}
  100%{opacity:0;transform:translate3d(var(--bubble-drift),-255px,0) scale(1.15)}
}
/* The SCHOOL itself crosses the map, while individual fish flap their tails. */
.voyage-fish-school{
  position:absolute;left:-94px;bottom:var(--school-bottom);
  width:1px;height:1px;z-index:1;
  filter:drop-shadow(0 0 4px #42f3fa40);
  animation:voyage-swim-right var(--school-speed) linear var(--school-delay) infinite;
  will-change:transform;
}
.voyage-fish-school.reverse{
  left:calc(100% + 84px);
  animation-name:voyage-swim-left;
}
.voyage-fish-school.distant{opacity:.47;filter:blur(.35px)}
@keyframes voyage-swim-right{
  from{transform:translate3d(0,6px,0)}
  50%{transform:translate3d(calc(52vw + 80px),-11px,0)}
  to{transform:translate3d(calc(110vw + 185px),5px,0)}
}
@keyframes voyage-swim-left{
  from{transform:translate3d(0,-4px,0)}
  50%{transform:translate3d(calc(-52vw - 80px),12px,0)}
  to{transform:translate3d(calc(-110vw - 185px),-5px,0)}
}
.voyage-swimmer{
  position:absolute;left:var(--fish-x);top:var(--fish-y);
  width:var(--fish-size);height:auto;display:block;
}
.voyage-fish{display:block;width:100%;height:auto;overflow:visible}
.voyage-fish-school.reverse .voyage-fish{transform:scaleX(-1)}
.voyage-fish-tail{
  transform-box:fill-box;
  transform-origin:100% 52%;
  animation:voyage-tail-wag .65s ease-in-out var(--fin-delay) infinite alternate;
}
@keyframes voyage-tail-wag{from{transform:rotate(-8deg) scaleX(.92)}to{transform:rotate(12deg) scaleX(1.07)}}
/* Jellyfish drift, pulse softly, and their tendrils flex. */
.voyage-live-jelly{
  position:absolute;
  left:var(--jelly-left);bottom:var(--jelly-bottom);
  width:var(--jelly-size);height:auto;z-index:1;
  opacity:.86;
  filter:drop-shadow(0 0 13px #b274ff99);
  animation:voyage-jelly-float 7.8s ease-in-out var(--jelly-delay) infinite alternate;
  will-change:transform;
}
.voyage-jelly-art{display:block;width:100%;height:auto;overflow:visible}
.voyage-jelly-tendrils{
  transform-origin:50% 42%;
  animation:voyage-tendril-sway 3.4s ease-in-out infinite alternate;
}
@keyframes voyage-jelly-float{
  from{transform:translate3d(-6px,12px,0) rotate(-5deg);opacity:.63}
  to{transform:translate3d(9px,-23px,0) rotate(4deg);opacity:.93}
}
@keyframes voyage-tendril-sway{
  from{transform:skewX(-7deg) scaleY(.95)}
  to{transform:skewX(7deg) scaleY(1.06)}
}
/* Real swaying seagrass, visible on both sides of the vertical path. */
.voyage-live-plant{
  position:absolute;left:-23px;bottom:var(--plant-bottom);
  width:var(--plant-size);z-index:2;opacity:.87;
  filter:drop-shadow(0 0 5px #38ebf447);
  transform-origin:35% 100%;
  animation:voyage-kelp-sway 6.5s ease-in-out var(--plant-delay) infinite alternate;
  will-change:transform;
}
.voyage-live-plant.on-right{left:auto;right:-27px;transform-origin:60% 100%;animation-duration:8s}
.voyage-plant-art{display:block;width:100%;height:auto}
.voyage-plant-leaf{transform-origin:50% 98%}
.voyage-plant-leaf.leaf-1{animation:voyage-kelp-leaf 4s ease-in-out infinite alternate}
.voyage-plant-leaf.leaf-2{animation:voyage-kelp-leaf 5.3s ease-in-out -1.5s infinite alternate-reverse}
.voyage-plant-leaf.leaf-3{animation:voyage-kelp-leaf 6s ease-in-out -3s infinite alternate}
@keyframes voyage-kelp-sway{
  from{transform:rotate(-8deg) translateX(-6px)}
  to{transform:rotate(8deg) translateX(5px)}
}
@keyframes voyage-kelp-leaf{
  from{transform:rotate(-5deg)}
  to{transform:rotate(7deg)}
}
/* Little plankton glows blink in the haze, not on the UI. */
.voyage-live-plankton{
  position:absolute;left:var(--mote-left);bottom:var(--mote-bottom);
  width:3px;height:3px;border-radius:50%;
  background:#c3fff6;box-shadow:0 0 7px 2px #80fff4a6;
  opacity:.12;animation:voyage-mote-glow 4.5s ease-in-out var(--mote-delay) infinite alternate;
}
@keyframes voyage-mote-glow{
  0%{opacity:.05;transform:translateY(5px) scale(.7)}
  100%{opacity:.75;transform:translateY(-12px) scale(1.25)}
}
/* Current flowing continuously ALONG the journey, not a static dotted line. */
html[data-world="reef"] .voyage-route .voyage-current-path{
  fill:none;stroke:#53fffb;
  stroke-width:3.9;stroke-linecap:round;
  stroke-dasharray:4 6;
  opacity:.52;
  filter:drop-shadow(0 0 5px #0bffffb4);
  animation:voyage-current-flow 16s linear infinite;
}
html[data-world="reef"] .voyage-route path:not(.voyage-current-path){
  stroke:#ffe8ad;stroke-width:1.45;
  stroke-dasharray:1.3 3.1;
  animation:voyage-route-sparkle 8s linear infinite;
}
@keyframes voyage-current-flow{to{stroke-dashoffset:-80}}
@keyframes voyage-route-sparkle{to{stroke-dashoffset:-35}}
/* Give shell nodes an actual stone pedestal with height and cast shadow. */
html[data-world="reef"] .voyage-node:not(.voyage-node--boss)::before{
  content:"";position:absolute;z-index:-1;
  left:6%;right:6%;bottom:-16px;height:24px;
  border-radius:50%;
  border:2px solid #8afaff65;
  background:linear-gradient(180deg,#8fdee1,#125270 55%,#052037);
  box-shadow:0 11px 14px #001026d1,inset 0 3px 4px #d3fff58f,0 0 12px #0af3e74a;
  transform:perspective(90px) rotateX(42deg);
}
html[data-world="reef"] .voyage-node.current:not(.voyage-node--boss)::before{
  box-shadow:0 12px 15px #001026c4,0 0 18px #ffdf83b2,inset 0 3px 5px #fff4b8;
}
/* Allow a pointer gesture to always reach the track or a real level button. */
.voyage-live,
.voyage-live *,
.voyage-route{pointer-events:none!important;user-select:none}
@media(max-width:350px){
 .voyage-live-jelly{opacity:.69}
 .voyage-live-plant{opacity:.7}
}
@media(prefers-reduced-motion:reduce){
 .voyage-live-ray,.voyage-live-bubble,.voyage-fish-school,
 .voyage-fish-tail,.voyage-live-jelly,.voyage-jelly-tendrils,
 .voyage-live-plant,.voyage-plant-leaf,.voyage-live-plankton,
 html[data-world="reef"] .voyage-route path{
  animation:none!important;
  will-change:auto!important;
 }
 .voyage-live-bubble{opacity:.35}
 .voyage-fish-school{transform:translateX(120px)}
 .voyage-fish-school.reverse{transform:translateX(-150px)}
}

/* FISH MOVEMENT V2 — preserve the original 3-D aquarium illustration.
 * Real fish are independent, crossing the scrollable stage at different
 * heights, sizes, directions and speeds. No viewport-sized overshoot. */
@keyframes voyage-swim-right{
  0%{transform:translate3d(0,4px,0)}
  50%{transform:translate3d(var(--school-half),-8px,0)}
  100%{transform:translate3d(var(--school-distance),3px,0)}
}
@keyframes voyage-swim-left{
  0%{transform:translate3d(0,-5px,0)}
  50%{transform:translate3d(var(--school-half),7px,0)}
  100%{transform:translate3d(var(--school-distance),-3px,0)}
}
.voyage-fish-solo{
  position:absolute;left:-67px;bottom:var(--solo-bottom);
  width:var(--solo-size);height:auto;z-index:2;
  opacity:var(--solo-opacity,.75);pointer-events:none;
  filter:drop-shadow(0 2px 3px #04283b9c);
  animation:voyage-fish-solo-cruise var(--solo-time) linear var(--solo-delay) infinite;
  will-change:transform;
}
.voyage-fish-solo.reverse{left:calc(100% + 67px)}
.voyage-fish-solo.distant{opacity:.43;filter:blur(.35px)}
.voyage-fish-solo .voyage-swimmer{
  position:relative;left:0;top:0;width:100%;display:block;
  animation:voyage-fish-solo-bob var(--solo-bob-time) ease-in-out var(--solo-bob-delay) infinite alternate;
}
.voyage-fish-solo .voyage-fish{
  display:block;width:100%;height:auto;overflow:visible;
}
.voyage-fish-solo.reverse .voyage-fish{transform:scaleX(-1)}
.voyage-fish-solo .voyage-fish-tail{
  transform-box:fill-box;transform-origin:90% 50%;
  animation-duration:.54s;
}
@keyframes voyage-fish-solo-cruise{
  0%{transform:translate3d(0,2px,0)}
  25%{transform:translate3d(var(--solo-quarter),-5px,0)}
  50%{transform:translate3d(var(--solo-half),6px,0)}
  75%{transform:translate3d(var(--solo-threequarter),-3px,0)}
  100%{transform:translate3d(var(--solo-travel),2px,0)}
}
@keyframes voyage-fish-solo-bob{
  0%{transform:translate3d(0,-3px,0) rotate(-2deg)}
  100%{transform:translate3d(0,4px,0) rotate(2deg)}
}
@media(prefers-reduced-motion:reduce){
  .voyage-fish-solo{animation:none!important;display:none!important}
  .voyage-fish-solo .voyage-swimmer,
  .voyage-fish-solo .voyage-fish-tail{animation:none!important}
}

/* Original right-side black-and-yellow tropical fish — the user-highlighted
 * creatures. Their stationary source pixels are masked out in the SVG photo. */
.voyage-striped-fish{
  position:absolute;
  left:calc(var(--stripe-x) - var(--stripe-half));
  bottom:var(--stripe-bottom);
  width:var(--stripe-size);
  aspect-ratio:10/7;
  z-index:3;
  pointer-events:none;
  filter:drop-shadow(0 2px 3px #062b43bb) saturate(1.1);
  animation:reef-striped-cruise var(--stripe-time) ease-in-out var(--stripe-delay) infinite;
  will-change:transform;
}
.voyage-striped-fish .reef-striped-art{
  width:100%;height:auto;display:block;overflow:visible;
}
.voyage-striped-fish .reef-striped-tail{
  transform-box:fill-box;
  transform-origin:92% 51%;
  animation:reef-striped-tail .72s ease-in-out var(--stripe-tail-delay) infinite alternate;
}
@keyframes reef-striped-tail{
  from{transform:rotate(-11deg) scaleX(.93)}
  to{transform:rotate(13deg) scaleX(1.07)}
}
/* Move, turn round, then glide back. No backward swimming or rigid school
 * movement. Initial facing is coordinated with each fish's direction. */
@keyframes reef-striped-cruise{
  0%,100%{transform:translate3d(0,0,0) scaleX(var(--stripe-facing))}
  47%{transform:translate3d(var(--stripe-distance),var(--stripe-rise),0) scaleX(var(--stripe-facing))}
  50%{transform:translate3d(var(--stripe-distance),var(--stripe-rise),0) scaleX(var(--stripe-back))}
  97%{transform:translate3d(0,0,0) scaleX(var(--stripe-back))}
}
@media(prefers-reduced-motion:reduce){
 .voyage-striped-fish,.voyage-striped-fish .reef-striped-tail{
  animation:none!important;will-change:auto!important;
 }
}