/* ============================================
   Tamil Learning Module — Animations
   ============================================ */

/* ── Page Transitions ── */
@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

/* ── Scale / Pop ── */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scalePop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ── Bounce ── */
@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.08);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Slide ── */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Shimmer / Glow ── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px rgba(99, 102, 241, 0.2); }
  50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.4); }
}

/* ── Confetti ── */
@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(-100vh) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(720deg);
  }
}

.confetti-piece {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  z-index: var(--z-celebration);
  animation: confetti-fall 3s ease-out forwards;
  pointer-events: none;
}

/* ── XP Pulse ── */
@keyframes xpPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

.xp-pulse {
  animation: xpPulse 0.6s ease;
}

/* ── Star Spin ── */
@keyframes starSpin {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.3) rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 1;
  }
}

.star-spin {
  animation: starSpin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Float ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

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

/* ── Stagger Animation Delays (for grids) ── */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.3s; }

/* ── Card Entrance ── */
.card-enter {
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 0.5s ease forwards;
}

/* ── Progress Fill Animation ── */
@keyframes progressFill {
  from { width: 0; }
}

.progress-animate {
  animation: progressFill 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Unlock Reveal ── */
@keyframes unlockReveal {
  0% {
    opacity: 0.55;
    filter: grayscale(0.15);
    transform: scale(0.98);
  }
  50% {
    opacity: 1;
    filter: grayscale(0);
    transform: scale(1.03);
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
  }
  100% {
    opacity: 1;
    filter: grayscale(0);
    transform: scale(1);
    box-shadow: var(--shadow-card);
  }
}

.unlock-reveal {
  animation: unlockReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}