/* ---------- hero ---------- */
.hero{position:relative;height:360vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#05080E}
.poster,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
.stage video{opacity:0;transition:opacity .8s var(--ease-out);will-change:transform;transform:translateZ(0)}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}
#heroFrames{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s var(--ease-out);pointer-events:none}
.stage.frames #heroFrames{opacity:1}
.stage.frames video{display:none}
.stage.frames .ring{opacity:0}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(8,12,20,0) 38%,rgba(8,12,20,.62) 100%)}
.ring{position:absolute;right:calc(var(--gutter) + 4px);bottom:32px;width:40px;height:40px;color:var(--accent);opacity:.9;transition:opacity .6s var(--ease-out)}
.stage.video-ready .ring{opacity:0}
.cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-secondary);transition:opacity .5s var(--ease-out)}
.cue span{width:1px;height:34px;background:linear-gradient(var(--accent),transparent);animation:cue 2.4s var(--ease-io) infinite;animation-delay:-.6s;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* depth gauge: the signature element */
.gauge{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);height:46vh;display:flex;gap:12px;align-items:stretch;color:var(--text-secondary);pointer-events:none}
.gauge .track{position:relative;width:1px;background:linear-gradient(transparent,var(--line-strong) 10%,var(--line-strong) 90%,transparent)}
.gauge .tick{position:absolute;left:-6px;top:0;width:13px;height:2px;background:var(--accent);box-shadow:0 0 12px rgba(201,161,91,.7);will-change:transform}
.gauge ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em}
.gauge li{transition:color .4s var(--ease-out),opacity .4s var(--ease-out);opacity:.5}
.gauge li.on{color:var(--accent);opacity:1}
.gauge .read{position:absolute;right:0;bottom:-34px;white-space:nowrap;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--text-primary)}
@media (max-height:560px){.gauge,.cue{display:none}}

/* caption bands */
.band{position:absolute;top:50%;transform:translateY(-50%);width:min(560px,40vw);opacity:0;text-shadow:var(--tshadow);pointer-events:none;isolation:isolate;--k:0}
.band.on{pointer-events:auto}
.band.left{left:var(--gutter)}
.band.right{right:calc(var(--gutter) + 120px)}
.band.top{top:12vh;transform:none;left:50%;width:min(760px,58vw);margin-left:max(-380px,-29vw);text-align:center}
.band.top h2{font-size:clamp(30px,3.5vw,54px)}
.band::before{content:"";position:absolute;inset:-30% -24%;z-index:-1;pointer-events:none;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(ellipse 70% 66% at 50% 50%,rgba(5,8,14,var(--sa,.8)) 0%,rgba(5,8,14,calc(var(--sa,.8)*.88)) 52%,rgba(5,8,14,0) 84%)}
.band .kick{display:block;margin-bottom:18px;color:var(--accent)}
.band h1,.band h2{font-size:clamp(34px,4.6vw,68px)}
.band.right{width:min(470px,31vw)}
.band.right::before{inset:-30% -34% -30% -24%;background:radial-gradient(ellipse 72% 68% at 54% 50%,rgba(5,8,14,var(--sa,.8)) 0%,rgba(5,8,14,calc(var(--sa,.8)*.9)) 56%,rgba(5,8,14,0) 86%)}
.band.right h2{font-size:clamp(32px,3.8vw,58px)}
.band .sub{margin-top:18px;font-size:clamp(17px,1.4vw,21px);color:var(--text-primary);max-width:34ch}
.band.top .sub{margin-left:auto;margin-right:auto}
.band .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.band.settle{width:min(400px,27vw);top:auto;bottom:11vh;transform:none}
.band.settle h2{font-size:clamp(30px,3vw,46px)}
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block}

/* (b) grid snap-align: rings aligning */
.fx-snap .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
/* (c) blur-to-sharp: haze between layers */
.fx-blur .stack{display:grid}
.fx-blur .stack>*{grid-area:1/1}
.fx-blur .soft{filter:blur(10px);opacity:calc(1 - var(--k,0))}
.fx-blur .sharp{opacity:var(--k,0)}
.fx-blur .sub{opacity:clamp(0,(var(--k,0) - .4)*2.5,1)}
/* (g) approach-from-depth: diving into the core */
.fx-depth .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.4,1);opacity:var(--kc);transform:scale(calc(.82 + .18*var(--kc)))}
.fx-depth .sub{opacity:clamp(0,(var(--k,0) - .55)*3,1)}
/* (new) node-light: characters light in order like lattice nodes, warm then settle */
.fx-node .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*5,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*6px))}
.fx-node .sub{opacity:clamp(0,(var(--k,0) - .6)*3,1)}
/* (e) word rise into a staged settle: arriving at the fort */
.fx-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*.45em))}
.fx-rise .sub{opacity:clamp(0,(var(--k,0) - .62)*4,1);transform:translateY(calc((1 - clamp(0,(var(--k,0) - .62)*4,1))*10px))}
.fx-rise .ctas{opacity:clamp(0,(var(--k,0) - .76)*5,1)}

/* static hero (phones, portrait tablets, coarse portrait, landscape phones, reduced motion) */
.static-hero{display:none}
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{position:relative;height:auto;min-height:100svh;background:#070C16}
  .scrub-only{display:none!important}
  .static-hero{display:flex;flex-direction:column;justify-content:flex-start;min-height:100svh;padding:110px var(--gutter) 56px;position:relative;isolation:isolate;text-shadow:var(--tshadow)}
  .static-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(62%,70vw);z-index:-2;background:url('assets/hero-ending.jpg') center 50%/cover no-repeat;-webkit-mask-image:linear-gradient(transparent,#000 32%);mask-image:linear-gradient(transparent,#000 32%)}
  .static-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,12,22,.5) 0%,rgba(7,12,22,0) 30%,rgba(7,12,22,0) 80%,rgba(7,12,22,.6) 100%)}
}
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce) and (orientation: landscape){
  .static-hero::after{height:100%;left:38%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
  .stage .static-hero>*{max-width:min(48%,560px)}
}
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px){
  .stage .static-hero{padding-top:84px;padding-bottom:32px}
  .stage .static-hero h1{font-size:clamp(28px,9vh,40px)}
  .stage .static-hero .sub{font-size:16px;margin-top:10px}
  .stage .static-hero .ctas{margin-top:18px}
}
.static-hero .kick{color:var(--accent)}
.static-hero h1{font-size:clamp(38px,9vw,64px);margin-top:14px;max-width:12ch}
.static-hero .sub{margin-top:16px;font-size:18px;max-width:30ch}
.static-hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}