/* Horse and shared keyframes, hover and reduced-motion media rules
   Load order matters: these stylesheets are ordered fragments of one cascade
   (see index.html). Mobile overrides live in responsive.css. */

@keyframes horse-card-reveal {
  0% {
    opacity: 0;
    transform: translate3d(3rem, -1rem, 0) rotateY(90deg) rotate(8deg);
  }

  65% {
    opacity: 1;
    transform: translate3d(-0.2rem, 0, 0) rotateY(0) rotate(-2deg);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0) rotate(0);
  }
}

@keyframes horse-auto-countdown {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes pixel-horse-advance {
  0% {
    left: clamp(3.25rem, var(--pixel-horse-from), calc(100% - 3.6rem));
    transform: translate(-50%, -50%);
  }

  35%,
  70% {
    transform: translate(-50%, -64%) rotate(-2deg);
  }

  100% {
    left: clamp(3.25rem, var(--pixel-horse-position), calc(100% - 3.6rem));
    transform: translate(-50%, -50%);
  }
}

@keyframes pixel-track-run {
  to {
    background-position: -3.5rem 0, 0 0;
  }
}

@keyframes pixel-lane-rush {
  to {
    transform: translateX(-3.2rem);
  }
}

@keyframes pixel-fallback-lane-flash {
  40% {
    box-shadow: inset 0 0 0 3px rgba(255, 104, 114, 0.78);
  }
}

@keyframes pixel-race-cloud-scroll {
  to {
    transform: translateX(-30%);
  }
}

@keyframes pixel-race-horizon-scroll {
  to {
    transform: translateX(-50%);
  }
}

@keyframes pixel-race-crowd-jump {
  to {
    transform: translateY(-2px);
  }
}

@keyframes pixel-crowd-wave {
  to {
    opacity: 0.9;
    transform: translateY(-2px);
  }
}

@keyframes race-light-sweep {
  to {
    background-position: calc(100% + 12rem) 0;
  }
}

@keyframes pixel-horse-run-bob {
  to {
    transform: translate(-50%, -60%) rotate(-1deg);
  }
}

@keyframes pixel-horse-gallop {
  to {
    transform: translateY(-3px) skewX(-2deg);
  }
}

@keyframes pixel-rider-bob {
  to {
    transform: translateY(3px) rotate(4deg);
  }
}

@keyframes pixel-horse-tail {
  to {
    transform: rotate(-18deg);
  }
}

@keyframes pixel-horse-leg-a {
  from {
    transform: rotate(35deg);
  }

  to {
    transform: rotate(-42deg);
  }
}

@keyframes pixel-horse-leg-b {
  from {
    transform: rotate(-42deg);
  }

  to {
    transform: rotate(35deg);
  }
}

@keyframes pixel-horse-dust {
  to {
    opacity: 0;
    transform: translate(-0.8rem, -0.2rem) scale(1.6);
  }
}

@keyframes pixel-horse-fall-dust {
  0%,
  25% {
    opacity: 0;
  }

  48% {
    opacity: 1;
    transform: translate(0.2rem, -0.15rem) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-1.6rem, -0.7rem) scale(2.6);
  }
}

@keyframes pixel-speed-lines {
  50% {
    opacity: 0.25;
    transform: translateX(-0.5rem);
  }
}

@keyframes pixel-horse-trip {
  0% {
    left: clamp(3.25rem, var(--pixel-horse-from), calc(100% - 3.6rem));
    transform: translate(-50%, -50%);
  }

  28% {
    left: clamp(3.25rem, var(--pixel-horse-position), calc(100% - 3.6rem));
    transform: translate(-50%, -68%) rotate(5deg);
  }

  48% {
    left: clamp(3.25rem, var(--pixel-horse-position), calc(100% - 3.6rem));
    transform: translate(-46%, -20%) rotate(58deg);
  }

  68% {
    left: clamp(3.25rem, var(--pixel-horse-position), calc(100% - 3.6rem));
    transform: translate(-50%, -12%) rotate(76deg);
  }

  84% {
    transform: translate(-50%, -44%) rotate(18deg);
  }

  100% {
    left: clamp(3.25rem, var(--pixel-horse-position), calc(100% - 3.6rem));
    transform: translate(-50%, -50%) rotate(0);
  }
}

@keyframes pixel-horse-advance-trip {
  0%,
  100% {
    left: clamp(3.25rem, var(--pixel-horse-position), calc(100% - 3.6rem));
    transform: translate(-50%, -50%) rotate(0);
  }

  32% {
    left: clamp(3.25rem, var(--pixel-horse-peak), calc(100% - 3.6rem));
    transform: translate(-50%, -68%) rotate(-3deg);
  }

  52% {
    left: clamp(3.25rem, var(--pixel-horse-peak), calc(100% - 3.6rem));
    transform: translate(-46%, -18%) rotate(60deg);
  }

  72% {
    left: clamp(3.25rem, var(--pixel-horse-position), calc(100% - 3.6rem));
    transform: translate(-50%, -12%) rotate(74deg);
  }

  88% {
    transform: translate(-50%, -44%) rotate(16deg);
  }
}

@keyframes pixel-trip-label-pop {
  0%,
  22% {
    opacity: 0;
    transform: translateY(0.5rem) rotate(-7deg) scale(0.4);
  }

  38%,
  72% {
    opacity: 1;
    transform: translateY(-0.35rem) rotate(-7deg) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-1.2rem) rotate(5deg) scale(0.8);
  }
}

@keyframes pixel-horse-victory {
  to {
    transform: translate(-50%, -85%) rotate(-4deg) scale(1.08);
    filter:
      drop-shadow(3px 3px 0 rgba(25, 12, 19, 0.55))
      drop-shadow(0 0 8px #fff7a8);
  }
}

@keyframes horse-winner-pop {
  from {
    opacity: 0;
    transform: scale(0.78);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes horse-winner-gallop {
  from {
    transform: translate(-50%, -50%) scale(1.12);
  }

  to {
    transform: translate(-50%, -64%) rotate(-2deg) scale(1.12);
  }
}

@keyframes horse-medal-bounce {
  from {
    transform: translateY(0) rotate(-4deg);
  }

  to {
    transform: translateY(-0.45rem) rotate(5deg);
  }
}

@keyframes horse-confetti-fall {
  0% {
    transform: translateY(-1rem) rotate(0);
  }

  100% {
    transform: translateY(10rem) rotate(270deg);
  }
}

@keyframes game-flow-pulse {
  to {
    transform: translateY(-2px);
    box-shadow: 0 0 18px rgba(255, 79, 139, 0.28);
  }
}

@keyframes pixel-victory-pop {
  0% {
    opacity: 0;
    transform: scale(0.45) rotate(-4deg);
  }

  70% {
    opacity: 1;
    transform: scale(1.1) rotate(2deg);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pixel-crash-pop {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(8deg);
  }

  65% {
    opacity: 1;
    transform: scale(1.12) rotate(-3deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes pixel-confetti-fall {
  0% {
    transform: translate(0, -10px) rotate(0);
  }

  50% {
    transform: translate(12px, 6rem) rotate(90deg);
  }

  100% {
    transform: translate(-8px, 14rem) rotate(180deg);
  }
}

@media (hover: hover) {
  button:not(:disabled):not(.players-floating-button):hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 14px 30px rgba(139, 92, 246, 0.3);
  }

  .secondary:hover,
  .social-floating-button:hover,
  .players-floating-button:hover,
  .log-floating-button:hover {
    border-color: rgba(108, 229, 255, 0.48);
    background: rgba(108, 229, 255, 0.12);
  }

  .game-preview:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--game-accent) 68%, transparent);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--game-accent) 12%, transparent);
  }
}

@keyframes party-panel-in {
  from {
    opacity: 0;
    transform: translateY(0.8rem) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}