/* === CARD ANIMATIONS === */

/* Card entrance */
.card-enter {
  animation: cardPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes cardPopIn {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-10deg);
  }
  70% {
    transform: scale(1.08) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Correct card */
@keyframes cardCorrect {
  0% { transform: scale(1); }
  30% { transform: scale(1.15) rotate(3deg); }
  50% { transform: scale(1.1) rotate(-2deg); }
  100% { transform: scale(1); }
}

/* Wrong card wobble */
@keyframes cardWrong {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  15% { transform: translateX(-8px) rotate(-3deg); }
  30% { transform: translateX(8px) rotate(3deg); }
  45% { transform: translateX(-6px) rotate(-2deg); }
  60% { transform: translateX(6px) rotate(2deg); }
  75% { transform: translateX(-3px) rotate(-1deg); }
  90% { transform: translateX(3px) rotate(1deg); }
}

/* Hint glow for correct card after 2 wrong */
@keyframes hintPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(76, 175, 80, 0.3), 0 0 20px rgba(76, 175, 80, 0.2);
  }
}

/* === SPARKLE PARTICLES === */
@keyframes sparkleFloat {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--sx, 30px), var(--sy, -60px)) scale(0);
  }
}

.sparkle {
  --sx: 0px;
  --sy: -60px;
  position: fixed;
}

.sparkle:nth-child(odd) { --sx: -30px; --sy: -70px; }
.sparkle:nth-child(even) { --sx: 40px; --sy: -50px; }
.sparkle:nth-child(3n) { --sx: -50px; --sy: -40px; }
.sparkle:nth-child(4n) { --sx: 20px; --sy: -80px; }

/* === STAR POP ON SESSION COMPLETE === */
@keyframes starPop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-30deg);
  }
  60% {
    transform: scale(1.3) rotate(10deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* === SCREEN TRANSITIONS === */
.screen {
  transition: opacity 0.4s ease;
}

/* === PULSE FOR INTERACTIVE ELEMENTS === */
@keyframes gentlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}