.hero-video,
.reveal,
.race-route {
  will-change: transform, opacity;
}

.motion-on .hero-video {
  transform: scale(1.04);
}

.motion-on.hero-ready .hero-video {
  transform: scale(1);
  transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-on .hero-content {
  opacity: 0;
  transform: translateY(1.25rem);
}

.motion-on.hero-ready .hero-content {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 780ms ease, transform 780ms cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-on .reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 780ms ease, transform 780ms cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-on .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.motion-on .sponsor-track {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  animation: marquee 28s linear infinite;
}

.motion-on .marquee-row--supporting .sponsor-track {
  animation-direction: reverse;
  animation-duration: 20s;
}

.motion-on .marquee-row:hover .sponsor-track {
  animation-play-state: paused;
}

.motion-on .button:hover::after {
  transform: translateX(0.18rem);
}

.motion-on.route-finished .route-confetti span {
  animation: confetti-burst 800ms cubic-bezier(0.18, 0.82, 0.22, 1) 5 both;
}

.motion-on.route-finished.logo-runner-active .route-runner img {
  animation: finish-logo-dance 800ms ease-in-out 5 both;
}

.motion-on.route-finished .route-label--finish::after {
  opacity: 0;
  transform: scale(0.25) rotate(12deg);
}

.motion-on.route-finished .route-confetti span:nth-child(1) { transform: translate(0, 0) rotate(0deg); animation-delay: 0ms; }
.motion-on.route-finished .route-confetti span:nth-child(2) { transform: translate(0, 0) rotate(20deg); animation-delay: 45ms; }
.motion-on.route-finished .route-confetti span:nth-child(3) { transform: translate(0, 0) rotate(-18deg); animation-delay: 70ms; }
.motion-on.route-finished .route-confetti span:nth-child(4) { transform: translate(0, 0) rotate(34deg); animation-delay: 90ms; }
.motion-on.route-finished .route-confetti span:nth-child(5) { transform: translate(0, 0) rotate(-28deg); animation-delay: 115ms; }
.motion-on.route-finished .route-confetti span:nth-child(6) { transform: translate(0, 0) rotate(12deg); animation-delay: 135ms; }

.button::after {
  transition: transform 180ms ease;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.motion-on.route-finished .route-confetti span:nth-child(1) { --x: -2.1rem; --y: -1.65rem; }
.motion-on.route-finished .route-confetti span:nth-child(2) { --x: -1.25rem; --y: -2.25rem; }
.motion-on.route-finished .route-confetti span:nth-child(3) { --x: -0.2rem; --y: -2.05rem; }
.motion-on.route-finished .route-confetti span:nth-child(4) { --x: 0.35rem; --y: -1.45rem; }
.motion-on.route-finished .route-confetti span:nth-child(5) { --x: -1.7rem; --y: -0.85rem; }
.motion-on.route-finished .route-confetti span:nth-child(6) { --x: -0.65rem; --y: -1rem; }

@keyframes confetti-burst {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg) scale(0.8);
  }

  14% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(130deg) scale(1);
  }
}

@keyframes finish-logo-dance {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }

  20% {
    transform: translate(-50%, calc(-50% - 4px)) rotate(-6deg) scale(1.06);
  }

  42% {
    transform: translate(-50%, calc(-50% + 2px)) rotate(5deg) scale(0.98);
  }

  64% {
    transform: translate(-50%, calc(-50% - 3px)) rotate(-3deg) scale(1.04);
  }

  82% {
    transform: translate(-50%, -50%) rotate(2deg) scale(1);
  }

  100% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
}

@keyframes back-top-bounce {
  0% {
    transform: translateY(0);
  }

  28% {
    transform: translateY(-5px);
  }

  52% {
    transform: translateY(1px);
  }

  76% {
    transform: translateY(-2px);
  }

  100% {
    transform: translateY(0);
  }
}

body.reduced-motion .sponsor-track {
  animation: none;
}