/* ═══════════════════════════════════════════════════════════
   EDUKIDS — ANIMATIONS CSS
   All keyframes and animation utility classes
═══════════════════════════════════════════════════════════ */

/* ── Background Orb Animations ── */
@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(-60px, 40px) scale(1.1); }
  66%       { transform: translate(40px, -30px) scale(0.9); }
}

@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%       { transform: translate(80px, -50px) scale(1.15); }
  70%       { transform: translate(-40px, 30px) scale(0.9); }
}

@keyframes orbFloat3 {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50%       { transform: translateY(-55%) scale(1.1); }
}

/* ── Star Animations ── */
@keyframes starTwinkle {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.5); }
}

@keyframes orbitStar {
  0%   { transform: rotate(0deg)   translateX(75px) rotate(0deg);   }
  100% { transform: rotate(360deg) translateX(75px) rotate(-360deg); }
}

@keyframes starSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes starPop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.4) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ── Title Animation ── */
@keyframes titleGlow {
  0%, 100% { text-shadow: 0 0 40px rgba(108, 99, 255, 0.8), 0 4px 20px rgba(0,0,0,0.5); }
  50%       { text-shadow: 0 0 60px rgba(108, 99, 255, 1),   0 4px 20px rgba(0,0,0,0.5), 0 0 100px rgba(79, 172, 254, 0.4); }
}

/* ── Mascot Animations ── */
@keyframes mascotFloat {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-10px); }
}

@keyframes mascotBounce {
  0%, 100% { transform: scale(1); }
  30%       { transform: scale(1.25) rotate(-8deg); }
  60%       { transform: scale(0.9)  rotate(5deg);  }
}

/* ── Button Animations ── */
@keyframes buttonPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(108, 99, 255, 0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(108, 99, 255, 0);  }
}

@keyframes bounceClick {
  0%   { transform: scale(1);    }
  40%  { transform: scale(0.92); }
  100% { transform: scale(1);    }
}

/* ── Screen Transition ── */
@keyframes screenEnter {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1);       }
}

/* ── Module Card ── */
@keyframes cardReveal {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1);       }
}

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

/* ── Celebration Animations ── */
@keyframes celebrationBounce {
  0%   { transform: scale(0) rotate(-20deg); }
  50%  { transform: scale(1.3) rotate(10deg); }
  75%  { transform: scale(0.9) rotate(-5deg); }
  100% { transform: scale(1) rotate(0deg);    }
}

@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg) translateX(0);    opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg) translateX(var(--drift, 50px)); opacity: 0; }
}

/* ── Toast Animations ── */
@keyframes toastSlide {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes toastFade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── Spinner ── */
@keyframes spinnerRotate {
  to { transform: rotate(360deg); }
}

/* ── Utility Animation Classes ── */
.bounce-on-click:active {
  animation: bounceClick 0.3s ease-out;
}

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

.card-reveal {
  animation: cardReveal 0.5s ease-out both;
}

.float-animation {
  animation: mascotFloat 3s ease-in-out infinite;
}

/* ── Correct / Wrong Answer Animations ── */
@keyframes correctPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.15); background: rgba(67, 233, 123, 0.3); }
  100% { transform: scale(1); }
}

@keyframes wrongShake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px);  }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px);  }
}

@keyframes itemPop {
  0%   { transform: scale(0.5) rotate(-10deg); opacity: 0; }
  70%  { transform: scale(1.1) rotate(3deg);  opacity: 1; }
  100% { transform: scale(1)   rotate(0deg);  opacity: 1; }
}

.anim-correct {
  animation: correctPop 0.4s ease-out;
}

.anim-wrong {
  animation: wrongShake 0.4s ease-out;
}

.anim-pop {
  animation: itemPop 0.4s ease-out both;
}

/* ── Progress Bar Animation ── */
@keyframes fillProgress {
  from { width: 0; }
}

.fill-progress {
  animation: fillProgress 1s ease-out both;
}

/* ── Glow Pulse for stars ── */
@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.4)); }
  50%       { filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.9)); }
}

.glow-star {
  animation: glowPulse 1.5s ease-in-out infinite;
}