/* Holo Punk hero: dark full-bleed cinematic hero. Palette is graphite/chrome; no glow, no gradient text. */
.hero{--ink:#0a0b0d;--paper:#f2f3f5;position:relative;width:100%;height:100vh;height:100svh;min-height:560px;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero__poster,.hero__stage,.hero__layer,.hero__layer>video,.hero__layer>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero__poster{object-fit:cover;object-position:62% 50%;z-index:0}
.hero__stage{z-index:1}
.hero__layer{visibility:hidden;will-change:clip-path}
.hero__layer>video,.hero__layer>canvas{object-fit:cover;object-position:62% 50%}
.hero--static .hero__stage{display:none}
.hero__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to top,rgba(8,9,11,.88) 0%,rgba(8,9,11,.62) 34%,rgba(8,9,11,.12) 66%,rgba(8,9,11,0) 100%),
    linear-gradient(to right,rgba(8,9,11,.72) 0%,rgba(8,9,11,.38) 42%,rgba(8,9,11,0) 78%)}
.hero__copy{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:0 clamp(16px,4vw,56px) clamp(72px,11vh,120px)}
.hero__headline{margin:0;font-family:"Bricolage Grotesque","Arial Narrow",Impact,sans-serif;font-weight:700;font-stretch:75%;
  font-size:clamp(4rem,11.5vw,10.5rem);line-height:.9;letter-spacing:-.02em;color:#fff;max-width:11ch;text-wrap:balance}
.hero.is-glitch .hero__headline{text-shadow:-3px 0 rgba(150,205,225,.65),3px 0 rgba(225,150,195,.65)}
.hero__controls{position:absolute;z-index:4;left:clamp(16px,4vw,56px);right:clamp(16px,4vw,56px);bottom:clamp(16px,3vh,32px);display:flex;align-items:center;gap:16px}
.hero__toggle{appearance:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 14px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(10,11,13,.72);color:#fff;font:600 .9rem/1 "Schibsted Grotesk",system-ui,sans-serif;cursor:pointer}
.hero__toggle:hover{background:#fff;color:#0a0b0d}
.hero__toggle:focus-visible{outline:3px solid #fff;outline-offset:3px}
.hero__icon{width:14px;height:14px;position:relative;flex:none}
.hero__toggle[data-state="playing"] .hero__icon::before,.hero__toggle[data-state="playing"] .hero__icon::after{content:"";position:absolute;top:1px;bottom:1px;width:4px;background:currentColor}
.hero__toggle[data-state="playing"] .hero__icon::before{left:1px}.hero__toggle[data-state="playing"] .hero__icon::after{right:1px}
.hero__toggle[data-state="paused"] .hero__icon::before{content:"";position:absolute;left:2px;top:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
.hero__ticks{display:flex;gap:6px;flex:1;max-width:240px}
.hero__tick{--f:0;flex:1;height:2px;background:rgba(255,255,255,.28);position:relative}
.hero__tick::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(var(--f))}
.hero--static .hero__tick::after{transform:scaleX(0)}
@media (prefers-reduced-motion:reduce){.hero__layer{transition:none}.hero.is-glitch .hero__headline{text-shadow:none}}