/* THE STRIKE — a single clean horizontal arrival. No noise, flashes or glitches. */
.hero{position:relative;isolation:isolate;overflow:hidden;background:#0b0b0b;min-height:660px;height:100svh;max-height:1250px}
.hero-meta{position:absolute;top:calc(var(--header-height) + 40px);left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;gap:20px;color:#878781;font:10px/1.5 var(--mono);letter-spacing:.06em}
.hero-inner{position:absolute;inset:var(--header-height) 0 0;display:grid;place-items:center;pointer-events:none}
.motion-scene{position:relative;width:min(89vw,1400px);display:grid;place-items:center;transform:translateY(-1.8vh)}
.motion-window{display:grid;place-items:center;width:100%}
.motion-word{font:normal clamp(78px,17.5vw,305px)/1 var(--display);white-space:nowrap;letter-spacing:-.018em;margin:0;will-change:transform}
.motion-tick{position:absolute;top:50%;left:50%;width:30px;height:2px;background:var(--paper);opacity:0;transform:translate(-50%,-50%)}
.motion-strike{position:absolute;left:0;right:0;bottom:-.27em;height:1px;background:#9b9b97}
.hero-tagline{position:absolute;top:calc(100% + 22px);left:0;right:0;margin:0;text-align:center;font:11px var(--mono);letter-spacing:.12em;color:#b7b7b1}
.hero-bottom{position:absolute;bottom:0;left:var(--gutter);right:var(--gutter);min-height:94px;border-top:1px solid #4e4e4c;display:flex;align-items:center;justify-content:space-between;gap:20px;font:10px var(--mono);letter-spacing:.03em;color:#acaca6}
.hero-bottom>a,.replay-button{white-space:nowrap}
.hero-bottom>a span,.replay-button span{margin-left:10px;font-size:16px}
.replay-button{background:none;border:0;color:#e0e0db;padding:12px}
.replay-button:hover,.hero-bottom>a:hover{color:#777}
.hero.intro-loading .motion-word,.hero.intro-loading .motion-strike,.hero.intro-loading .hero-tagline{opacity:0}
.hero.intro-running .motion-tick{animation:tick-cue 330ms linear both}
.hero.intro-running .motion-word{animation:strike-arrival 1250ms linear both}
.hero.intro-running .motion-strike{animation:rule-lock 650ms 820ms cubic-bezier(.19,1,.22,1) both}
.hero.intro-running .hero-tagline{animation:caption-settle 550ms 1290ms cubic-bezier(.18,.78,.24,1) both}
@keyframes tick-cue{0%{opacity:0;transform:translate(-50%,-50%) scaleX(.05)}18%,62%{opacity:1;transform:translate(-50%,-50%) scaleX(1)}100%{opacity:0;transform:translate(-50%,-50%) scaleX(.2)}}
@keyframes strike-arrival{
  0%,18%{transform:translate3d(118vw,0,0) skewX(-12deg) scaleX(1.17);letter-spacing:.025em}
  36%{transform:translate3d(18vw,0,0) skewX(-8deg) scaleX(1.1);letter-spacing:.01em}
  53%{transform:translate3d(-2.3vw,0,0) skewX(-1deg) scaleX(.985);letter-spacing:-.028em}
  67%{transform:translate3d(.6vw,0,0) skewX(0) scaleX(1.008);letter-spacing:-.018em}
  82%,100%{transform:translate3d(0,0,0) skewX(0) scaleX(1);letter-spacing:-.018em}
}
@keyframes rule-lock{0%{transform:scaleX(0);opacity:0}10%{opacity:1}100%{transform:scaleX(1);opacity:1}}
@keyframes caption-settle{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:650px){
  .hero{height:100svh;min-height:590px}
  .hero-meta{top:calc(var(--header-height) + 30px);font-size:8px}
  .hero-meta span:last-child{max-width:110px;text-align:right}
  .motion-scene{width:89vw;transform:translateY(-5vh)}
  .motion-word{font-size:18vw}
  .motion-strike{bottom:-.45em}
  .hero-tagline{font-size:9px;top:calc(100% + 23px)}
  .hero-bottom{min-height:80px;font-size:9px}
  .hero-bottom>span{display:none}
  .replay-button{padding:12px 0}
}
@media(prefers-reduced-motion:reduce){.hero.intro-running .motion-tick,.hero.intro-running .motion-word,.hero.intro-running .motion-strike,.hero.intro-running .hero-tagline{animation:none}}