/* the opening: scroll zooms ×12 per level into the centre of each scene */
#zoom{position:relative}
#stage{position:sticky;top:0;height:100vh;height:100svh;width:100%;overflow:hidden;background:#000}
.layer{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform,opacity}
.copy{opacity:var(--copy,1)}
.target{position:absolute;left:50%;top:50%;width:8.3333%;height:8.3333%;transform:translate(-50%,-50%)}
.brackets{position:absolute;inset:-6px;pointer-events:none}
.brackets::before,.brackets::after,.brackets i::before,.brackets i::after{content:"";position:absolute;width:10px;height:10px;border:1px solid #fff}
.brackets::before{left:0;top:0;border-right:0;border-bottom:0}
.brackets::after{right:0;top:0;border-left:0;border-bottom:0}
.brackets i::before{left:0;bottom:0;border-right:0;border-top:0}
.brackets i::after{right:0;bottom:0;border-left:0;border-top:0}

.headline{position:absolute;left:var(--gut);bottom:9vh;max-width:min(520px,38vw)}
.headline .tag{display:block;margin-bottom:16px}
.headline h2{font-family:var(--disp);font-weight:400;font-size:clamp(30px,3.9vw,60px);line-height:1}
.headline p{margin-top:18px;font-size:clamp(14px,1.15vw,17px);line-height:1.5;color:var(--dim);max-width:44ch}

#dots{position:absolute;inset:0;width:100%;height:100%}
.you{position:absolute;left:calc(50% + 4.6%);top:calc(50% - 6.5%);font-size:11px;letter-spacing:.16em;white-space:nowrap}
.you::before{content:"";display:inline-block;width:26px;height:1px;background:#fff;vertical-align:middle;margin-right:8px;transform:translateY(-1px)}

.wire{position:absolute;inset:0;width:100%;height:100%}
.wire line{stroke:var(--hair);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 4}
.node{position:absolute;transform:translate(-50%,-50%);font-size:clamp(9px,.9vw,12px);letter-spacing:.14em;text-transform:uppercase;padding:9px 12px;border:1px solid var(--hair);background:#000;white-space:nowrap}
.node small{display:block;color:var(--dim);letter-spacing:.04em;text-transform:none;margin-top:3px;font-size:.95em}
.tgt-label{position:absolute;left:50%;top:calc(50% - 4.17% - 22px);transform:translateX(-50%);font-size:clamp(9px,.85vw,11px);letter-spacing:.18em;white-space:nowrap}
.pulse{position:absolute;inset:0;border:1px dashed #fff;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

.row{position:absolute;left:0;right:0;height:5.2%;transform:translateY(-50%);display:flex;align-items:center}
.row .lbl{position:absolute;left:calc(50% + 18.5%);font-size:clamp(9px,.85vw,12px);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--dim)}
.row .val{position:absolute;left:calc(50% + 18.5% + 120px);font-size:clamp(9px,.85vw,12px);white-space:nowrap}
.row .bar{position:absolute;left:50%;height:62%;transform:translateX(-50%);background:#fff}
.row.gap .lbl,.row.gap .val{color:#fff}
.row.gap .val::before{content:"← "}
.row.ghost .bar{background:transparent;border:1px solid var(--hair)}

.q{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);width:88vw;font-family:var(--disp);font-size:clamp(34px,5.2vw,88px);line-height:1.02;text-align:center}
.caret{position:absolute;left:50%;top:50%;width:2px;height:46%;background:#fff;transform:translate(-50%,-50%);animation:blink 1s steps(1) infinite}
.under{position:absolute;left:50%;top:62%;transform:translateX(-50%);white-space:nowrap}

#leak{position:absolute;inset:0;width:100%;height:100%}

.proof{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);text-align:center;width:92vw}
.proof h2{font-family:var(--disp);font-weight:400;font-size:clamp(40px,7.2vw,118px);line-height:.98;margin-top:22px}
.zstats{position:absolute;left:var(--gut);right:var(--gut);bottom:9vh;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid var(--faint);padding-top:18px}
.zstats b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(24px,2.8vw,42px);margin-bottom:6px}
.zstats span{font-size:13px;color:var(--dim);line-height:1.45;display:block;max-width:30ch}

.hud{position:absolute;z-index:5;font-size:11px;letter-spacing:.16em;text-transform:uppercase;pointer-events:none}
.brand{left:var(--gut);top:5vh;font-family:var(--disp);font-size:18px;letter-spacing:.14em;text-transform:none;text-decoration:none;pointer-events:auto}
.nav{right:var(--gut);top:5vh;display:flex;gap:26px;pointer-events:auto}
.nav a{text-decoration:none;color:var(--dim)}
.nav a:hover{color:#fff}
.depth{right:var(--gut);bottom:5vh;text-align:right;color:var(--dim)}
.depth b{display:block;font-family:var(--disp);font-size:26px;letter-spacing:0;font-weight:400;color:#fff;margin-top:4px}
.legend{right:var(--gut);top:50%;transform:translateY(-50%);list-style:none;text-align:right}
.legend li{padding:6px 0;color:var(--faint);transition:color .3s}
.legend li.on{color:#fff}
.legend li.on::after{content:" ●"}
.hint{left:50%;bottom:4vh;transform:translateX(-50%);color:var(--dim);transition:opacity .4s;white-space:nowrap}
.grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

@media (max-width:760px){
  .legend,.call,.nav{display:none}
  .headline{max-width:88vw}
  .zstats{grid-template-columns:1fr;gap:12px;bottom:6vh}
  .zstats span{display:none}
  .proof{top:34%}
  .row .lbl{left:auto;right:calc(50% + 22%)}
  .row .val{display:none}
  .row.gap .val{display:block;left:calc(50% + 10%)}
  .depth{display:none}
}

/* first screen: Arthur says hi before the zoom starts */
.intro{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut);background:radial-gradient(ellipse at 30% 50%,rgba(0,0,0,.92) 0%,rgba(0,0,0,.75) 45%,rgba(0,0,0,0) 80%)}
.intro-hi{font-family:var(--disp);font-weight:400;font-size:clamp(48px,9vw,150px);line-height:.95;min-height:1em}
.intro-hi .cur{display:inline-block;width:.06em;height:.8em;background:#fff;margin-left:.08em;vertical-align:-.05em;animation:blink 1s steps(1) infinite}
.intro-ask{font-family:var(--disp);font-size:clamp(24px,3.4vw,52px);line-height:1.1;color:var(--dim);margin-top:2vh;min-height:1.1em;max-width:16em}
.intro-go{margin-top:5vh;align-self:flex-start;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s,background .2s,color .2s;color:#fff}
.intro-go.on{opacity:1;transform:none}
.intro-go:hover{background:#fff;color:#000}
#dots.breathe{animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.05)}}