.scroll-intro {
  --acid:#dcff43;
  --coral:#ff5a57;
  --cobalt:#3f4cff;
  --display:"Anybody","Arial Narrow",sans-serif;
  height:240vh;
}
.video-stage { position:sticky; top:0; height:100svh; min-height:560px; overflow:hidden; background:#f4f4f2; contain:paint style; }
.intro-canvas { width:100%; height:100%; display:block; background:#f4f4f2; }
.video-stage::after { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.16),transparent 24%,transparent 72%,rgba(0,0,0,.2)); pointer-events:none; }
.spectrum-copy { position:absolute; z-index:3; left:5.2vw; bottom:6.5vh; color:#fff; mix-blend-mode:difference; pointer-events:none; }
.spectrum-copy h1 { max-width:7ch; margin:0; font-family:var(--display); font-size:clamp(54px,7.2vw,96px); font-stretch:125%; font-weight:650; line-height:.82; letter-spacing:-.035em; text-wrap:balance; }
.spectrum-copy p { max-width:29ch; margin:18px 0 0; font-size:10px; line-height:1.5; letter-spacing:.11em; text-transform:uppercase; }
.intro-header { position:absolute; z-index:4; top:0; left:0; width:100%; height:78px; padding:0 5.2vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; color:#fff; mix-blend-mode:difference; }
.intro-brand { display:inline-flex; align-items:center; gap:10px; padding:0 28px; font-family:var(--display); font-size:17px; font-stretch:120%; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.intro-brand::before { content:""; width:38px; height:16px; flex:0 0 auto; background:currentColor; -webkit-mask:url("paralaks-mark.svg") center/contain no-repeat; mask:url("paralaks-mark.svg") center/contain no-repeat; }
.scroll-cue { left:auto; right:5.2vw; bottom:30px; transform:none; }
.arrow svg { width:18px; height:18px; display:block; }

@media (max-width:700px) {
  .scroll-intro { height:75vw; }
  .video-stage { position:relative; height:75vw; min-height:0; }
  .spectrum-copy { bottom:7vw; }
  .spectrum-copy h1 { font-size:clamp(34px,8.5vw,58px); }
  .spectrum-copy p { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .scroll-intro { height:100svh; }
}

@media (max-width:700px) and (prefers-reduced-motion:reduce) {
  .scroll-intro { height:75vw; }
}