/* Dolphin Tank: the aquarium layer.
   A fixed canvas draws the water column behind everything. The guided dive is a pinned,
   scroll-scrubbed stage above the case file. The case file sits in opaque-ish panels so that
   text never depends on what the canvas is drawing behind it. Tokens still live in tokens.css. */

:root{
  --tw:#EAF3FF;            /* text on water */
  --tw2:#BCCCDE;          /* secondary text on water */
  --tw3:#95ABC2;
  --ta:#B8FF3C;           /* accent on water */
  --water:#03121B;
  --c-route:#6FB8EE;
  --c-forge:#F0993A;
  --c-loom:#AE92EE;
  --c-trace:#47D69B;
  --c-jury:#F1EEFF;
  --amber:#FFC46B;
  --pad:clamp(1.25rem,5vw,5rem);
}

html{background:var(--water)}
body{background:transparent}

#tank{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block;background:linear-gradient(180deg,#1e5a96 0%,#0a2a4e 55%,#02060d 100%)}
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block;opacity:0;transition:opacity 1.2s ease;background:#03121b}
.gl-on #gl{opacity:1}
.gl-on #tank{visibility:hidden}
.tour-tools{display:flex;align-items:center;gap:.5rem}
.gl-on .prod{display:none}
.tour,.shell,.seabed,.gauge{position:relative}
.shell,.seabed{z-index:2}
.tour{z-index:3;color:var(--tw)}

/* ---------------------------------------------------------------- depth gauge */
.gauge{display:none;position:fixed;right:10px;top:50%;transform:translateY(-50%);width:3.4rem;height:min(54vh,28rem);z-index:30;pointer-events:none;font:400 .6875rem/1 var(--font-mono);color:var(--tw2)}
@media (min-width:1280px){.tank-on .gauge{display:block}}
.g-ticks{position:absolute;right:.35rem;top:0;bottom:0;width:.5rem;border-right:1px solid rgba(183,210,218,.5);background:repeating-linear-gradient(to bottom,rgba(183,210,218,.55) 0 1px,transparent 1px 12.5%);background-position:right top;background-size:.5rem 100%;opacity:.9}
.g-mark{position:absolute;right:0;top:0;width:.75rem;height:.75rem;transform:translate(0,-50%) rotate(45deg);background:var(--ta);border:1px solid #03121b;transition:top .12s linear}
.g-mark output{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%) rotate(-45deg);transform-origin:right center;background:rgba(3,18,27,.78);color:var(--tw);padding:.25rem .45rem;border-radius:3px;white-space:nowrap;letter-spacing:.05em}

/* --------------------------------------------------------------- the dive */
.tour-stage{position:relative;color:var(--tw);isolation:isolate}
.tour-stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(2,12,19,.66) 0%,rgba(2,12,19,.38) 44%,rgba(2,12,19,0) 70%)}
.tour-bar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:.85rem var(--pad);background:linear-gradient(180deg,rgba(2,12,19,.94) 0%,rgba(2,12,19,.78) 58%,rgba(2,12,19,0) 100%);backdrop-filter:blur(6px) saturate(120%);-webkit-backdrop-filter:blur(6px) saturate(120%)}
.tour .brand{color:var(--tw)}
.tour .brand:hover{color:var(--ta)}
.skip-tour{display:inline-flex;align-items:center;min-height:var(--target);padding:.4rem .9rem;border:1px solid rgba(234,246,248,.4);border-radius:999px;color:var(--tw);font:600 var(--fs-caption)/1 var(--font-ui);text-decoration:none;background:rgba(3,18,27,.45)}
.skip-tour:hover{background:rgba(184,255,60,.16);border-color:var(--ta);color:var(--tw);text-decoration:none}
.tour a{color:var(--ta)}
.tour a:hover{color:#fff}
.tour :focus-visible{outline:2px solid var(--ta);outline-offset:3px}

/* plain sections (no JS, or reduced motion) */
.scene{position:relative;padding:calc(4.5rem + 6svh) var(--pad) 6svh;min-height:78svh}
.scene-in{max-width:41rem}
.scene-in.wide{max-width:52rem}
.tour-ns{position:relative;margin:0 var(--pad) var(--space-5);color:var(--text-primary)}

/* pinned dive */
.tour-pinned .tour-track{height:calc(var(--tour-units,7.1) * 88svh + 100vh);height:calc(var(--tour-units,7.1) * 88svh + 100svh)}
.tour-pinned .tour-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.tour-pinned .scene{position:absolute;inset:0;padding:0;min-height:0;opacity:var(--o,0);transform:translate3d(0,calc(var(--x,0) * -3.2svh),0);pointer-events:none;will-change:opacity,transform}
.tour-pinned .scene[data-on="1"]{pointer-events:auto}
.tour-pinned .scene-in{position:absolute;left:var(--pad);top:50%;transform:translateY(-46%);width:min(41rem,calc(100% - 2 * var(--pad)))}
.tour-pinned .scene-in.wide{width:min(52rem,calc(100% - 2 * var(--pad)))}
.tour-pinned .tour-ns{position:absolute;bottom:1rem;z-index:6}

/* type on water */
.tour .tag{display:flex;flex-wrap:wrap;gap:.2rem 1rem;margin:0 0 1.1rem;font:400 var(--fs-label)/1.5 var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--tw2)}
.tour .tag b{color:var(--ta);font-weight:600}
.tour h1{font:560 clamp(2.35rem,1.15rem + 4.7vw,5.1rem)/1.01 var(--font-display);letter-spacing:-.022em;max-width:15ch;margin:0 0 1.2rem;text-wrap:balance;text-shadow:0 2px 28px rgba(2,12,19,.55)}
.tour h2{font:560 clamp(1.8rem,1.15rem + 2.7vw,3.25rem)/1.06 var(--font-display);letter-spacing:-.016em;max-width:20ch;margin:0 0 1.1rem;text-shadow:0 2px 24px rgba(2,12,19,.55)}
.tour .sub{font-size:clamp(1rem,.95rem + .35vw,1.2rem);line-height:1.55;color:var(--tw2);max-width:34rem;margin:0 0 1.1rem;text-shadow:0 1px 16px rgba(2,12,19,.6)}
.tour .mono{color:var(--tw);background:rgba(234,246,248,.1);border:0;padding:.05em .35em}
/* the hero names the money defect outright, in the same amber the rejection scenes use */
.tour .verdict{margin:0 0 1.1rem;padding:.55rem .85rem;border-left:2px solid var(--amber);border-radius:2px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 40%),rgba(4,14,26,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);max-width:34rem;color:var(--tw);font:400 .875rem/1.5 var(--font-ui);text-shadow:0 1px 16px rgba(2,12,19,.6)}
.tour .verdict .mono{color:var(--amber);white-space:nowrap}
.tour .sub .hl{color:var(--tw);font-weight:600}
.tour .hint{display:flex;align-items:center;gap:.7rem;margin:1.6rem 0 0;font:400 var(--fs-label)/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tw2)}
.chev{width:.7rem;height:.7rem;border-right:2px solid var(--ta);border-bottom:2px solid var(--ta);transform:rotate(45deg);animation:bob 1.8s ease-in-out 4}
@keyframes bob{0%,100%{translate:0 -3px}50%{translate:0 4px}}

/* entrances, driven by the scene's --t (0 to 1). No timers: scrolling back rewinds them. */
.tour-pinned .rise{--k:clamp(0,calc((var(--t,0) - var(--d,0)) * 5),1);opacity:var(--k);transform:translate3d(0,calc((1 - var(--k)) * 2.2rem),0)}

/* the first scene plays on load; the rest are scrubbed by scroll */
.tour-pinned [data-scene="0"] .rise{animation:riseIn .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d,0) * 1.6s + .15s)}
@keyframes riseIn{from{opacity:0;transform:translate3d(0,2.2rem,0)}to{opacity:1;transform:none}}

/* seat chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0 .9rem;max-width:36rem}
.chip{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"dot name" "dot role";column-gap:.55rem;align-items:center;text-align:left;min-height:var(--target);padding:.45rem .8rem .45rem .7rem;background:rgba(3,18,27,.62);border:1px solid rgba(234,246,248,.26);border-radius:10px;color:var(--tw);font:400 .8125rem/1.2 var(--font-ui);cursor:pointer}
.chip b{grid-area:name;font-weight:600;font-size:.9375rem}
.chip span{grid-area:role;color:var(--tw2);font-size:.75rem}
.chip .dot{grid-area:dot;width:.8rem;height:.8rem;border-radius:50%;background:var(--sc,#fff)}
.chip:hover{background:rgba(234,246,248,.12);border-color:rgba(234,246,248,.6)}
.chip[aria-pressed="true"]{border-color:var(--sc,var(--ta));background:rgba(234,246,248,.14);box-shadow:inset 0 0 0 1px var(--sc,var(--ta))}
.c-route{--sc:var(--c-route)}.c-forge{--sc:var(--c-forge)}.c-loom{--sc:var(--c-loom)}.c-trace{--sc:var(--c-trace)}.c-jury{--sc:var(--c-jury)}
.chip:has(.c-route){--sc:var(--c-route)}.chip:has(.c-forge){--sc:var(--c-forge)}.chip:has(.c-loom){--sc:var(--c-loom)}.chip:has(.c-trace){--sc:var(--c-trace)}.chip:has(.c-jury){--sc:var(--c-jury)}
.seat-card{max-width:34rem;min-height:4.6em;margin:0;padding:.8rem 1rem;border-left:2px solid var(--ta);background:rgba(3,18,27,.5);color:var(--tw);font-size:.9375rem;line-height:1.55}
.seat-card b{color:var(--tw)}
.seat-card .sc-k{display:block;font:400 var(--fs-label)/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tw2);margin-top:.35rem}

/* stage list, defects, repairs */
.stage-list,.defects,.repair{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;gap:.55rem;max-width:34rem}
.stage-list li,.defects li,.repair li{display:grid;grid-template-columns:5.2rem 1fr;gap:.2rem .8rem;padding:.55rem .85rem;background:rgba(3,18,27,.52);border-left:2px solid rgba(184,255,60,.55);font-size:.9375rem;line-height:1.5;color:var(--tw)}
.stage-list b,.defects b{font:600 .75rem/1.7 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ta)}
.defects li{border-left-color:var(--amber)}
.defects b{color:var(--amber)}
.repair{counter-reset:r}
.repair li{counter-increment:r;display:block;position:relative;padding-left:2.4rem;border-left-color:rgba(234,246,248,.35)}
.repair li::before{content:counter(r);position:absolute;left:.85rem;top:.55rem;font:600 .8125rem/1.5 var(--font-mono);color:var(--ta)}
.repair li b{color:var(--ta)}

/* the rejection scene is the tallest, so it is set tighter and from the top */
.tour-pinned [data-scene="3"] .scene-in{top:4.9rem;transform:none;width:min(44rem,calc(100% - 2 * var(--pad)))}
[data-scene="3"] h2{font-size:clamp(1.6rem,1rem + 2vw,2.6rem);max-width:none}
[data-scene="3"] .sub{margin-bottom:.7rem}
[data-scene="3"] .defects,[data-scene="3"] .repair{gap:.4rem;margin-bottom:.7rem}
[data-scene="3"] .defects li,[data-scene="3"] .repair li{font-size:.875rem;padding-block:.4rem;line-height:1.45}
[data-scene="3"] .defects li{grid-template-columns:2.4rem 1fr}

/* product window beside the brief */
.prod{position:absolute;right:calc(var(--pad) + 3.2rem);top:50%;margin:0;width:min(42vw,40rem);translate:0 -54%}
.prod .win{position:relative;aspect-ratio:1280/980;border-radius:12px;border:1px solid rgba(234,246,248,.26);overflow:hidden;background:#0b1c26;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 40px 90px -30px rgba(0,0,0,.75)}
.prod .win img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.prod .phone{position:absolute;right:-1.2rem;bottom:-2.2rem;width:31%;aspect-ratio:375/760;border-radius:22px;border:5px solid #0a1a24;overflow:hidden;background:#0b1c26;box-shadow:0 30px 70px -20px rgba(0,0,0,.8),0 0 0 1px rgba(234,246,248,.3)}
.prod .phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .55s ease}
.prod .phone img.on{opacity:1}
.prod figcaption{margin:.7rem 0 0;font:400 .75rem/1.4 var(--font-mono);letter-spacing:.05em;color:var(--tw2)}

/* proof counters */
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin:1.2rem 0 1rem}
.proof>div{padding:.8rem .95rem;background:rgba(3,18,27,.6);border:1px solid rgba(234,246,248,.2);border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.proof dt{font:400 var(--fs-label)/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tw2)}
.proof dd{margin:.2rem 0 0;font:600 clamp(1.4rem,1rem + 1.5vw,2.2rem)/1.1 var(--font-display);font-variant-numeric:lining-nums tabular-nums;color:var(--tw)}
.proof dd small{display:block;margin-top:.15rem;font:400 .75rem/1.3 var(--font-ui);color:var(--tw2)}
.stated{max-width:40rem;font-size:.9375rem;color:var(--tw2);margin:0}

.cta{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.4rem 0 0}
.tour .btn{background:rgba(3,18,27,.6);border-color:rgba(234,246,248,.5);color:var(--tw)}
.tour .btn:hover{background:rgba(234,246,248,.16);color:#fff}
.tour .btn-primary{background:var(--ta);border-color:var(--ta);color:#03121B}
.tour .btn-primary:hover{background:#9af0e8;color:#03121B}

/* the stage ladder travels between scenes */
.ladder{position:absolute;left:var(--pad);bottom:max(1.6rem,5.5svh);z-index:4;list-style:none;margin:0;padding:0;display:flex;gap:.5rem;opacity:var(--lv,0);pointer-events:none}
.ladder li{display:grid;gap:.1rem;min-width:7.2rem;padding:.5rem .7rem .55rem 1.55rem;position:relative;background:rgba(3,18,27,.72);border:1px solid rgba(234,246,248,.26);border-radius:8px;font:400 .6875rem/1.3 var(--font-mono);letter-spacing:.04em;color:var(--tw2);transition:border-color .3s,background .3s}
.ladder b{font-weight:600;color:var(--tw);text-transform:uppercase;letter-spacing:.08em}
.ladder i{font-style:normal}
.ladder li::before{content:"";position:absolute;left:.6rem;top:.7rem;width:.55rem;height:.55rem;border:1.5px solid var(--tw2);border-radius:50%}
.ladder li[data-st="accepted"]{border-color:rgba(184,255,60,.7)}
.ladder li[data-st="accepted"]::before{background:var(--ta);border-color:var(--ta)}
.ladder li[data-st="rejected"]{border-color:var(--amber);background:rgba(60,38,6,.8)}
.ladder li[data-st="rejected"]::before{border-radius:0;transform:rotate(45deg);background:var(--amber);border-color:var(--amber)}
.ladder li[data-st="reviewing"]::before{border-style:dashed;border-color:var(--ta)}

.hud{position:absolute;right:var(--pad);bottom:max(1.6rem,5.5svh);z-index:4;margin:0;display:flex;align-items:baseline;gap:.6rem;font:400 var(--fs-label)/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tw2)}
.hud #hud-n{color:var(--ta);font-weight:600;font-size:1rem}

/* non-pinned: HUD and ladder are decoration */
html:not(.tour-pinned) .ladder,html:not(.tour-pinned) .hud{display:none}
html:not(.tour-pinned) .prod{position:relative;right:auto;top:auto;translate:none;margin:var(--space-5) 0 0;width:min(100%,30rem)}
html:not(.tour-pinned) .scene-in{max-width:41rem}

/* ----------------------------------------------------------- case-file panels */
.exhibit{padding-block:var(--space-6)}
.hero{padding-block:var(--space-6)}
.exhibit>.sheet,.hero>.sheet{max-width:calc(var(--sheet) + 2 * var(--gutter));background:color-mix(in srgb,var(--surface-1) 98%,transparent);border:1px solid var(--border);border-radius:12px;padding-block:var(--space-6) var(--space-7);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 90px -50px rgba(0,0,0,.8)}
.hero-title{font-size:var(--fs-h1);line-height:1.08;font-weight:560;letter-spacing:-.015em;max-width:18ch}
.content{padding-inline:clamp(.5rem,2vw,1.5rem)}
.content main{display:block}

/* a wave where the straight rule was */
.ex-head{position:relative;border-top:0;padding-top:1.5rem}
.ex-head::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10'%3E%3Cpath d='M0 5 Q12 -1 24 5 T48 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") repeat-x left center/48px 10px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10'%3E%3Cpath d='M0 5 Q12 -1 24 5 T48 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") repeat-x left center/48px 10px;animation:drift 9s linear infinite}
@keyframes drift{to{-webkit-mask-position:48px center;mask-position:48px center}}

/* panels rise into view */
.tour-pinned .reveal{opacity:0;transform:translate3d(0,26px,0)}
.tour-pinned .reveal.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}

/* product frames read as glass */
.shot .frame{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 30px 60px -30px rgba(0,0,0,.6)}

/* ----------------------------------------------------------------- seabed */
.seabed{min-height:76svh;display:flex;align-items:flex-end;padding-block:var(--space-8) clamp(6rem,22svh,12rem);color:var(--tw)}
.seabed .sheet{position:relative}
.seabed .tag{display:flex;gap:1rem;margin:0 0 1rem;font:400 var(--fs-label)/1.5 var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--tw2)}
.seabed .tag b{color:var(--ta)}
.seabed h2{font:560 clamp(1.8rem,1.1rem + 2.6vw,3rem)/1.08 var(--font-display);max-width:18ch;margin:0 0 1rem;text-shadow:0 2px 24px rgba(2,12,19,.6)}
.seabed .sub{max-width:36rem;color:var(--tw2);text-shadow:0 1px 16px rgba(2,12,19,.7)}
.seabed .btn{background:rgba(3,18,27,.6);border-color:rgba(234,246,248,.5);color:var(--tw)}
.seabed .btn:hover{background:rgba(234,246,248,.16);color:#fff}
.seabed a{color:var(--ta)}
.site-foot{position:relative;z-index:3}

/* ------------------------------------------------------------ small screens */
@media (max-width:899px){
  .tour-stage::before{background:linear-gradient(180deg,rgba(2,12,19,.7) 0%,rgba(2,12,19,.55) 55%,rgba(2,12,19,.05) 85%)}
  .tour-pinned .scene-in{top:5.2rem;transform:none;width:calc(100% - 2 * var(--pad))}
  .tour h1{font-size:clamp(2.1rem,9vw,3.2rem);max-width:14ch}
  .tour h2{font-size:clamp(1.55rem,6.4vw,2.2rem)}
  .tour .sub{font-size:.9375rem;margin-bottom:.8rem}
  .tour .hint{margin-top:1rem}
  .chips{gap:.4rem;margin:.8rem 0 .6rem}
  .chip{padding:.35rem .6rem;min-height:var(--target)}
  .chip span{display:none}
  .seat-card{font-size:.8125rem;padding:.6rem .8rem;min-height:0}
  .stage-list li,.defects li,.repair li{font-size:.8125rem;padding:.4rem .65rem;grid-template-columns:4.2rem 1fr}
  .repair li{padding-left:2.2rem}
  .repair li::before{left:.7rem;top:.4rem}
  [data-scene="2"] .sub{display:none}
  .stage-list,.defects,.repair{gap:.4rem;margin-bottom:.8rem}
  .prod{right:var(--pad);top:auto;bottom:max(6rem,11svh);width:34%;translate:none}
  .prod .win{display:none}
  .prod .phone{position:relative;right:auto;bottom:auto;width:100%}
  .prod figcaption{display:none}
  .proof{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}
  .proof>div{padding:.55rem .7rem}
  .proof dd{font-size:1.25rem}
  .ladder{left:var(--pad);right:var(--pad);gap:.35rem}
  .ladder li{min-width:0;flex:1;padding:.4rem .4rem .45rem 1.25rem;font-size:.625rem}
  .ladder li::before{left:.4rem;top:.55rem}
  .hud{display:none}
  .exhibit>.sheet,.hero>.sheet{border-radius:10px}
}
@media (max-height:640px) and (max-width:899px){
  .tour .sub{display:none}
  .prod{display:none}
}
@media (max-width:700px){
  .content{padding-inline:6px}
}

@media (prefers-reduced-motion:reduce){
  .ex-head::before{animation:none}
  .chev{animation:none}
}

@media (max-height:600px){
  .ladder,.hud{display:none}
  .tour .sub{display:none}
}

/* with the 3D ocean behind, the text sits on a firmer wash so it stays readable over bright water */
.gl-on .tour-stage::before{background:linear-gradient(90deg,rgba(2,12,19,.78) 0%,rgba(2,12,19,.52) 40%,rgba(2,12,19,0) 74%)}
@media (max-width:899px){.gl-on .tour-stage::before{background:linear-gradient(180deg,rgba(2,12,19,.8) 0%,rgba(2,12,19,.62) 58%,rgba(2,12,19,.1) 88%)}}

@media (max-width:560px){
  .tour .brand span{display:none}
  .tour-tools{gap:.35rem}
  .tour-tools .skip-tour{padding:.3rem .7rem;font-size:.75rem;white-space:nowrap}
}

/* Default backdrop: plates pre-rendered from the 3D scene. No GPU work at run time, so nothing to crash. */
#tank{display:none}
.plates{position:fixed;inset:0;z-index:0;overflow:hidden;background:#02060d}
.plate{position:absolute;inset:0;opacity:0;visibility:hidden;will-change:opacity,transform;transform-origin:62% 50%}
.plate:first-child{opacity:1;visibility:visible}
.plate img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.gl-on .plates{display:none}
@media (max-aspect-ratio:1/1){.plate img{object-position:50% 70%}}