/* 2010 · Under the Sea — the dive. Everything lives inside .dv (one stacking context at z 1, so the bubble canvas (z 2),
   the gallery (z 3), the caption and the info panel always paint above it). All selectors under .in-dive. */
.in-dive .dv{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}

/* sky: a band as tall as the viewport whose bottom edge is the water line; a low white sun near the horizon */
.in-dive .dv-sky{position:absolute;left:0;top:0;width:100%;z-index:0;will-change:transform;
  background:
    radial-gradient(circle at 74% 84%,rgba(255,255,255,.85),rgba(255,255,255,.35) 3%,rgba(255,255,255,.12) 9%,transparent 20%),
    linear-gradient(180deg,#081f3a 0%,#123f68 30%,#245f8f 58%,#3f86b3 82%,#6aaacf 95%,#8cc2de 100%)}
/* the sea: a tall gradient (3.2 viewports) that slides past as we descend; its top edge is the surface */
.in-dive .dv-sea{position:absolute;left:0;top:0;width:100%;z-index:1;will-change:transform;
  background:linear-gradient(180deg,#f4feff 0%,#a9e9f0 .9%,#4cc3d8 2.6%,#26a3c3 6%,#177fa8 13%,#0f5f8c 24%,#0b4670 38%,#07335a 56%,#042442 76%,#02101d 100%)}
.in-dive .dv-sea::before{content:"";position:absolute;left:-80px;right:0;top:-14px;height:16px;
  background:radial-gradient(ellipse 62% 100% at 50% 100%,#d5f5f9 0 55%,transparent 58%) 0 0/76px 16px repeat-x;animation:dv-lap 5s linear infinite}
.in-dive .dv-sea::after{content:"";position:absolute;left:0;right:0;top:0;height:9vh;opacity:.32;
  background:repeating-linear-gradient(104deg,rgba(255,255,255,.28) 0 10px,transparent 10px 34px,rgba(255,255,255,.16) 34px 40px,transparent 40px 70px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent);animation:dv-glint 7s linear infinite}
/* god rays: soft parallel beams hung from the surface, fanned and swaying */
.in-dive .dv-rays{position:absolute;left:0;top:0;width:100%;z-index:2;opacity:0;mix-blend-mode:screen;will-change:transform,opacity}
.in-dive .dv-rays-in{position:absolute;inset:0;transform-origin:50% 0;animation:dv-ray 9s ease-in-out infinite alternate}
.in-dive .dv-rays i{position:absolute;top:0;width:9%;height:100%;transform-origin:50% 0;
  background:linear-gradient(90deg,transparent,rgba(214,244,255,.55) 50%,transparent);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.35) 40%,transparent 80%);mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.35) 40%,transparent 80%)}
/* caustics: two drifting nets of soft rings */
.in-dive .dv-caust{position:absolute;left:-6%;right:-6%;top:0;z-index:3;opacity:0;overflow:hidden;mix-blend-mode:screen;will-change:opacity,transform;
  -webkit-mask-image:linear-gradient(180deg,#000 40%,rgba(0,0,0,.35));mask-image:linear-gradient(180deg,#000 40%,rgba(0,0,0,.35))}
/* the nets drift on transform (composited), soft ring stops stand in for the old blur filter */
.in-dive .dv-caust i{position:absolute;left:-15%;top:-15%;width:130%;height:130%;will-change:transform}
.in-dive .dv-caust i.a{background:
    radial-gradient(ellipse 50% 40% at 50% 50%,transparent 0 52%,rgba(255,255,255,.13) 67%,transparent 82%) 0 0/210px 150px,
    radial-gradient(ellipse 46% 46% at 50% 50%,transparent 0 50%,rgba(255,255,255,.08) 66%,transparent 82%) 40px 120px/170px 130px;
  animation:dv-caust-a 18s ease-in-out infinite alternate}
.in-dive .dv-caust i.b{background:radial-gradient(ellipse 48% 50% at 50% 50%,transparent 0 50%,rgba(255,255,255,.1) 66%,transparent 82%) 90px 60px/290px 220px;
  animation:dv-caust-b 23s ease-in-out infinite alternate}

/* reef: rounded mounds and a few coral fingers, two depths */
.in-dive .dv-reef{position:absolute;left:-4%;right:-4%;bottom:0;height:34%;z-index:4;will-change:transform}
.in-dive .dv-reef i{position:absolute;bottom:-8%;border-radius:50% 50% 30% 30%/60% 60% 40% 40%;background:#0a3550}
.in-dive .dv-reef i.fing{border-radius:50% 50% 20% 20%/40% 40% 10% 10%;background:#0c3d5a}
.in-dive .dv-reef.near{z-index:8}
.in-dive .dv-reef.near i{background:#04192b}
.in-dive .dv-reef.near i.fing{background:#06213a}
/* seaweed: tapered blades swaying from the base */
.in-dive .dv-weed{position:absolute;left:0;right:0;bottom:0;height:42%;z-index:7;will-change:transform}
.in-dive .dv-weed i{position:absolute;bottom:-2%;transform-origin:50% 100%;border-radius:50% 50% 0 0/100% 100% 0 0;
  background:linear-gradient(180deg,#137082,#0a4a5c 55%,#062f40);animation:dv-sway 4s ease-in-out infinite alternate}

/* fish: body (ellipse with an eye) + tail (clip-path) on an inner node that wiggles */
.in-dive .dv-school{position:absolute;left:0;top:0;z-index:5;opacity:0;will-change:transform,opacity;--fw:30px;--fc:#c9e3ee;--ft:#9fc9dc}
.in-dive .dv-school.near{z-index:10;--fc:#dbeef6;--ft:#aacfe0}
.in-dive .dv-school.mid{z-index:6;--fc:#2f63c4;--ft:#d8c66c}
.in-dive .dv-school.far{--fc:rgba(200,228,240,.6);--ft:rgba(200,228,240,.5)}
.in-dive .dv-fish{position:absolute;width:var(--fw);height:calc(var(--fw)*.46);transform-origin:50% 50%}
.in-dive .dv-fish b{position:absolute;inset:0;display:block;transform-origin:25% 50%;animation:dv-swim .9s ease-in-out infinite alternate}
.in-dive .dv-fish b::before{content:"";position:absolute;left:0;top:0;width:74%;height:100%;border-radius:55% 45% 45% 55%/50% 50% 50% 50%;
  background:radial-gradient(circle at 17% 42%,#0b1a26 0 8%,transparent 9%),var(--fc)}
.in-dive .dv-school.near .dv-fish b::before{background:radial-gradient(circle at 17% 42%,#0b1a26 0 8%,transparent 9%),repeating-linear-gradient(90deg,transparent 0 24%,rgba(16,40,64,.6) 24% 36%),var(--fc)}
.in-dive .dv-fish b::after{content:"";position:absolute;right:0;top:12%;width:30%;height:76%;background:var(--ft);clip-path:polygon(0 50%,100% 0,78% 50%,100% 100%)}

/* jellyfish: a translucent bell and five trailing tentacles */
.in-dive .dv-jelly{position:absolute;left:0;top:0;z-index:6;opacity:0;width:var(--jw);height:calc(var(--jw)*2.3);will-change:transform,opacity;transform-origin:50% 20%}
.in-dive .dv-jelly b{position:absolute;left:0;top:0;width:100%;height:36%;border-radius:50% 50% 42% 42%/75% 75% 25% 25%;
  background:radial-gradient(ellipse at 50% 30%,rgba(236,250,255,.72),rgba(170,222,245,.3) 55%,rgba(170,222,245,.1) 100%);
  box-shadow:0 0 22px rgba(190,235,255,.3),inset 0 -6px 12px rgba(255,255,255,.2)}
.in-dive .dv-jelly i{position:absolute;top:33%;width:2px;border-radius:2px;transform-origin:50% 0;
  background:linear-gradient(180deg,rgba(225,245,255,.65),rgba(225,245,255,.05));animation:dv-tent 2.6s ease-in-out infinite alternate}

/* the swimmers (z 20–45 inline; the message z 50, bubbles 52, gauge 60 and bloom 70 always paint above them) */
.in-dive .dv-diver{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity;transform-origin:50% 50%}
.in-dive .dv-diver img{display:block;width:100%;height:auto}
.in-dive .dv-diver.far img{filter:brightness(.4) saturate(.6) blur(.6px);opacity:.58}
.in-dive .dv-diver.near img{filter:saturate(.82) brightness(.96) drop-shadow(0 10px 18px rgba(0,20,40,.35))}

/* the card's own words */
.in-dive .dv-msg{position:absolute;left:0;top:0;z-index:50;text-align:center;opacity:0;will-change:transform,opacity;transform:translate(-50%,-50%)}
.in-dive .dv-msg b{display:block;font-family:var(--sans);font-weight:300;text-transform:uppercase;letter-spacing:.34em;line-height:1;color:#f2fbff;white-space:nowrap;
  text-shadow:0 0 18px rgba(143,211,244,.8),0 0 50px rgba(143,211,244,.45)}
.in-dive .dv-msg span{display:block;margin:.55em auto 0;max-width:34em;text-wrap:balance;font-family:var(--serif);font-style:italic;font-weight:300;line-height:1.25;color:rgba(230,243,250,.92);text-shadow:0 1px 12px rgba(0,20,40,.55)}
/* depth gauge */
.in-dive .dv-gauge{position:absolute;z-index:60;padding-top:8px;font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(230,243,250,.85);white-space:nowrap;opacity:0;will-change:opacity;font-variant-numeric:tabular-nums}
.in-dive .dv-gauge::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(230,243,250,.35)}
/* bubbles (the burst; ambient bubbles are the chapter's particle canvas) */
.in-dive .dv-bubs{position:absolute;inset:0;z-index:52}
.in-dive .dv-bubs i{position:absolute;left:0;top:0;border-radius:50%;border:1.5px solid rgba(225,245,255,.75);box-shadow:inset -2px -2px 4px rgba(255,255,255,.35);opacity:0;will-change:transform,opacity}
/* the bloom when we break the surface */
.in-dive .dv-bloom{position:absolute;inset:0;z-index:70;opacity:0;will-change:opacity;
  background:radial-gradient(ellipse 90% 48% at 50% 0%,rgba(255,255,255,1),rgba(255,255,255,.55) 40%,transparent 100%)}

@keyframes dv-lap{from{background-position:0 0}to{background-position:76px 0}}
@keyframes dv-glint{from{background-position:0 0}to{background-position:140px 0}}
@keyframes dv-ray{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}
@keyframes dv-caust-a{from{transform:translate(0,0)}to{transform:translate(6%,4%)}}
@keyframes dv-caust-b{from{transform:translate(0,0)}to{transform:translate(-5%,5%)}}
@keyframes dv-sway{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@keyframes dv-swim{from{transform:rotate(-3deg) translateY(-1px)}to{transform:rotate(3deg) translateY(1px)}}
@keyframes dv-tent{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.in-dive .dv-sea::before,.in-dive .dv-sea::after,.in-dive .dv-rays-in,.in-dive .dv-caust i,.in-dive .dv-weed i,.in-dive .dv-fish b,.in-dive .dv-jelly i{animation:none!important}}