/* ==========================================================
   OCEAN DIVE (ocean-dive.html)
   A scroll-driven dive from the surface to the Challenger Deep.
   The stage is sticky; the section around it is as tall as the
   dive, so scrolling moves the camera down.
   ========================================================== */
.od-page{--od-top:76px;--od-navy:#0b2440;--od-ink:#10263a;--od-cream:#fbf4e3;--od-teal:#3fc1d4;--od-glow:#8ff5e6}
@media(max-width:850px){.od-page{--od-top:68px}}
.od-page .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- hero: sky meets sea ---------- */
.od-hero{padding-bottom:clamp(5.5rem,11vw,8.5rem)}
.od-hero::before{content:"";position:absolute;z-index:-2;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  background:linear-gradient(180deg,#e4f4f2 0%,#cdebf3 45%,#a9dcef 78%,#93d0ea 100%)}
/* the hero is open sky that runs straight into the dive's sky (the sea starts inside the dive) */
.od-hero h1{margin-bottom:.4rem}
.od-intro{max-width:640px;margin:.2rem auto .9rem;color:#2c5058;font-size:1rem}
.od-hero-actions{display:flex;flex-wrap:wrap;gap:.7rem 1.1rem;justify-content:center;align-items:center;margin-top:.4rem}
.od-start{display:inline-flex;align-items:center;gap:.55rem;min-height:52px;padding:.7rem 1.5rem;border-radius:999px;border:0;
  background:linear-gradient(180deg,#1b7fa0,#11587a);color:#fff;font:600 1.12rem/1 var(--display);text-decoration:none;cursor:pointer;
  box-shadow:0 5px 0 #0b3e57,0 12px 26px rgba(10,60,90,.28);transition:transform .15s,box-shadow .15s}
.od-start:hover,.od-start:focus-visible{transform:translateY(-2px);box-shadow:0 7px 0 #0b3e57,0 16px 30px rgba(10,60,90,.3)}
.od-start:active{transform:translateY(3px);box-shadow:0 2px 0 #0b3e57}
.od-listlink{color:#0f4b66;font:600 1rem/1.2 var(--display);text-underline-offset:.3em}

/* ---------- the dive ---------- */
.od-dive{position:relative;margin-top:-1px;background:#010308}
.od-stage{position:sticky;top:var(--od-top);height:calc(100vh - var(--od-top));height:calc(100svh - var(--od-top));overflow:hidden;outline:none;
  isolation:isolate;touch-action:pan-y;color:var(--od-cream);font-family:var(--read)}
#odCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.od-lines,.od-spots{position:absolute;inset:0;pointer-events:none}

/* zone boundary chips and landmark lines (moved every frame) */
.od-zl{position:absolute;left:0;top:0;transform:translate(-50%,-50%);white-space:nowrap;padding:.28rem .8rem .32rem;border-radius:999px;
  background:rgba(4,18,36,.72);border:1px solid rgba(160,230,240,.45);color:#e8fbff;font:600 .82rem/1.2 var(--display);letter-spacing:.02em;
  box-shadow:0 4px 14px rgba(0,0,0,.25)}
.od-zl small{font-weight:500;opacity:.8;margin-left:.35rem}

/* tap targets over animals and landmarks */
.od-spot{position:absolute;left:0;top:0;pointer-events:auto;padding:0;margin:0;border:0;background:transparent;cursor:pointer;border-radius:18px;
  -webkit-tap-highlight-color:transparent}
.od-spot:focus-visible{outline:3px solid #ffe28a;outline-offset:3px}
.od-spot[hidden]{display:none}
.od-tag{position:absolute;left:50%;top:0;transform:translate(-50%,0);white-space:nowrap;padding:.2rem .62rem .24rem;border-radius:999px;
  background:rgba(251,244,227,.94);color:#17344a;font:600 .8rem/1.2 var(--display);box-shadow:0 3px 10px rgba(0,20,40,.28);
  border:1px solid rgba(23,52,74,.18);transition:background .15s,transform .15s;pointer-events:auto}
.od-tag::before{content:"";display:inline-block;width:.42rem;height:.42rem;margin-right:.36rem;border-radius:50%;background:var(--dot,#3fc1d4);vertical-align:.08em}
.od-spot:hover .od-tag,.od-spot:focus-visible .od-tag,.od-spot.is-sel .od-tag{background:#fff3c4}
.od-spot.is-new .od-tag::after{content:"";position:absolute;inset:-4px;border-radius:999px;border:2px solid rgba(255,226,138,.8);animation:odPing 1.8s ease-out infinite}
@keyframes odPing{from{opacity:1;transform:scale(.96)}to{opacity:0;transform:scale(1.18)}}
.od-spot.mk .od-tag{background:rgba(6,24,44,.84);color:#e7fbff;border-color:rgba(143,245,230,.45)}
.od-spot.mk .od-tag::before{background:#ffd36a}
.od-spot.mk:hover .od-tag,.od-spot.mk:focus-visible .od-tag,.od-spot.mk.is-sel .od-tag{background:#12395c}
.od-dark .od-tag{background:rgba(236,248,250,.92)}

/* depth gauge */
.od-gauge{position:absolute;left:clamp(10px,1.6vw,22px);top:50%;transform:translateY(-50%);width:148px;padding:.8rem .8rem .7rem;border-radius:22px;
  background:linear-gradient(180deg,rgba(7,28,50,.78),rgba(3,14,28,.82));border:1px solid rgba(143,245,230,.28);
  box-shadow:0 14px 34px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);z-index:3}
.od-gauge p,.od-gauge dl{margin:0}
.og-k{font:600 .72rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:#8fdbe6}
.og-ft{margin-top:.3rem!important;font:700 1.9rem/1 var(--display);color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.og-ft span{font-size:1rem;font-weight:600;color:#bfefff}
.og-m{font-size:.82rem;color:#a9cfd8;font-variant-numeric:tabular-nums}
.og-bar{position:relative;margin:.65rem 0 .55rem;height:clamp(120px,30vh,260px);border-radius:10px;overflow:visible;
  background:linear-gradient(180deg,#46c8d8 0%,#1d80b3 19%,#123f73 20%,#0a1f44 39%,#061431 40%,#040c1f 63%,#030814 64%,#02050d 78%,#01040a 79%,#000 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.og-bar .og-z{position:absolute;left:14px;right:0;transform:translateY(-50%);font:600 .66rem/1 var(--display);color:rgba(230,250,255,.78);white-space:nowrap;pointer-events:none}
.og-bar .og-z::before{content:"";position:absolute;left:-14px;top:50%;width:9px;height:1px;background:rgba(255,255,255,.5)}
.og-bar .og-z.on{color:#ffe28a}
.og-bar .og-cut{position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.35)}
.og-dot{position:absolute;left:-7px;top:0;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid #ffe28a;
  transform:translateY(-50%);filter:drop-shadow(0 0 4px rgba(255,226,138,.8))}
.og-read{display:grid;gap:.3rem}
.og-read div{display:flex;justify-content:space-between;gap:.4rem;font-size:.76rem}
.og-read dt{color:#8fb9c4}
.og-read dd{margin:0;color:#fff;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.og-note{margin-top:.5rem!important;font-size:.64rem;line-height:1.3;color:#7fa4b0}

/* zone card */
.od-zone{position:absolute;right:clamp(10px,1.6vw,22px);top:clamp(10px,2vh,22px);width:min(340px,34vw);z-index:4;border-radius:22px;
  background:var(--od-cream);color:var(--od-ink);box-shadow:0 18px 40px rgba(0,10,25,.4);border:1px solid rgba(255,255,255,.6);overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s}
.od-zone::before{content:"";display:block;height:7px;background:var(--zc,#3fc1d4)}
.od-zone.swap{transform:translateY(-10px);opacity:.2}
.oz-head{display:flex;align-items:center;gap:.65rem;padding:.7rem .9rem .35rem}
.oz-emoji{display:grid;place-items:center;flex:0 0 44px;height:44px;border-radius:14px;background:var(--zc,#3fc1d4);font-size:1.45rem;box-shadow:inset 0 -3px 0 rgba(0,0,0,.14)}
.oz-name{margin:0;font:700 1.35rem/1.05 var(--display);color:#0f2f45}
.oz-range{margin:.12rem 0 0;font:600 .82rem/1.2 var(--display);color:#56707e}
.oz-toggle{margin-left:auto;display:none;width:40px;height:40px;border-radius:12px;border:1px solid rgba(15,47,69,.2);background:#fff;color:#0f2f45;font-size:1.1rem;cursor:pointer}
.oz-body{padding:0 .95rem .8rem}
.oz-line{margin:.1rem 0 .5rem;font-size:.95rem;line-height:1.45}
.oz-facts{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.oz-facts li{padding:.45rem .6rem .5rem;border-radius:12px;background:#fff;border:1px solid rgba(15,47,69,.08);font-size:.86rem;line-height:1.38}
.oz-facts b{display:block;font:600 .68rem/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--zt,#1d6f86);margin-bottom:.12rem}

/* animal card */
.od-card{position:absolute;right:clamp(10px,1.6vw,22px);bottom:clamp(74px,10vh,96px);width:min(360px,36vw);z-index:6;border-radius:22px;
  background:var(--od-cream);color:var(--od-ink);box-shadow:0 22px 48px rgba(0,10,25,.5);padding:.85rem .95rem .8rem;border:1px solid rgba(255,255,255,.7);
  animation:odCardIn .35s cubic-bezier(.2,.8,.2,1)}
.od-card[hidden]{display:none}
@keyframes odCardIn{from{opacity:0;transform:translateY(14px) scale(.98)}}
.oc-close{position:absolute;right:.55rem;top:.55rem;width:38px;height:38px;border-radius:50%;border:1px solid rgba(15,47,69,.18);background:#fff;color:#0f2f45;font-size:1rem;cursor:pointer}
.oc-close:focus-visible,.oz-toggle:focus-visible,.od-btn:focus-visible,.oc-go:focus-visible,.od-dive-here:focus-visible{outline:3px solid #f0a92e;outline-offset:2px}
.oc-top{display:flex;gap:.75rem;align-items:center;padding-right:2.3rem}
.oc-pic{flex:0 0 auto;width:110px;height:75px;border-radius:16px;background:radial-gradient(120% 120% at 30% 20%,#2d8fb4,#0c3657);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.oc-kicker{margin:0;font:600 .68rem/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
.oc-name{margin:.08rem 0 .15rem;font:700 1.3rem/1.05 var(--display);color:#0f2f45}
.oc-depth{margin:0;display:inline-block;padding:.12rem .55rem;border-radius:999px;background:#0f3d5c;color:#e8fbff;font:600 .78rem/1.35 var(--display)}
.oc-facts{margin-top:.65rem;display:grid;gap:.45rem}
.oc-fact{margin:0;padding:.5rem .65rem .55rem;border-radius:14px;background:#fff;border:1px solid rgba(15,47,69,.08);font-size:.92rem;line-height:1.42}
.oc-fact b{display:block;font:600 .68rem/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;color:#1d6f86;margin-bottom:.1rem}
.oc-fact.wow{background:#fff6da;border-color:rgba(214,150,30,.25)}
.oc-fact.wow b{color:#b0641c}
.oc-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between;margin-top:.55rem}
.oc-hear{margin:0;min-height:42px;padding:.5rem .95rem}
.oc-go{min-height:42px;padding:.5rem .95rem;border-radius:999px;border:2px solid #0f3d5c;background:#0f3d5c;color:#fff;font:600 .95rem/1 var(--display);cursor:pointer}

/* controls */
.od-ctrl{position:absolute;left:50%;bottom:clamp(12px,2.4vh,24px);transform:translateX(-50%);display:flex;gap:.5rem;z-index:5}
.od-btn{display:inline-flex;align-items:center;gap:.45rem;min-width:48px;min-height:48px;padding:.55rem 1rem;border-radius:999px;cursor:pointer;
  border:1px solid rgba(143,245,230,.45);background:rgba(5,24,44,.82);color:#eafcff;font:600 .98rem/1 var(--display);
  box-shadow:0 8px 20px rgba(0,0,0,.3);transition:background .15s,transform .15s}
.od-btn:hover{background:rgba(18,64,98,.92);transform:translateY(-1px)}
.od-btn[hidden]{display:none}
.od-next{background:linear-gradient(180deg,#1b8fb0,#12648a);border-color:rgba(255,255,255,.35)}
.od-surface{background:rgba(251,244,227,.95);color:#0f3d5c;border-color:rgba(255,255,255,.8)}
.od-surface:hover{background:#fff}

.od-hint{position:absolute;left:50%;bottom:calc(clamp(12px,2.4vh,24px) + 62px);transform:translateX(-50%);margin:0;padding:.35rem .9rem;border-radius:999px;
  background:rgba(255,255,255,.82);color:#0f3d5c;font:600 .9rem/1.2 var(--display);pointer-events:none;transition:opacity .4s;z-index:2}
.od-hint b{display:inline-block;animation:odBob 1.4s ease-in-out infinite}
@keyframes odBob{50%{transform:translateY(4px)}}
.od-hint.off{opacity:0}

.od-done{position:absolute;left:50%;top:22%;transform:translateX(-50%);z-index:7;text-align:center;padding:1rem 1.4rem 1.2rem;border-radius:24px;
  background:rgba(251,244,227,.96);color:#0f2f45;box-shadow:0 20px 50px rgba(0,0,0,.5);animation:odCardIn .5s cubic-bezier(.2,.8,.2,1)}
.od-done[hidden]{display:none}
.od-done-k{margin:0;font:700 1.6rem/1.1 var(--display);color:var(--rust)}
.od-done-t{margin:.2rem 0 .8rem;font:600 1rem/1.3 var(--display)}

/* ---------- dive log (readable list) ---------- */
.od-log{max-width:960px;margin:0 auto;padding:clamp(2rem,5vw,3.5rem) clamp(1rem,4vw,2rem) 1.5rem}
.od-log>h2{margin:.2rem 0 .4rem;font-size:clamp(1.6rem,3.6vw,2.4rem);color:var(--forest)}
.od-log-lede{margin:0 0 1.4rem;color:#4b5a55}
.ol-zone{position:relative;margin:0 0 1.2rem;padding:1.1rem 1.2rem 1.1rem 1.35rem;border-radius:22px;background:#fffaf0;border:1px solid rgba(38,54,47,.1);box-shadow:0 8px 22px rgba(25,35,27,.07)}
.ol-zone::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:6px;border-radius:0 6px 6px 0;background:var(--zc,#3fc1d4)}
.ol-zone h3{margin:0;font-size:1.35rem;color:#0f2f45}
.ol-range{margin:.1rem 0 .5rem;font:600 .9rem/1.3 var(--display);color:#5b707a}
.ol-zone>p{margin:.3rem 0}
.ol-zfacts{margin:.4rem 0 .8rem;padding-left:1.1rem}
.ol-zfacts li{margin:.2rem 0}
.ol-who{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.7rem}
.ol-who li{padding:.7rem .8rem .75rem;border-radius:16px;background:#fff;border:1px solid rgba(38,54,47,.1)}
.ol-who h4{margin:0 0 .15rem;font:600 1.05rem/1.2 var(--display);color:#173f31}
.ol-who .ol-d{display:inline-block;margin:0 0 .3rem;padding:.08rem .5rem;border-radius:999px;background:#e5f3f6;color:#1d5b70;font:600 .76rem/1.4 var(--display)}
.ol-who p{margin:.25rem 0;font-size:.95rem;line-height:1.45}
.ol-who li.mk{background:#f4f8fb}
.od-dive-here{margin-top:.3rem;min-height:38px;padding:.35rem .8rem;border-radius:999px;border:1px solid #1d6f86;background:#fff;color:#1d6f86;font:600 .85rem/1 var(--display);cursor:pointer}
.od-dive-here:hover{background:#e5f3f6}
.no-dive .od-dive-here{display:none}

/* ---------- phones ---------- */
@media(max-width:760px){
  .od-gauge{left:8px;top:8px;transform:none;width:136px;min-width:0;padding:.45rem .6rem .5rem;border-radius:16px}
  .og-k,.og-bar,.og-note{display:none}
  .og-ft{margin-top:0!important;font-size:1.35rem}
  .og-m{font-size:.72rem}
  .og-read{margin-top:.25rem;gap:.1rem}
  .og-read div{font-size:.68rem;gap:.4rem}
  .og-read dd{white-space:nowrap}
  .od-zone{top:8px;right:8px;width:auto;left:152px;max-width:none;border-radius:16px}
  .od-done{top:30%;width:min(300px,calc(100% - 32px));padding:.9rem 1rem 1rem}
  .od-done .od-start{white-space:nowrap;font-size:1rem;padding:.65rem 1.1rem}
  .od-zone::before{height:5px}
  .oz-head{padding:.4rem .5rem .4rem .55rem;gap:.5rem}
  .oz-emoji{flex-basis:34px;height:34px;font-size:1.1rem;border-radius:10px}
  .oz-name{font-size:1.02rem}
  .oz-range{font-size:.72rem}
  .oz-toggle{display:grid;place-items:center;width:34px;height:34px}
  .od-zone.shut .oz-body{display:none}
  .od-zone.shut .oz-toggle span[aria-hidden]{transform:rotate(-90deg)}
  .oz-body{padding:0 .6rem .6rem;max-height:42vh;overflow:auto}
  .oz-line{font-size:.86rem}
  .oz-facts li{font-size:.8rem;padding:.35rem .5rem}
  .od-card{left:8px;right:8px;bottom:70px;width:auto;max-height:58%;overflow:auto;padding:.7rem .75rem .7rem;border-radius:18px}
  .oc-pic{width:88px;height:60px}
  .oc-name{font-size:1.12rem}
  .oc-fact{font-size:.86rem}
  .od-ctrl{left:auto;right:8px;transform:none;bottom:10px}
  .od-btn{min-height:46px;padding:.5rem .8rem}
  .od-next .ob-t{display:none}
  .od-surface .ob-t{font-size:.9rem}
  .od-hint{bottom:66px}
  .od-tag{font-size:.7rem;padding:.14rem .5rem .18rem}
  .od-zl{font-size:.7rem;padding:.2rem .6rem}
}
@media(max-width:760px) and (max-height:520px){
  .od-zone .oz-body{max-height:30vh}
}
@media(prefers-reduced-motion:reduce){
  .od-hint b,.od-spot.is-new .od-tag::after{animation:none}
  .od-zone,.od-card,.od-done{transition:none;animation:none}
}