/* ==========================================================================
   animations.css — @keyframes Definitions
   Mushroom Grove — Enchanted Forest Whack-a-Mole
   ========================================================================== */

/* -------------------------------------------------------------------------
   Sprite Pop Up — Emerges from behind mushroom with bounce overshoot
   ------------------------------------------------------------------------- */
@keyframes spritePopUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  60% {
    transform: translateY(-12%);
    opacity: 1;
  }
  80% {
    transform: translateY(4%);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* -------------------------------------------------------------------------
   Sprite Retreat — Slides back behind mushroom
   ------------------------------------------------------------------------- */
@keyframes spriteRetreat {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

/* -------------------------------------------------------------------------
   Sprite Hit — Squash, spin, and fade out
   ------------------------------------------------------------------------- */
@keyframes spriteHit {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: translateY(-10%) scale(1.25, 0.8) rotate(-8deg);
    opacity: 1;
  }
  60% {
    transform: translateY(-5%) scale(0.6) rotate(15deg);
    opacity: 0.6;
  }
  100% {
    transform: translateY(20%) scale(0) rotate(30deg);
    opacity: 0;
  }
}

/* -------------------------------------------------------------------------
   Score Popup — Float upward and fade out
   ------------------------------------------------------------------------- */
@keyframes scorePopup {
  0% {
    transform: translateY(0) scale(0.7);
    opacity: 0;
  }
  15% {
    transform: translateY(-8px) scale(1.1);
    opacity: 1;
  }
  30% {
    transform: translateY(-16px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-60px) scale(0.85);
    opacity: 0;
  }
}

/* -------------------------------------------------------------------------
   Combo Pulse — Scale oscillation with warm color shift
   ------------------------------------------------------------------------- */
@keyframes comboPulse {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.15);
    filter: brightness(1.3);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* -------------------------------------------------------------------------
   Firefly Drift — Gentle organic floating motion
   ------------------------------------------------------------------------- */
@keyframes fireflyDrift {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(12px, -18px);
  }
  40% {
    transform: translate(-8px, -30px);
  }
  60% {
    transform: translate(16px, -14px);
  }
  80% {
    transform: translate(-6px, -24px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* -------------------------------------------------------------------------
   Firefly Glow — Soft pulsing luminance
   ------------------------------------------------------------------------- */
@keyframes fireflyGlow {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* -------------------------------------------------------------------------
   Particle Burst — Explode outward from hit point
   ------------------------------------------------------------------------- */
@keyframes particleBurst {
  0% {
    transform: translate(0, 0) scale(0);
    opacity: 1;
  }
  20% {
    transform: translate(var(--px, 20px), var(--py, -20px)) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(
      calc(var(--px, 20px) * 2.5),
      calc(var(--py, -20px) * 2.5 + 30px)
    ) scale(0.2);
    opacity: 0;
  }
}

/* -------------------------------------------------------------------------
   Screen Shake — Quick rumble on bomb hit
   ------------------------------------------------------------------------- */
@keyframes screenShake {
  0%, 100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-4px, 2px);
  }
  20% {
    transform: translate(4px, -2px);
  }
  30% {
    transform: translate(-3px, -3px);
  }
  40% {
    transform: translate(3px, 3px);
  }
  50% {
    transform: translate(-2px, 1px);
  }
  60% {
    transform: translate(2px, -1px);
  }
  70% {
    transform: translate(-1px, 2px);
  }
  80% {
    transform: translate(1px, -1px);
  }
  90% {
    transform: translate(-1px, 0);
  }
}

/* -------------------------------------------------------------------------
   Glow Pulse — Box-shadow intensity oscillation (for glow buttons)
   ------------------------------------------------------------------------- */
@keyframes glowPulse {
  0%, 100% {
    box-shadow:
      0 0 8px var(--glow-amber-soft),
      0 0 20px rgba(244, 168, 37, 0.1);
  }
  50% {
    box-shadow:
      0 0 14px var(--glow-amber),
      0 0 36px var(--glow-amber-soft),
      0 0 60px rgba(244, 168, 37, 0.1);
  }
}

/* -------------------------------------------------------------------------
   Countdown Pop — Scale in and then burst outward
   ------------------------------------------------------------------------- */
@keyframes countdownPop {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  25% {
    transform: scale(0.9);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* -------------------------------------------------------------------------
   New Record — Sparkle flash for new high score
   ------------------------------------------------------------------------- */
@keyframes newRecord {
  0%, 100% {
    text-shadow:
      0 0 8px var(--glow-gold),
      0 0 16px var(--glow-gold-soft);
    transform: scale(1);
  }
  25% {
    text-shadow:
      0 0 20px var(--glow-gold),
      0 0 40px var(--glow-gold),
      0 0 60px var(--glow-gold-soft);
    transform: scale(1.08);
  }
  50% {
    text-shadow:
      0 0 10px var(--glow-gold),
      0 0 24px var(--glow-gold-soft);
    transform: scale(1);
  }
  75% {
    text-shadow:
      0 0 24px var(--glow-gold),
      0 0 50px var(--glow-gold),
      0 0 80px var(--glow-gold-soft);
    transform: scale(1.05);
  }
}

/* -------------------------------------------------------------------------
   Slide Up — Element slides up into view
   ------------------------------------------------------------------------- */
@keyframes slideUp {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* -------------------------------------------------------------------------
   Fade In — Simple opacity entrance
   ------------------------------------------------------------------------- */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* -------------------------------------------------------------------------
   Heartbeat — Life icon pulse when in danger (1 life left)
   ------------------------------------------------------------------------- */
@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.25);
  }
  30% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.15);
  }
}

/* -------------------------------------------------------------------------
   Life Lost — Heart breaking / fading animation
   ------------------------------------------------------------------------- */
@keyframes lifeLost {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(1.3);
    opacity: 1;
  }
  50% {
    transform: scale(0.8) rotate(-10deg);
    opacity: 0.6;
  }
  100% {
    transform: scale(0.5) rotate(-20deg);
    opacity: 0.2;
  }
}

/* -------------------------------------------------------------------------
   Sparkle — Tiny glint used on golden sprite
   ------------------------------------------------------------------------- */
@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
}

/* -------------------------------------------------------------------------
   Wobble — Subtle idle wobble for bomb sprite
   ------------------------------------------------------------------------- */
@keyframes wobble {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-2px) rotate(-2deg);
  }
  75% {
    transform: translateY(-1px) rotate(2deg);
  }
}

/* -------------------------------------------------------------------------
   Combo Fire Edges — Overlay glow around screen edges
   ------------------------------------------------------------------------- */
@keyframes comboFireEdge {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }
}