/* HYPER RED — restrained timing-screen motion, no external runtime. */
.site-header { isolation: isolate; }
.site-header .scroll-lap {
  position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px;
  background: var(--red); transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center; pointer-events: none;
}
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .24rem;
  height: 2px; background: var(--red); transform: scaleX(0);
  transform-origin: left; transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }

/* The red timing line precedes each section, then the title settles in. */
.band-head { position: relative; padding-top: .8rem; }
.band-head::before {
  content: ""; position: absolute; top: 0; left: 0; width: min(7.5rem, 25%);
  height: 3px; background: var(--red); transform-origin: left;
}
.motion-ready .motion-reveal:not(.motion-visible) {
  opacity: 0; transform: translateY(20px);
}
.motion-ready .motion-reveal {
  transition: opacity .58s ease, transform .58s cubic-bezier(.16,1,.3,1);
}
.motion-ready .band-head.motion-reveal::before { transform: scaleX(0); }
.motion-ready .band-head.motion-visible::before {
  transform: scaleX(1); transition: transform .65s cubic-bezier(.16,1,.3,1) .08s;
}

/* Interactive details borrow the precision of a race timing display. */
.hero-actions .btn, .form #submitBtn, .rc .btn {
  position: relative; overflow: hidden; isolation: isolate;
}
.hero-actions .btn::after, .form #submitBtn::after, .rc .btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 37%, rgb(255 255 255 / .19) 50%, transparent 63%);
  transform: translateX(-130%); transition: transform .65s cubic-bezier(.2,.8,.2,1);
}
.hero-actions .btn:hover::after, .form #submitBtn:hover::after, .rc .btn:hover::after { transform: translateX(130%); }
.race { transition: background-color .24s ease, box-shadow .24s ease; }
.race:hover { background-color: color-mix(in srgb, var(--red) 5%, var(--bg-alt)); }
.race[data-state="next"]:hover { box-shadow: inset 4px 0 0 var(--red), inset 0 0 0 1px color-mix(in srgb, var(--red) 25%, transparent); }
.race .race-name { transition: transform .32s cubic-bezier(.16,1,.3,1); }
.race:hover .race-name { transform: translateX(.28rem); }
.stage .trk-stage { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.stage:hover .trk-stage { transform: scale(1.035); }

@media (prefers-reduced-motion: reduce) {
  .motion-ready .motion-reveal:not(.motion-visible) { opacity: 1; transform: none; }
  .motion-ready .band-head.motion-reveal::before { transform: none; }
  .hero-actions .btn::after, .form #submitBtn::after, .rc .btn::after { display: none; }
  .race:hover .race-name, .stage:hover .trk-stage { transform: none; }
}