/* ============================================
   SYNTHWAVE TYPER — Animations & Keyframes
   All motion definitions, transitions, and
   animated effects for the game
   ============================================ */

/* ── Background Grid Scroll ── */
@keyframes gridScroll {
  0% { transform: perspective(var(--road-perspective)) rotateX(60deg) translateY(0); }
  100% { transform: perspective(var(--road-perspective)) rotateX(60deg) translateY(50px); }
}

@keyframes gridScrollFast {
  0% { transform: perspective(var(--road-perspective)) rotateX(60deg) translateY(0); }
  100% { transform: perspective(var(--road-perspective)) rotateX(60deg) translateY(50px); }
}

/* ── Neon Pulse Effects ── */
@keyframes neonPulse {
  0%, 100% { opacity: 1; filter: brightness(1); }
  50% { opacity: 0.8; filter: brightness(1.3); }
}

@keyframes neonPulseStrong {
  0%, 100% {
    text-shadow: 0 0 7px var(--neon-pink), 0 0 20px var(--neon-pink-glow), 0 0 40px rgba(255, 45, 149, 0.3);
  }
  50% {
    text-shadow: 0 0 10px var(--neon-pink), 0 0 30px var(--neon-pink), 0 0 60px var(--neon-pink-glow), 0 0 80px rgba(255, 45, 149, 0.4);
  }
}

@keyframes neonPulseCyan {
  0%, 100% {
    text-shadow: 0 0 7px var(--neon-cyan), 0 0 20px var(--neon-cyan-glow);
  }
  50% {
    text-shadow: 0 0 10px var(--neon-cyan), 0 0 30px var(--neon-cyan), 0 0 60px var(--neon-cyan-glow);
  }
}

/* ── Glow Border Animation ── */
@keyframes glowBorder {
  0%, 100% {
    box-shadow: 0 0 5px var(--neon-cyan), 0 0 15px var(--neon-cyan-glow), inset 0 0 5px rgba(0, 240, 255, 0.1);
  }
  50% {
    box-shadow: 0 0 10px var(--neon-cyan), 0 0 25px var(--neon-cyan-glow), 0 0 40px rgba(0, 240, 255, 0.15), inset 0 0 10px rgba(0, 240, 255, 0.15);
  }
}

@keyframes glowBorderPink {
  0%, 100% {
    box-shadow: 0 0 5px var(--neon-pink), 0 0 15px var(--neon-pink-glow);
  }
  50% {
    box-shadow: 0 0 10px var(--neon-pink), 0 0 25px var(--neon-pink-glow), 0 0 40px rgba(255, 45, 149, 0.15);
  }
}

/* ── Title Entrance ── */
@keyframes titleSlideIn {
  0% {
    transform: translateY(-40px) scale(0.8);
    opacity: 0;
    filter: blur(10px);
  }
  60% {
    transform: translateY(5px) scale(1.05);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

/* ── Fade & Slide Entrances ── */
@keyframes fadeInUp {
  0% { transform: translateY(30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes fadeInDown {
  0% { transform: translateY(-20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes fadeInScale {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Button Hover Glow ── */
@keyframes buttonGlow {
  0%, 100% {
    box-shadow: 0 0 8px var(--neon-pink), 0 0 20px var(--neon-pink-glow);
  }
  50% {
    box-shadow: 0 0 15px var(--neon-pink), 0 0 35px var(--neon-pink-glow), 0 0 50px rgba(255, 45, 149, 0.2);
  }
}

/* ── Star Collect Animation ── */
@keyframes starCollect {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.8) rotate(180deg); opacity: 1; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

/* ── XP Bar Fill ── */
@keyframes xpFill {
  0% { width: 0%; }
}

/* ── Combo Fire ── */
@keyframes comboFire {
  0% { transform: scale(1); filter: hue-rotate(0deg); }
  25% { transform: scale(1.15); filter: hue-rotate(30deg); }
  50% { transform: scale(1); filter: hue-rotate(0deg); }
  75% { transform: scale(1.1); filter: hue-rotate(-20deg); }
  100% { transform: scale(1); filter: hue-rotate(0deg); }
}

/* ── Screen Shake ── */
@keyframes screenShake {
  0%, 100% { transform: translateX(0) translateY(0); }
  10% { transform: translateX(-4px) translateY(2px); }
  20% { transform: translateX(4px) translateY(-2px); }
  30% { transform: translateX(-3px) translateY(3px); }
  40% { transform: translateX(3px) translateY(-1px); }
  50% { transform: translateX(-2px) translateY(2px); }
  60% { transform: translateX(2px) translateY(-2px); }
  70% { transform: translateX(-1px) translateY(1px); }
  80% { transform: translateX(1px) translateY(-1px); }
  90% { transform: translateX(-1px) translateY(0px); }
}

/* ── Heart Beat (Lives) ── */
@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.3); }
  30% { transform: scale(1); }
  45% { transform: scale(1.2); }
  60% { transform: scale(1); }
}

@keyframes heartLose {
  0% { transform: scale(1); opacity: 1; }
  30% { transform: scale(1.5); opacity: 1; filter: brightness(2); }
  100% { transform: scale(0) rotate(45deg); opacity: 0; }
}

/* ── Car Boost Effect ── */
@keyframes carBoost {
  0% { transform: translateX(-50%) scaleX(1); }
  30% { transform: translateX(-50%) scaleX(1.1) scaleY(0.95); }
  60% { transform: translateX(-50%) scaleX(0.95) scaleY(1.05); }
  100% { transform: translateX(-50%) scaleX(1); }
}

/* ── Word Zoom In (Race Mode) ── */
@keyframes wordZoomIn {
  0% {
    transform: translateZ(-500px) scale(0.3);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateZ(0) scale(1);
    opacity: 1;
  }
}

/* ── Power-Up Float ── */
@keyframes powerUpFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(5deg); }
  75% { transform: translateY(4px) rotate(-3deg); }
}

@keyframes powerUpCollect {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(2); opacity: 0.8; filter: brightness(3); }
  100% { transform: scale(0); opacity: 0; }
}

/* ── Scanline Overlay ── */
@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* ── Sun Pulse ── */
@keyframes sunPulse {
  0%, 100% {
    box-shadow: 0 0 60px rgba(255, 107, 53, 0.6), 0 0 120px rgba(255, 107, 53, 0.3);
    transform: translate(-50%, 0) scale(1);
  }
  50% {
    box-shadow: 0 0 80px rgba(255, 107, 53, 0.8), 0 0 160px rgba(255, 107, 53, 0.4);
    transform: translate(-50%, 0) scale(1.02);
  }
}

/* ── Key Press Flash ── */
@keyframes keyPressFlash {
  0% { background: var(--neon-cyan); transform: scale(1.15); }
  100% { background: var(--bg-surface); transform: scale(1); }
}

@keyframes keyCorrect {
  0% { background: var(--neon-green); box-shadow: 0 0 20px var(--neon-green-glow); transform: scale(1.1); }
  100% { background: var(--bg-surface); box-shadow: none; transform: scale(1); }
}

@keyframes keyWrong {
  0% { background: #ff3333; box-shadow: 0 0 20px rgba(255, 50, 50, 0.5); transform: scale(1.1); }
  50% { transform: translateX(-3px); }
  100% { background: var(--bg-surface); box-shadow: none; transform: scale(1) translateX(0); }
}

/* ── Level Up ── */
@keyframes levelUp {
  0% {
    transform: scale(0) rotate(-10deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(3deg);
    opacity: 1;
  }
  70% {
    transform: scale(0.95) rotate(-1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes levelUpBg {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Floating Particles ── */
@keyframes particleFloat {
  0% {
    transform: translateY(100vh) translateX(0) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(90vh) translateX(10px) scale(1);
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-10vh) translateX(-20px) scale(0.5);
    opacity: 0;
  }
}

/* ── Loading Dots ── */
@keyframes loadingDot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ── Road Stripes ── */
@keyframes roadStripes {
  0% { background-position: 0 0; }
  100% { background-position: 0 100px; }
}

/* ── Boss Warning ── */
@keyframes bossWarning {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ── Countdown ── */
@keyframes countdownPop {
  0% { transform: scale(3); opacity: 0; }
  30% { transform: scale(1); opacity: 1; }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.5); opacity: 0; }
}

/* ── Flicker (retro CRT effect) ── */
@keyframes flicker {
  0%, 95%, 100% { opacity: 1; }
  96% { opacity: 0.8; }
  97% { opacity: 1; }
  98% { opacity: 0.9; }
}

/* ── Stagger delay utilities ── */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }
.stagger-7 { animation-delay: 0.7s; }
.stagger-8 { animation-delay: 0.8s; }