/* === Entry Animations === */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

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

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

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes popIn {
  0% { opacity: 0; transform: scale(0.5); }
  70% { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* === Feedback Animations === */
@keyframes correctPulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.06); }
  60% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

@keyframes correctGlow {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 20px 4px rgba(34, 197, 94, 0.2); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@keyframes wrongShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-8px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

@keyframes wrongGlow {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 16px 4px rgba(239, 68, 68, 0.2); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* === Progress Animations === */
@keyframes progressFill {
  from { width: var(--progress-from, 0%); }
  to { width: var(--progress-to, 100%); }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(10px) scale(0.8); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

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

/* === Gamification Animations === */
@keyframes streakFlame {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  25% { transform: scaleY(1.1) scaleX(0.95); }
  50% { transform: scaleY(0.95) scaleX(1.05); }
  75% { transform: scaleY(1.05) scaleX(0.97); }
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.15); }
  30% { transform: scale(1); }
  45% { transform: scale(1.1); }
}

@keyframes heartBreak {
  0% { transform: scale(1); opacity: 1; }
  30% { transform: scale(1.2); }
  100% { transform: scale(0); opacity: 0; }
}

@keyframes starEarn {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  60% { transform: scale(1.2) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes xpFloat {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(1.2); }
}

/* === UI Animations === */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes ripple {
  to { transform: scale(2.5); opacity: 0; }
}

/* === Toast Animations === */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-100%) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-100%) scale(0.9); }
}

/* === Modal Animations === */
@keyframes modalBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalContentIn {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* === Node/Skill Tree Animations === */
@keyframes nodeUnlock {
  0% { transform: scale(0.8); opacity: 0.5; filter: grayscale(100%); }
  50% { transform: scale(1.1); filter: grayscale(0%); }
  100% { transform: scale(1); opacity: 1; filter: grayscale(0%); }
}

@keyframes nodePulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-primary-200); }
  50% { box-shadow: 0 0 0 8px rgba(196, 30, 58, 0); }
}

/* === Matching Animation === */
@keyframes matchConnect {
  0% { opacity: 0; transform: scaleX(0); }
  100% { opacity: 1; transform: scaleX(1); }
}

@keyframes matchSuccess {
  0% { background-color: var(--color-success-light); }
  100% { background-color: transparent; }
}

/* === Staggered Children === */
.stagger-children > * {
  animation: fadeInUp 400ms var(--ease-out-expo) both;
}

.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 50ms; }
.stagger-children > *:nth-child(3) { animation-delay: 100ms; }
.stagger-children > *:nth-child(4) { animation-delay: 150ms; }
.stagger-children > *:nth-child(5) { animation-delay: 200ms; }
.stagger-children > *:nth-child(6) { animation-delay: 250ms; }
.stagger-children > *:nth-child(7) { animation-delay: 300ms; }
.stagger-children > *:nth-child(8) { animation-delay: 350ms; }

/* === Utility animation classes === */
.animate-fade-in { animation: fadeIn 300ms ease both; }
.animate-fade-in-up { animation: fadeInUp 400ms var(--ease-out-expo) both; }
.animate-slide-in-up { animation: slideInUp 500ms var(--ease-out-expo) both; }
.animate-scale-in { animation: scaleIn 300ms var(--ease-spring) both; }
.animate-pop-in { animation: popIn 400ms var(--ease-spring) both; }
.animate-correct { animation: correctPulse 400ms ease, correctGlow 600ms ease; }
.animate-wrong { animation: wrongShake 500ms ease, wrongGlow 600ms ease; }
.animate-bounce { animation: bounce 600ms var(--ease-out-back) infinite; }
.animate-heart-beat { animation: heartBeat 800ms ease; }
.animate-streak { animation: streakFlame 2s ease-in-out infinite; }