/*  LAW KEY — hero styles: pinned hero + sticky stage, legibility layers,
    text choreography, static-hero gates, reduced motion.
    Standard: 10k-websites/references/scrub-pipeline.md
*/
:root{
  --hero-vh:1000;                                   /* scroll distance of the hero, in vh */
  --canvas:#0b0907;
  --panel:#15110c;
  --accent:#d9ae5c;
  --accent-hover:#f0ce8e;
  --accent-muted:rgba(217,174,92,.18);
  --text-primary:#f1e8d4;
  --text-secondary:#a89a7c;
  --font-display:'Amiri',Georgia,'Times New Roman',serif;
  --font-body:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
}
html,body{overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--canvas);color:var(--text-primary);font-family:var(--font-body)}
html.js body{opacity:0}
html.js.ready body{opacity:1;transition:opacity .7s var(--ease-out)}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- hero: pinned tall section + sticky stage ---------------------------- */
.hero{position:relative;height:calc(var(--hero-vh) * 1vh);background:var(--canvas)}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas)}
.stage>.poster{position:absolute;inset:0;background:var(--canvas) center/cover no-repeat}
.stage>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease-out);will-change:transform;transform:translateZ(0)}
.stage.video-ready>video{opacity:1}
.stage.video-failed>video{display:none}

/* 1. global base scrim: no frame is ever raw behind the page */
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%)}

/* loading ring (--ld written by JS; 126 = circumference of r=20) */
.ring{position:absolute;left:50%;bottom:28px;width:44px;height:44px;margin-left:-22px;color:var(--accent);transform:rotate(-90deg);opacity:0;transition:opacity .5s var(--ease-out);pointer-events:none}
.ring .track{opacity:.18}
.stage.loading .ring{opacity:1}
.stage.video-ready .ring{opacity:0}

/* scroll chevron: the honest cue when the video never arrives */
.cue{position:absolute;left:50%;bottom:26px;width:32px;height:32px;margin-left:-16px;color:var(--accent);opacity:.85;pointer-events:none;animation:cue-bob 2.6s var(--ease-inout) -1.2s infinite}
@keyframes cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media (max-height:560px){.cue,.ring{display:none}}

/* ---- caption bands ------------------------------------------------------- */
.bands{position:absolute;inset:0;pointer-events:none}
.band{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:clamp(24px,7vh,80px) clamp(20px,7vw,110px);opacity:0;color:var(--text-primary);text-shadow:var(--tshadow);text-align:center;pointer-events:none;--sx:50%;--sy:50%;--scrim:.66}
/* 2. per-band scrim: rides the band's opacity, deepens with --k, dies out by 76% so the corners stay live */
.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) var(--sy),rgba(5,5,10,var(--scrim)) 0%,rgba(5,5,10,calc(var(--scrim)*.667)) 46%,rgba(5,5,10,0) 76%)}
.band.empty::before{content:none}
.band>.inner{position:relative;z-index:1;max-width:min(92vw,1100px)}
.band.at-top{align-items:flex-start;padding-top:clamp(56px,12vh,150px);--sy:34%}
.band.at-bottom{align-items:flex-end;padding-bottom:clamp(56px,12vh,150px);--sy:66%}
.band.at-l{justify-content:flex-start;text-align:start;--sx:28%}
.band.at-r{justify-content:flex-end;text-align:end;--sx:72%}
/* two-sided variant: text columns flank a centered subject; the center lane stays bright */
.band.side-l::before{background:radial-gradient(ellipse 36% 60% at 24% 50%,rgba(5,5,10,var(--scrim)) 0%,rgba(5,5,10,calc(var(--scrim)*.667)) 46%,rgba(5,5,10,0) 76%)}
.band.side-r::before{background:radial-gradient(ellipse 36% 60% at 76% 50%,rgba(5,5,10,var(--scrim)) 0%,rgba(5,5,10,calc(var(--scrim)*.667)) 46%,rgba(5,5,10,0) 76%)}
.band.side-l.side-r::before{background:radial-gradient(ellipse 36% 60% at 24% 50%,rgba(5,5,10,var(--scrim)) 0%,rgba(5,5,10,calc(var(--scrim)*.667)) 46%,rgba(5,5,10,0) 76%)}
.band.side-l.side-r::after{content:"";position:absolute;inset:-4%;pointer-events:none;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(ellipse 36% 60% at 76% 50%,rgba(5,5,10,var(--scrim)) 0%,rgba(5,5,10,calc(var(--scrim)*.667)) 46%,rgba(5,5,10,0) 76%)}
.band .cols{display:grid;grid-template-columns:1fr 1fr;gap:min(30vw,420px);width:100%;align-items:baseline}
/* the settle band, where the columns converge: one upper-centered ellipse */
.band.settle::before{background:radial-gradient(ellipse 74% 56% at 50% 38%,rgba(5,5,10,var(--scrim)) 0%,rgba(5,5,10,calc(var(--scrim)*.667)) 46%,rgba(5,5,10,0) 76%)}

/* band typography (ch caps live on the text element itself) */
.band h1,.band h2,.band .hl,.band .line,.band .sub{text-wrap:balance}   /* no orphaned last word on a wrapped line */
.band h1,.band h2,.band .hl{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,5.4vw,80px);line-height:1.3;margin:0 auto;max-width:22ch}
.band .line{font-family:var(--font-body);font-weight:500;font-size:clamp(22px,2.6vw,40px);line-height:1.6;margin:0 auto;max-width:30ch}
.band .brand{font-family:var(--font-mono);font-weight:500;font-size:clamp(26px,3.2vw,48px);letter-spacing:.34em;text-indent:.34em;line-height:1.2;margin:0 auto;max-width:none;text-transform:uppercase}
.band .sub{font-family:var(--font-body);font-weight:400;font-size:clamp(18px,1.9vw,28px);line-height:1.6;margin:.5em auto 0;max-width:36ch}
.band .cta{margin:1.4em 0 0}
.band .btn{text-shadow:none}
.band:not(.on) .btn{visibility:hidden}
.band .btn{pointer-events:auto}

/* 4. chip scrim for small text over footage */
.chip{display:inline-block;padding:.35em .8em;font-family:var(--font-mono);font-size:13px;color:var(--text-primary);background:rgba(8,8,15,.55);border:1px solid rgba(96,96,126,.3);border-radius:10px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(5,5,10,.85)}

/* buttons */
.btn{display:inline-block;font-family:var(--font-body);font-weight:500;font-size:17px;line-height:1;padding:15px 32px;border-radius:999px;background:var(--accent);color:#1a1307;text-decoration:none;text-shadow:none;transition:background .3s var(--ease-out),transform .3s var(--ease-out)}
.btn:hover{background:var(--accent-hover);transform:translateY(-1px)}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ---- text choreography (transform + opacity only, scrubbed off --k) ------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.w,.c,.half{display:inline-block}
.run{unicode-bidi:isolate}
/* (f) drift-down: echoes a fall or a pour */
.fx-f .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-24px))}
/* (d) word-punch with overshoot: echoes an impact landing */
.fx-d .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);--ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);opacity:var(--kc);transform:scale(calc(0.6 + (0.4 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
.fx-d .w.em{--ov:0.24;--sd:0.16;--ss:2.6;color:var(--accent)}
/* (h) halves parting: echoes folds opening, curtains parting */
.fx-h .half{--kc:clamp(0,var(--k,0)*1.15,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
/* (a) scatter: per-cluster fly-in from seeded offsets; echoes particles assembling */
.fx-a .c{--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)))}
/* (e) staged rise: words rise in order, then the subline, then the CTA row */
.fx-e .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*18px))}
.fx-e .sub{--ks:clamp(0,(var(--k,0) - .66)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*10px))}
.fx-e .cta{--kb:clamp(0,(var(--k,0) - .78)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*10px))}

/* ---- the static hero (five gates, identical strings to hero.js) ---------- */
.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:100vh;min-height:100svh}
  .stage>video,.stage>.poster,.ring,.cue,.bands{display:none}
  .static-hero{position:relative;z-index:1;display:grid;place-items:center;box-sizing:border-box;min-height:100vh;min-height:100svh;padding:clamp(72px,14vh,140px) clamp(20px,6vw,64px);text-align:center;text-shadow:var(--tshadow);background:var(--canvas) var(--static-img,none) center/cover no-repeat}
  .static-hero>.inner{max-width:min(92vw,720px)}
  .static-hero .kicker{font-family:var(--font-mono);font-weight:500;font-size:13px;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:var(--accent);margin:0 0 1.2em}
  .static-hero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,8vw,60px);line-height:1.3;margin:0 auto;max-width:14ch}
  .static-hero .lede{font-family:var(--font-body);font-size:clamp(16px,2.4vw,19px);line-height:1.8;color:var(--text-primary);margin:1em auto 1.8em;max-width:38ch}
  .static-hero .btn{text-shadow:none}
}

/* ---- reduced motion: honored completely ---------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important;animation-delay:0s!important;scroll-behavior:auto!important}
  html.js body{opacity:1}
  .band{opacity:1!important;--k:1}
  .w,.c,.half,.fx-e .sub,.fx-e .cta{opacity:1!important;transform:none!important}
}
/* the live flip: pinToFinalStates() sets html.rm-pinned so every scroll-drawn state lands finished */
html.rm-pinned .band{opacity:1!important;--k:1}
html.rm-pinned .w,html.rm-pinned .c,html.rm-pinned .half,html.rm-pinned .fx-e .sub,html.rm-pinned .fx-e .cta{opacity:1!important;transform:none!important}