/* ============================================================
   TOKENS — cinematic deep-sea documentary, single dark world
   ============================================================ */
:root{
  --void:#040b16;
  --deep:#081f36;
  --deep-2:#0c2a48;
  --panel:#0f3153;
  --panel-2:#133a60;
  --line:rgba(157,214,220,.16);
  --line-strong:rgba(157,214,220,.32);
  --steel:#6a90a3;
  --steel-dim:#3f5c6e;
  --ink:#f2f8fa;
  --ink-dim:#aecbd6;
  --ink-faint:#7699a9;
  --cyan:#4fe4f0;
  --cyan-soft:rgba(79,228,240,.18);
  --cyan-line:rgba(79,228,240,.6);
  --cyan-glow:rgba(79,228,240,.45);
  --teal:#2be2a8;
  --teal-soft:rgba(43,226,168,.16);
  --teal-line:rgba(43,226,168,.55);
  --alert:#ff7a4d;
  --alert-soft:rgba(255,122,77,.18);
  --alert-line:rgba(255,122,77,.68);

  --f-display:'Fraunces',"Iowan Old Style","Palatino Linotype",serif;
  --f-body:'Source Serif 4',Georgia,"Times New Roman",serif;
  --f-mono:'IBM Plex Mono',ui-monospace,"SFMono-Regular",Menlo,monospace;

  --gutter:clamp(20px,6vw,72px);
  --measure:66ch;
  color-scheme:dark;
}

*{box-sizing:border-box;}
body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:-.01em;text-wrap:balance;margin:0;}
p{margin:0;}
img{max-width:100%;}
::selection{background:var(--cyan-soft);color:var(--ink);}

.lede{
  max-width:var(--measure);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* eyebrow / kicker */
.kicker{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cyan);
  display:flex;
  align-items:center;
  gap:.6em;
}
.kicker::before{
  content:"";
  width:1.4em;height:1px;
  background:var(--cyan-line);
  display:inline-block;
}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead{
  padding:18px var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--f-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  border-bottom:1px solid var(--line);
}
.masthead span:last-child{color:var(--steel);}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:16vh var(--gutter) 4.5vh;
  overflow:hidden;
  background:var(--void);
}
.hero-scene{
  position:absolute;inset:0;
  z-index:0;
  container-type:size;
  --cw: calc(100cqw / 1px);
  --ch: calc(100cqh / 1px);
  --pxu-scale: max(calc(var(--cw) / 1000), calc(var(--ch) / 1300));
  --pxu-visibleh: calc(var(--ch) / var(--pxu-scale));
  --pxu-pan: calc(-1 * max(0, 1260 - var(--pxu-visibleh)));
}
.hero-scene svg{width:100%;height:100%;display:block;}
.hero-ray{animation:hero-ray-drift 9s ease-in-out infinite;}
.hero-ray.r2{animation-delay:2.4s;}
@keyframes hero-ray-drift{
  0%,100%{opacity:.04;transform:translateX(0);}
  50%{opacity:.09;transform:translateX(14px);}
}
.hero-bubbles circle{fill:rgba(230,251,255,.55);}
.hero-bubbles .bub{animation:hero-bub-rise linear infinite;}
.b1{animation-duration:7s;}
.b2{animation-duration:9s;animation-delay:1.4s;}
.b3{animation-duration:6.2s;animation-delay:.6s;}
.b4{animation-duration:8.4s;animation-delay:2.6s;}
.b5{animation-duration:10s;animation-delay:.2s;}
.b6{animation-duration:7.6s;animation-delay:3.2s;}
@keyframes hero-bub-rise{
  0%{transform:translateY(0);opacity:0;}
  8%{opacity:.75;}
  92%{opacity:.5;}
  100%{transform:translateY(-1150px);opacity:0;}
}
.hero-kelp path{animation:hero-kelp-sway 5.5s ease-in-out infinite;transform-origin:bottom center;}
@keyframes hero-kelp-sway{
  0%,100%{transform:rotate(-4deg);}
  50%{transform:rotate(4deg);}
}
.hero-fish{animation:hero-fish-drift 14s ease-in-out infinite;}
.hero-fish.f2{animation-duration:18s;animation-direction:reverse;}
@keyframes hero-fish-drift{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(60px);}
}
.leak-bubbles circle{fill:rgba(255,190,150,.8);animation:hero-leak-rise 3.2s ease-in infinite;}
.leak-bubbles circle:nth-child(2){animation-delay:.9s;}
.leak-bubbles circle:nth-child(3){animation-delay:1.8s;}
@keyframes hero-leak-rise{
  0%{transform:translateY(0);opacity:.9;}
  100%{transform:translateY(-90px);opacity:0;}
}
.crack-glow{animation:hero-crack-pulse 2.6s ease-in-out infinite;}
@keyframes hero-crack-pulse{
  0%,100%{opacity:.5;}
  50%{opacity:.95;}
}
.hero-auv-body{fill:#e7eef2;}
.hero-auv-fin{fill:#a9bac4;}
.hero-auv-tail{fill:#a9bac4;}
.hero-auv-eye{fill:var(--cyan);}
.hero-auv{
  transform-origin:0 0;
  animation:hero-dive 4.6s cubic-bezier(.62,.04,.28,1) both;
}
@keyframes hero-dive{
  0%{ transform:translate(560px,-60px) rotate(30deg) scale(.34); opacity:0; }
  10%{ opacity:1; }
  60%{ transform:translate(430px,700px) rotate(30deg) scale(.72); }
  100%{ transform:translate(230px,980px) rotate(30deg) scale(1); }
}
.hero-camera{
  animation:hero-camera-pan 4.6s cubic-bezier(.62,.04,.28,1) both;
}
@keyframes hero-camera-pan{
  0%{ transform:translateY(0px); }
  100%{ transform:translateY(calc(var(--pxu-pan) * 1px)); }
}
.hero-vignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(4,11,22,0) 0%, rgba(4,11,22,0) 66%, rgba(4,11,22,.5) 100%);
}
.hero-text-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(4,11,22,.68) 0%, rgba(4,11,22,.32) 24%, rgba(4,11,22,0) 42%);
  opacity:0;
  animation:hero-scrim-in 1.4s ease-out 4.1s both;
}
@keyframes hero-scrim-in{
  to{opacity:1;}
}
.hero-content{
  position:relative;z-index:2;max-width:1040px;
  opacity:0;transform:translateY(18px);
  animation:hero-text-in 1.3s ease-out 4.5s both;
}
@keyframes hero-text-in{
  to{opacity:1;transform:translateY(0);}
}
.hero h1{
  font-size:clamp(2.4rem,6.4vw,5.4rem);
  line-height:.98;
  color:var(--ink);
  margin-top:0;
  text-shadow:0 2px 20px rgba(4,11,22,.9), 0 10px 60px rgba(4,11,22,.7);
}
.hero h1 em{
  font-style:italic;
  color:var(--cyan);
}
.hero .subhead{
  font-family:var(--f-body);
  font-size:clamp(1.05rem,1.9vw,1.4rem);
  color:var(--ink-dim);
  max-width:38ch;
  margin-top:1.1rem;
  font-style:italic;
}
.scroll-cue{
  margin-top:3.2rem;
  display:flex;
  align-items:center;
  gap:.8em;
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.scroll-cue .line{
  width:1px;height:34px;
  background:linear-gradient(var(--cyan-line),transparent);
  position:relative;
  overflow:hidden;
}
.scroll-cue .line::after{
  content:"";
  position:absolute;left:0;top:-40%;
  width:100%;height:40%;
  background:var(--cyan);
  animation:cue-drop 2.2s ease-in-out infinite;
}
@keyframes cue-drop{
  0%{top:-40%;}
  60%{top:100%;}
  100%{top:100%;}
}

/* ============================================================
   EDITORIAL PROSE
   ============================================================ */
.editorial{
  padding:clamp(1.8rem,3.6vh,2.6rem) var(--gutter);
  background:var(--deep);
}
.editorial + .editorial{padding-top:0;}
.section-title + .editorial,
blockquote.pull + .editorial,
.callout-box + .editorial{padding-top:0;}
.editorial p{
  font-size:clamp(1.05rem,1.35vw,1.22rem);
  line-height:1.72;
  color:var(--ink-dim);
  max-width:var(--measure);
  margin-inline:auto;
}
.editorial p + p{margin-top:1.1em;}
.editorial p strong{color:var(--ink);font-weight:600;}

.editorial.opening p{
  color:var(--ink);
}
.editorial.opening p::first-letter{
  font-family:var(--f-display);
  font-size:3.6em;
  float:left;
  line-height:.82;
  padding:.05em .09em 0 0;
  color:var(--cyan);
  font-weight:600;
}

.section-title{
  max-width:var(--measure);
  margin:0 auto .9rem;
  padding-inline:var(--gutter);
  font-size:clamp(1.7rem,3.6vw,2.6rem);
  color:var(--ink);
  border-top:1px solid var(--line-strong);
  padding-top:1.1rem;
}
.section-title .num{
  display:block;
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.16em;
  color:var(--cyan);
  margin-bottom:.7rem;
}

blockquote.pull{
  max-width:var(--measure);
  margin:clamp(1.2rem,2.6vh,1.8rem) auto;
  padding-inline:var(--gutter);
  position:relative;
}
blockquote.pull p{
  font-family:var(--f-display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.5rem,3vw,2.15rem);
  line-height:1.32;
  color:var(--ink);
  max-width:22ch;
}
blockquote.pull cite{
  display:block;
  font-style:normal;
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--steel);
  margin-top:1.1rem;
}
blockquote.small{
  max-width:calc(var(--measure) - 2ch);
  margin:1.1em auto;
  padding:0 0 0 1.1em;
  border-left:2px solid var(--cyan-line);
}
blockquote.small p{
  font-style:italic;
  color:var(--ink);
  font-size:clamp(1.05rem,1.35vw,1.22rem);
  line-height:1.7;
}
blockquote.small cite{
  display:block;
  font-style:normal;
  font-family:var(--f-mono);
  font-size:.68rem;
  letter-spacing:.08em;
  color:var(--steel);
  margin-top:.6em;
}

.editorial-figure{
  max-width:920px;
  margin:1.5rem auto;
  padding:0 var(--gutter);
}
.editorial-figure .frame{
  border:1px solid var(--line-strong);
  background:var(--panel);
  padding:6px;
  border-radius:2px;
}
.editorial-figure img{
  width:100%;
  display:block;
  border-radius:1px;
}
.editorial-figure figcaption{
  margin-top:.7rem;
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.02em;
  color:var(--ink-faint);
  line-height:1.6;
  max-width:70ch;
}

.callout-box{
  max-width:calc(var(--measure) + 4ch);
  margin:clamp(1.2rem,2.8vh,1.8rem) auto;
  padding:clamp(1.6rem,3.5vw,2.4rem);
  border:1px solid var(--line-strong);
  background:linear-gradient(160deg, var(--panel) 0%, var(--deep-2) 100%);
  border-radius:2px;
  position:relative;
}
.callout-box::before{
  content:"GHI CHÚ";
  position:absolute;
  top:-.7em;left:1.6rem;
  background:var(--deep);
  padding:0 .6em;
  font-family:var(--f-mono);
  font-size:.65rem;
  letter-spacing:.16em;
  color:var(--cyan);
}
.callout-box h3{
  font-size:clamp(1.2rem,2.2vw,1.55rem);
  color:var(--ink);
  margin-bottom:.9rem;
  font-style:italic;
  font-weight:500;
}
.callout-box p{
  font-size:1.02rem;
  line-height:1.72;
  color:var(--ink-dim);
  max-width:60ch;
}
.callout-box p + p{margin-top:1.1em;}
.callout-box .attrib{
  margin-top:1.2em;
  font-style:italic;
  color:var(--ink);
}

.outro{
  padding:8vh var(--gutter) 12vh;
  text-align:center;
  background:
    radial-gradient(ellipse 90% 60% at 50% 100%, #103f5f 0%, var(--deep) 45%, var(--void) 80%);
}
.outro p{
  max-width:26ch;
  margin-inline:auto;
  font-family:var(--f-display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.5rem,3.4vw,2.3rem);
  line-height:1.4;
  color:var(--ink);
}
.outro .fin{
  margin-top:2.4rem;
  font-family:var(--f-mono);
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.byline{
  padding:3.2rem var(--gutter) 4rem;
  text-align:center;
  background:var(--void);
  border-top:1px solid var(--line);
}
.byline p{
  font-family:var(--f-mono);
  font-size:.74rem;
  letter-spacing:.06em;
  color:var(--ink-faint);
  line-height:1.9;
}
.byline p strong{
  color:var(--ink-dim);
  font-weight:500;
}
.byline p a{
  color:var(--cyan,#4fe4f0);
  text-decoration:none;
  border-bottom:1px solid rgba(79,228,240,.4);
  transition:border-color .2s ease;
}
.byline p a:hover{
  border-color:rgba(79,228,240,.9);
}

/* ============================================================
   SCROLLYTELLING — shared architecture
   sticky visual (left/55-65%) + scrolling text steps (right/35-45%)
   ============================================================ */
.scrolly{
  position:relative;
  background:var(--deep-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.scrolly-grid{
  display:grid;
  grid-template-columns:60% 40%;
}
.scrolly-visual{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  background:var(--void);
  display:flex;
  align-items:center;
  justify-content:center;
}
.scrolly-steps{
  display:flex;
  flex-direction:column;
}
.step{
  min-height:88vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:6vh clamp(20px,4vw,52px);
  opacity:.28;
  transition:opacity .5s ease;
}
.step.is-active{opacity:1;}
.step:first-child{min-height:80vh;}
.step:last-child{min-height:80vh;}
.step .step-eyebrow{
  font-family:var(--f-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:.9em;
}
.step h3{
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  color:var(--ink);
  line-height:1.18;
  margin-bottom:.6em;
}
.step p{
  font-size:1.02rem;
  line-height:1.72;
  color:var(--ink-dim);
  max-width:44ch;
}
.step p + p{margin-top:1em;}
.step .tag-date{
  display:inline-block;
  font-family:var(--f-mono);
  font-size:.85rem;
  color:var(--alert);
  border:1px solid var(--alert-line);
  background:var(--alert-soft);
  padding:.25em .7em;
  margin-bottom:.9em;
  letter-spacing:.06em;
}

.scrolly-caption{
  font-family:var(--f-mono);
  font-size:.72rem;
  color:var(--ink-faint);
  padding:1.1rem var(--gutter) 1.6rem;
  max-width:var(--measure);
  margin-inline:auto;
  border-top:1px dashed var(--line);
  margin-top:0;
}
.scrolly-caption em{font-style:italic;color:var(--steel);}

/* generic svg-scene helpers */
.scene{width:100%;height:100%;position:relative;}
.scene svg{width:100%;height:100%;display:block;}
.scene-vignette{
  position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 50%, transparent 40%, rgba(3,7,10,.85) 100%);
}
.hud{
  position:absolute;
  font-family:var(--f-mono);
  font-size:.66rem;
  letter-spacing:.1em;
  color:var(--ink-faint);
  text-transform:uppercase;
}
.hud.tl{top:20px;left:20px;}
.hud.br{bottom:20px;right:20px;text-align:right;}


/* click-cards (Interaction 03) */
.hotspots{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.hotspot{
  position:absolute;
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid var(--cyan-line);
  background:rgba(95,211,220,.08);
  pointer-events:auto;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .25s ease, transform .25s ease;
}
.hotspot:hover,.hotspot:focus-visible{background:rgba(95,211,220,.22);transform:scale(1.08);}
.hotspot::after{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 0 var(--cyan-glow);
  animation:hotspot-pulse 2.4s ease-out infinite;
}
@keyframes hotspot-pulse{
  0%{box-shadow:0 0 0 0 var(--cyan-glow);}
  70%{box-shadow:0 0 0 14px rgba(95,211,220,0);}
  100%{box-shadow:0 0 0 0 rgba(95,211,220,0);}
}
.info-card{
  position:absolute;
  max-width:280px;
  background:var(--panel);
  border:1px solid var(--line-strong);
  padding:1rem 1.15rem;
  font-size:.88rem;
  line-height:1.55;
  color:var(--ink-dim);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
  z-index:5;
}
.info-card.is-open{opacity:1;transform:translateY(0);pointer-events:auto;}
.info-card .t{
  font-family:var(--f-mono);
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cyan);
  display:block;
  margin-bottom:.5em;
}
.info-card button.close{
  position:absolute;top:.4rem;right:.4rem;
  width:26px;height:26px;
  background:none;border:none;color:var(--ink-faint);
  font-size:1rem;cursor:pointer;
}

/* toggle (Interaction 02) */
.scale-toggle{
  position:absolute;
  bottom:22px;left:22px;
  display:flex;
  align-items:center;
  gap:.6em;
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--ink-faint);
  z-index:4;
}
.scale-toggle button{
  min-height:44px;
  padding:0 1rem;
  background:var(--panel);
  border:1px solid var(--line-strong);
  color:var(--ink-dim);
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.scale-toggle button.active{
  color:var(--void);
  background:var(--cyan);
  border-color:var(--cyan);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .scrolly-grid{grid-template-columns:1fr;}
  .scrolly-visual{
    position:sticky;
    top:0;
    height:56vh;
  }
  .step{min-height:auto;padding:8vh clamp(18px,5vw,28px) 6vh;opacity:1;}
  .step:first-child{min-height:auto;}
  .step:last-child{min-height:auto;padding-bottom:10vh;}
  .hero{min-height:82vh;padding-top:20vh;}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.15s !important;scroll-behavior:auto !important;}
}
body.reduced-motion .parallax-el,
body.reduced-motion .particle{display:none !important;}

/* ============================================================ */

.ns-scene{width:100%;height:100%;position:relative;background:radial-gradient(ellipse 90% 70% at 50% 38%, #1a5478 0%, #0e3a58 45%, #082036 75%, #040f1c 100%);}
.ns-scene svg{width:100%;height:100%;display:block;}
.ns-land{fill:#1a4562;stroke:#2c5c82;stroke-width:1;}
.ns-water-tex{stroke:rgba(148,177,194,.10);stroke-width:1;fill:none;}
.ns-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;fill:var(--ink-faint);text-transform:uppercase;opacity:0;transition:opacity .8s ease;}
.ns-scene[data-active-state="1"] .ns-label,
.ns-scene[data-active-state="2"] .ns-label,
.ns-scene[data-active-state="3"] .ns-label{opacity:1;}
.ns-pipeline{fill:none;stroke:var(--steel);stroke-width:2;stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.6s cubic-bezier(.22,.61,.36,1), stroke 1s ease, opacity 1s ease;opacity:0;}
.ns-scene[data-active-state="2"] .ns-pipeline,
.ns-scene[data-active-state="3"] .ns-pipeline,
.ns-scene[data-active-state="4"] .ns-pipeline{stroke-dashoffset:0;opacity:.9;stroke:var(--cyan);}
.ns-incident{opacity:0;transition:opacity .6s ease;}
.ns-scene[data-active-state="3"] .ns-incident,
.ns-scene[data-active-state="4"] .ns-incident{opacity:1;}
.ns-incident circle.core{fill:var(--alert);}
.ns-incident circle.ring{fill:none;stroke:var(--alert);stroke-width:1.4;animation:ns-pulse 2.6s ease-out infinite;}
@keyframes ns-pulse{
  0%{r:6;opacity:.9;}
  100%{r:46;opacity:0;}
}
.ns-group{transition:transform 1.8s cubic-bezier(.22,.61,.36,1), opacity 1.4s ease;transform-origin:37% 67%;}
.ns-scene[data-active-state="2"] .ns-group{transform:scale(1.45);}
.ns-scene[data-active-state="3"] .ns-group{transform:scale(2);}
.ns-scene[data-active-state="4"] .ns-group{transform:scale(2.9);}
.ns-scene[data-active-state="1"] .ns-land,
.ns-scene[data-active-state="1"] .ns-water-tex{opacity:1;}
.ns-scene[data-active-state="4"] .ns-land{opacity:.35;}
.ns-dive-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(3,7,10,0) 0%, rgba(3,10,15,.55) 55%, #030a11 100%);opacity:0;transition:opacity 1.6s ease;pointer-events:none;}
.ns-scene[data-active-state="4"] .ns-dive-overlay{opacity:1;}
.ns-dive-headline{
  position:absolute;left:0;right:0;bottom:9%;
  text-align:center;
  font-family:var(--f-display);font-style:italic;font-weight:500;
  font-size:clamp(1.3rem,2.6vw,1.9rem);
  color:var(--ink);
  opacity:0;transform:translateY(10px);
  transition:opacity 1s ease .3s, transform 1s ease .3s;
  padding:0 8%;
}
.ns-scene[data-active-state="4"] .ns-dive-headline{opacity:1;transform:translateY(0);}
.ns-particle{fill:var(--cyan);opacity:0;transition:opacity 1s ease;}
.ns-scene[data-active-state="4"] .ns-particle{opacity:.5;animation:ns-drift 6s linear infinite;}
@keyframes ns-drift{0%{transform:translateY(0);}100%{transform:translateY(-40px);}}

/* ============================================================ */

.ns2-scene{width:100%;height:100%;position:relative;background:radial-gradient(ellipse 80% 80% at 50% 50%, #164f72 0%, #0d3350 48%, #071c30 78%, #040e1c 100%);display:flex;align-items:center;justify-content:center;}
.ns2-scene svg{width:min(88%,620px);height:auto;}
.ns2-globe-line{fill:none;stroke:var(--line-strong);stroke-width:1;}
.ns2-mesh{fill:none;stroke:var(--cyan);stroke-width:1.1;opacity:0;transition:opacity 1.4s ease;}
.ns2-scene[data-active-state="3"] .ns2-mesh,
.ns2-scene[data-active-state="4"] .ns2-mesh{opacity:.65;}
.ns2-scene[data-toggle="mesh"] .ns2-mesh{opacity:.65;}
.ns2-scene[data-toggle="single"] .ns2-mesh{opacity:0;}
.ns2-single{fill:none;stroke:var(--cyan);stroke-width:2.2;stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.8s cubic-bezier(.22,.61,.36,1), opacity .8s ease;opacity:0;}
.ns2-scene[data-active-state="2"] .ns2-single,
.ns2-scene[data-active-state="3"] .ns2-single,
.ns2-scene[data-active-state="4"] .ns2-single{stroke-dashoffset:0;opacity:1;}
.ns2-scene[data-toggle="single"] .ns2-single{opacity:1;stroke-dashoffset:0;}
.ns2-scene[data-toggle="mesh"] .ns2-single{opacity:.35;}
.ns2-dot{fill:var(--cyan);}
.ns2-bignum{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;
  text-align:center;pointer-events:none;transition:opacity .7s ease, transform .7s ease;
}
.ns2-bignum .n{font-family:var(--f-mono);font-weight:600;font-size:clamp(2.6rem,9vw,5.5rem);color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.ns2-bignum .u{font-family:var(--f-mono);font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-top:.4rem;}
.ns2-scene[data-active-state="2"] .ns2-bignum,
.ns2-scene[data-active-state="3"] .ns2-bignum,
.ns2-scene[data-active-state="4"] .ns2-bignum{opacity:0;transform:scale(.7);}
.ns2-globe-wrap{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}

/* ============================================================ */

.gs-scene{width:100%;height:100%;position:relative;background:linear-gradient(180deg, #0d3450 0%, #082439 45%, #051526 75%, #030d18 100%);}
.gs-scene svg{width:100%;height:100%;display:block;}
.gs-seabed{fill:#0e3348;}
.gs-weed{fill:none;stroke:#1f5d52;stroke-width:3;stroke-linecap:round;transform-origin:bottom center;}
body:not(.reduced-motion) .gs-weed{animation:gs-sway 5s ease-in-out infinite;}
.gs-weed.w2{animation-delay:.8s;}
.gs-weed.w3{animation-delay:1.6s;}
@keyframes gs-sway{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg);}}
.gs-cable{fill:none;stroke:var(--steel);stroke-width:2.5;}
.gs-cable-tick{fill:var(--steel-dim);}

.gs-auv{transition:transform 2.1s cubic-bezier(.22,.61,.36,1);}
.gs-scene[data-active-state="1"] .gs-auv{transform:translateX(0px);}
.gs-scene[data-active-state="2"] .gs-auv{transform:translateX(150px);}
.gs-scene[data-active-state="3"] .gs-auv{transform:translateX(255px);}
.gs-scene[data-active-state="4"] .gs-auv{transform:translateX(300px);}
.gs-scene[data-active-state="5"] .gs-auv{transform:translateX(300px);}
.gs-auv-body{fill:#c7d3da;}
.gs-auv-fin{fill:#8fa2ad;}
.gs-auv-light{fill:url(#gsLightGrad);opacity:.65;}

.gs-sonar{fill:none;stroke:var(--cyan);stroke-width:1.4;opacity:0;}
.gs-scene[data-active-state="2"] .gs-sonar,
.gs-scene[data-active-state="3"] .gs-sonar{opacity:.9;animation:gs-sonar-sweep 2.8s ease-out infinite;}
@keyframes gs-sonar-sweep{0%{r:8;opacity:.85;}100%{r:120;opacity:0;}}

.gs-object{opacity:0;transition:opacity 1s ease;}
.gs-scene[data-active-state="2"] .gs-object,
.gs-scene[data-active-state="3"] .gs-object,
.gs-scene[data-active-state="4"] .gs-object,
.gs-scene[data-active-state="5"] .gs-object{opacity:.9;}
.gs-object path{fill:#2a3a44;stroke:var(--alert);stroke-width:1;}
.gs-object.is-flagged path{stroke:var(--alert);}

.gs-signal{opacity:0;transition:opacity .9s ease;}
.gs-scene[data-active-state="5"] .gs-signal{opacity:1;}
.gs-signal line{stroke:var(--cyan);stroke-width:1.4;stroke-dasharray:4 5;}
body:not(.reduced-motion) .gs-signal line{animation:gs-dash 1.4s linear infinite;}
@keyframes gs-dash{to{stroke-dashoffset:-18;}}

.gs-readout{
  position:absolute;left:50%;top:16%;transform:translateX(-50%);
  font-family:var(--f-mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.5em 1em;border:1px solid var(--line-strong);background:rgba(6,20,30,.72);
  color:var(--ink-dim);opacity:0;transition:opacity .5s ease;white-space:nowrap;
}
.gs-readout.alert{color:var(--alert);border-color:var(--alert-line);background:var(--alert-soft);}
.gs-scene[data-active-state="3"] .ro-classify{opacity:1;}
.gs-scene[data-active-state="4"] .ro-stop{opacity:1;}
.gs-scene[data-active-state="5"] .ro-human{opacity:1;}

.gs-tag{position:absolute;left:16px;bottom:16px;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;color:var(--ink-faint);line-height:1.6;}
.gs-tag b{display:block;color:var(--ink);font-size:.82rem;letter-spacing:.06em;}

/* ============================================================ */

.z-scene{width:100%;height:100%;position:relative;background:radial-gradient(ellipse 100% 80% at 50% 50%, #144b6e 0%, #0c3350 42%, #071e34 72%, #040f1c 100%);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.z-scene svg{width:min(90%,640px);height:auto;position:absolute;}
.z-layer{transition:opacity 1.3s ease, transform 1.5s cubic-bezier(.22,.61,.36,1);}

.z-auv{opacity:1;transform:scale(1);}
.z-scene[data-active-state="2"] .z-auv,
.z-scene[data-active-state="3"] .z-auv,
.z-scene[data-active-state="4"] .z-auv{opacity:0;transform:scale(1.7);}

.z-cables{opacity:0;transform:scale(.55);}
.z-scene[data-active-state="2"] .z-cables{opacity:1;transform:scale(1);}
.z-scene[data-active-state="3"] .z-cables,
.z-scene[data-active-state="4"] .z-cables{opacity:0;transform:scale(1.7);}

.z-region{opacity:0;transform:scale(.55);}
.z-scene[data-active-state="3"] .z-region{opacity:1;transform:scale(1);}
.z-scene[data-active-state="4"] .z-region{opacity:0;transform:scale(1.7);}

.z-global{opacity:0;transform:scale(.6);}
.z-scene[data-active-state="4"] .z-global{opacity:1;transform:scale(1);}

.z-scene .gs-cable{stroke:var(--steel);}
.z-dot{fill:var(--cyan);}
.z-land{fill:#193f56;}
.z-arc{fill:none;stroke:var(--cyan);stroke-width:.8;opacity:.55;}
.z-caption{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);text-align:center;white-space:nowrap;}

/* ============================================================ */

/* mobile refinements — placed last so it wins over per-interaction rules */
@media (max-width:900px){
  .gs-readout,.z-caption,.hud{
    white-space:normal !important;
    max-width:82% !important;
    text-align:center;
    font-size:.6rem !important;
    line-height:1.5;
    padding:.5em .7em;
  }
  .ns-dive-headline{font-size:1.05rem;padding:0 6%;}
  .scale-toggle{left:12px;bottom:12px;}
  .scale-toggle button{padding:0 .7rem;font-size:.64rem;min-height:40px;}
  .info-card{max-width:76vw;font-size:.82rem;}
}