/* Hero scrub: engineering CSS from scrub-pipeline.md. Palette tokens come from base.css. */
#hero{position:relative;height:500vh}
#hero .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--canvas)}
#hero .poster,#hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
#hero video{opacity:0;transition:opacity .6s ease;transform:translateZ(0);will-change:transform}
#hero .stage.video-ready video{opacity:1}
#hero .stage.video-failed video{display:none}
/* 1. global base scrim, always on */
#hero .scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(20,14,10,0) 35%,rgba(20,14,10,.55) 100%)}
/* bands */
#hero .band{position:absolute;inset:0;display:grid;align-content:center;padding:0 var(--gutter);opacity:0;pointer-events:none;--k:0}
#hero .band .inner{position:relative;max-width:1180px;margin:0 auto;width:100%}
#hero .band h1,#hero .band h2,#hero .band p{text-shadow:var(--tshadow)}
#hero .band .btn{text-shadow:none}
/* 2. per-band scrim rides --k; dies out by 76% so corners stay live */
#hero .band::before{content:"";position:absolute;inset:-4%;pointer-events:none;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(ellipse 74% 62% at var(--sx,32%) 50%,rgba(20,14,10,var(--sa,.6)) 0%,rgba(20,14,10,calc(var(--sa,.6)*.66)) 46%,rgba(20,14,10,0) 76%)}
/* 3. text shadow token */
:root{--tshadow:0 1px 2px rgba(20,14,10,.9),0 3px 12px rgba(20,14,10,.6),0 10px 44px rgba(20,14,10,.55)}
/* 4. chip for small text over footage */
.chip{display:inline-flex;align-items:center;gap:8px;background:rgba(30,22,16,.5);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;text-shadow:0 1px 3px rgba(20,14,10,.7);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
/* loading ring */
#hero .ring{position:absolute;right:28px;bottom:28px;width:36px;height:36px;color:#fff;opacity:.85;transition:opacity .4s;z-index:3}
#hero .ring circle{transition:stroke-dashoffset .15s linear;transform:rotate(-90deg);transform-origin:50% 50%}
#hero .stage.video-ready .ring,#hero .ring.is-hidden{opacity:0}
/* scroll cue */
#hero .cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);color:#fff;opacity:.8;font-size:12px;letter-spacing:.12em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:3}
#hero .cue i{display:block;width:1px;height:34px;background:linear-gradient(#fff,transparent);animation:cue 2.4s ease-in-out -1.2s infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}
/* text choreography: word-by-word rise into a staged settle (entrance e), drift-down (f), scatter (a) */
.band .w{display:inline-block;--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*22px))}
.band[data-entrance="drift"] .w{transform:translateY(calc((1 - var(--kc))*-24px))}
.band[data-entrance="scatter"] .c{display:inline-block;--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
.band .sub{--ks:clamp(0,(var(--k,0) - .62)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px))}
.band .cta-row{--kb:clamp(0,(var(--k,0) - .76)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}
/* masked text breathing room for descenders */
.mask{display:inline-block;overflow:hidden;padding:.06em .02em .12em;margin:-.06em -.02em -.12em}
/* short desktop windows: hide overlays that have no room */
@media (max-height:560px){#hero .cue,#hero .ring{display:none}}
#hero .static{display:none;position:relative;z-index:2;min-height:100svh;align-content:end;padding:120px var(--gutter) 40px;color:#fff}
#hero .static h1,#hero .static p{text-shadow:var(--tshadow)}
/* the five static-hero gates: identical strings live in hero-scrub.js */
@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}
  #hero .stage{position:relative;height:auto;min-height:100svh}
  #hero video,#hero .ring,#hero .cue,#hero .band{display:none}
  #hero .poster{position:absolute;background-image:var(--poster-static)}
  #hero .static{display:grid}
}