/* ============================================
   MONSTER SMASH - Animations
   Stadium lights, chrome flash, dirt explosions
   ============================================ */

/* ---- Title Screen Animations ---- */

/* Main title slam - drops in from above with bounce */
@keyframes titleSlam {
  0% {
    transform: translateY(-120%) scale(1.5) rotate(-5deg);
    opacity: 0;
  }
  30% {
    transform: translateY(8%) scale(1.05) rotate(1deg);
    opacity: 1;
  }
  45% {
    transform: translateY(-4%) scale(0.98) rotate(-0.5deg);
  }
  60% {
    transform: translateY(2%) scale(1.01);
  }
  75% {
    transform: translateY(-1%) scale(0.995);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Continuous fire glow pulse on title */
@keyframes fireGlow {
  0%, 100% {
    text-shadow:
      0 0 20px rgba(255, 107, 26, 0.6),
      0 0 40px rgba(255, 45, 45, 0.4),
      0 0 80px rgba(255, 107, 26, 0.2),
      0 4px 0 #8b2500;
    filter: brightness(1);
  }
  50% {
    text-shadow:
      0 0 30px rgba(255, 210, 26, 0.8),
      0 0 60px rgba(255, 107, 26, 0.5),
      0 0 100px rgba(255, 45, 45, 0.3),
      0 4px 0 #8b2500;
    filter: brightness(1.1);
  }
}

/* "MONSTER" word flies in from left */
@keyframes wordSlideLeft {
  0% {
    transform: translateX(-120vw) rotate(-15deg);
    opacity: 0;
  }
  60% {
    transform: translateX(3%) rotate(2deg);
    opacity: 1;
  }
  80% {
    transform: translateX(-1%) rotate(-0.5deg);
  }
  100% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

/* "SMASH!" word flies in from right */
@keyframes wordSlideRight {
  0% {
    transform: translateX(120vw) rotate(15deg);
    opacity: 0;
  }
  60% {
    transform: translateX(-3%) rotate(-2deg);
    opacity: 1;
  }
  80% {
    transform: translateX(1%) rotate(0.5deg);
  }
  100% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

/* Impact flash when title lands */
@keyframes impactFlash {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  20% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
    transform: scale(3);
  }
}

/* Play button entrance */
@keyframes buttonReveal {
  0% {
    transform: translateY(60px) scale(0.8);
    opacity: 0;
  }
  60% {
    transform: translateY(-5px) scale(1.03);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Play button idle pulse */
@keyframes buttonPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 40px rgba(255, 45, 45, 0.4),
      0 0 80px rgba(255, 107, 26, 0.2);
  }
  50% {
    transform: scale(1.04);
    box-shadow:
      0 0 50px rgba(255, 45, 45, 0.6),
      0 0 100px rgba(255, 107, 26, 0.3);
  }
}

/* Subtitle fade in */
@keyframes subtitleFade {
  0% {
    opacity: 0;
    transform: translateY(20px);
    letter-spacing: 15px;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: 6px;
  }
}

/* ---- Spark / debris burst ---- */
@keyframes sparkBurst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--sx, 50px), var(--sy, -80px)) scale(0);
  }
}

/* ---- Screen Transitions ---- */
@keyframes screenSlideIn {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes screenSlideOut {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes screenZoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

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

/* ---- Card Animations ---- */
@keyframes cardDeal {
  0% {
    transform: translateY(100vh) rotate(var(--deal-rotate, 15deg)) scale(0.5);
    opacity: 0;
  }
  70% {
    transform: translateY(-10px) rotate(-2deg) scale(1.02);
    opacity: 1;
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
  }
}

@keyframes cardSelect {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes cardShine {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* ---- Rarity Glow Animations ---- */
@keyframes legendaryPulse {
  0%, 100% {
    box-shadow:
      0 0 10px rgba(255, 170, 0, 0.4),
      0 0 20px rgba(255, 170, 0, 0.2),
      inset 0 0 10px rgba(255, 170, 0, 0.1);
  }
  50% {
    box-shadow:
      0 0 20px rgba(255, 170, 0, 0.7),
      0 0 40px rgba(255, 170, 0, 0.3),
      0 0 60px rgba(255, 170, 0, 0.1),
      inset 0 0 15px rgba(255, 170, 0, 0.2);
  }
}

@keyframes epicPulse {
  0%, 100% {
    box-shadow:
      0 0 8px rgba(180, 74, 255, 0.3),
      0 0 16px rgba(180, 74, 255, 0.15);
  }
  50% {
    box-shadow:
      0 0 15px rgba(180, 74, 255, 0.5),
      0 0 30px rgba(180, 74, 255, 0.25);
  }
}

/* ---- Floating debris behind title ---- */
@keyframes debrisFloat1 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0.6; }
  50% { transform: translate(30px, -40px) rotate(180deg); opacity: 0.3; }
  100% { transform: translate(-10px, -80px) rotate(360deg); opacity: 0; }
}

@keyframes debrisFloat2 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0.5; }
  50% { transform: translate(-40px, -30px) rotate(-180deg); opacity: 0.3; }
  100% { transform: translate(20px, -70px) rotate(-360deg); opacity: 0; }
}

/* ---- Tire track marks ---- */
@keyframes tireTrack {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -200px 0;
  }
}

/* ---- Explosion ---- */
@keyframes explode {
  0% {
    transform: scale(0.3);
    opacity: 1;
    filter: brightness(3);
  }
  30% {
    transform: scale(1.5);
    opacity: 0.9;
    filter: brightness(2);
  }
  100% {
    transform: scale(3);
    opacity: 0;
    filter: brightness(1);
  }
}

/* ---- Continuous wobble (for damaged trucks) ---- */
@keyframes damageWobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
}

/* ---- Victory celebration ---- */
@keyframes victoryBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-30px) scale(1.1); }
  50% { transform: translateY(0) scale(1); }
  70% { transform: translateY(-15px) scale(1.05); }
}

@keyframes confettiDrop {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0.5;
  }
}

/* ---- Utility animation classes ---- */
.anim-slam {
  animation: titleSlam 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.anim-slide-left {
  animation: wordSlideLeft 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.anim-slide-right {
  animation: wordSlideRight 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.anim-fire-glow {
  animation: fireGlow 2s ease-in-out infinite;
}

.anim-button-reveal {
  animation: buttonReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.anim-button-pulse {
  animation: buttonPulse 2s ease-in-out infinite;
}

.anim-screen-enter {
  animation: screenZoomIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}