.intro-loader { display: none; position: fixed; inset: 0; z-index: 3000; overflow: hidden; place-items: center; background: #07162e; color: #fff; opacity: 1; transition: opacity 180ms ease; pointer-events: none; }
.intro-pending { overflow: hidden; }
.intro-pending .intro-loader { display: grid; }
.intro-loader--leaving { opacity: 0; }
.intro-track { position: absolute; left: 5vw; right: 5vw; top: 67%; height: 2px; background: linear-gradient(90deg, transparent, rgba(50,216,255,.8), transparent); transform: scaleX(0); animation: intro-track 400ms ease-out forwards; }
.intro-runner-wrap { position: absolute; top: 50%; left: 0; width: clamp(8rem, 17vw, 14rem); transform: translate3d(-120%, -62%, 0); animation: intro-sprint 1s cubic-bezier(.22,.7,.16,1) 300ms forwards; will-change: transform; }
.intro-runner { display: block; width: 100%; height: auto; filter: drop-shadow(-12px 5px 14px rgba(23,107,255,.38)); }
.runner-head, .runner-body, .runner-limb, .runner-shoe { fill: #050d1c; stroke: #32d8ff; stroke-width: 2; stroke-linejoin: round; }
.runner-arm-front, .runner-leg-back { transform-box: fill-box; transform-origin: top left; animation: limb-drive 360ms ease-in-out 3 alternate; }
.runner-arm-back, .runner-leg-front { transform-box: fill-box; transform-origin: top right; animation: limb-drive-reverse 360ms ease-in-out 3 alternate; }
.intro-spark { position: absolute; width: 1rem; height: 1rem; right: 7%; bottom: 22%; border-radius: 50%; background: #ff7a1a; box-shadow: 0 0 18px #ff7a1a; opacity: 0; animation: intro-spark 420ms ease 650ms; }
.intro-trails { position: absolute; top: 48%; left: 4%; width: 58%; transform: translateY(-50%); }
.intro-trails i { display: block; height: 3px; margin: 1.1rem 0; background: linear-gradient(90deg, transparent, #176bff, #32d8ff, transparent); transform: scaleX(0); transform-origin: left; opacity: 0; animation: intro-trail 750ms ease-out 470ms forwards; }
.intro-trails i:nth-child(2) { width: 82%; animation-delay: 560ms; }
.intro-trails i:nth-child(3) { width: 64%; animation-delay: 650ms; }
.intro-brand { position: relative; text-align: center; opacity: 0; transform: translateY(1rem); animation: intro-brand 620ms cubic-bezier(.2,.8,.2,1) 900ms forwards; }
.intro-brand img { display: block; width: clamp(12rem, 25vw, 20rem); height: auto; margin-inline: auto; filter: drop-shadow(0 1rem 2.2rem rgba(0,0,0,.42)); }
.intro-brand small { display: block; }
.intro-brand small { margin-top: 1.15rem; color: #ff9b52; font-size: clamp(.66rem, 1.5vw, .92rem); font-weight: 800; letter-spacing: .17em; }
@keyframes intro-track { to { transform: scaleX(1); } }
@keyframes intro-sprint { 55% { transform: translate3d(40vw, -62%, 0) scale(1.04); } 100% { transform: translate3d(105vw, -62%, 0) scale(.9); } }
@keyframes limb-drive { to { transform: rotate(13deg); } }
@keyframes limb-drive-reverse { to { transform: rotate(-13deg); } }
@keyframes intro-spark { 35% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0; transform: translateX(-5rem) scale(.2); } }
@keyframes intro-trail { 35% { opacity: .9; } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes intro-brand { to { opacity: 1; transform: translateY(0); } }
@media (max-width: 575.98px) {
  .intro-runner-wrap { width: 8.5rem; }
  .intro-brand { width: min(92vw, 34rem); }
  .intro-brand img { width: min(62vw, 15rem); }
  .intro-brand small { letter-spacing: .11em; }
  @keyframes intro-sprint { 55% { transform: translate3d(34vw, -62%, 0); } 100% { transform: translate3d(110vw, -62%, 0) scale(.85); } }
}
@media (prefers-reduced-motion: reduce) {
  .intro-loader *, .intro-loader *::before, .intro-loader *::after { animation: none !important; transition-duration: .01ms !important; }
  .intro-track, .intro-runner-wrap, .intro-trails { display: none; }
  .intro-brand { opacity: 1; transform: none; }
  .intro-loader { transition-duration: 120ms; }
}