/* ==========================================================================
   Animations — Keyframes + utility classes
   All animations are disabled under prefers-reduced-motion: reduce.
   ========================================================================== */

/* --- Keyframes --- */

/* Confetti burst: scale up then scatter outward */
@keyframes confetti-burst {
  0%   { transform: scale(0); opacity: 1; }
  50%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1) translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)); opacity: 0; }
}

/* Shake: left-right for wrong answers (3 oscillations in ~450ms) */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  16%      { transform: translateX(-6px); }
  33%      { transform: translateX(6px); }
  50%      { transform: translateX(-4px); }
  66%      { transform: translateX(4px); }
  83%      { transform: translateX(-2px); }
}

/* Toast slide up from bottom */
@keyframes toast-slide-up {
  0%   { transform: translateX(-50%) translateY(100%); opacity: 0; }
  100% { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

/* Toast fade out */
@keyframes toast-fade-out {
  0%   { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(8px); }
}

/* Level up: scale + glow pulse */
@keyframes level-up {
  0%   { transform: scale(1);    box-shadow: 0 0 0   rgba(108, 99, 255, 0); }
  50%  { transform: scale(1.08); box-shadow: 0 0 24px rgba(108, 99, 255, 0.6); }
  100% { transform: scale(1);    box-shadow: 0 0 0   rgba(108, 99, 255, 0); }
}

/* Badge pop: scale from 0 with elastic overshoot */
@keyframes badge-pop {
  0%   { transform: scale(0);    opacity: 0; }
  60%  { transform: scale(1.25); opacity: 1; }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* Critical flash: full-screen flash on critical streak */
@keyframes critical-flash {
  0%   { opacity: 0; }
  15%  { opacity: 0.15; }
  100% { opacity: 0; }
}

/* Pulse: skeleton loader shimmer */
@keyframes pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Float up: XP number rising and fading */
@keyframes float-up {
  0%   { transform: translateY(0);     opacity: 1; }
  100% { transform: translateY(-48px); opacity: 0; }
}

/* Streak fire: subtle flame wiggle */
@keyframes streak-fire {
  0%, 100% { transform: scaleY(1)    rotate(0deg); }
  25%      { transform: scaleY(1.08) rotate(-2deg); }
  50%      { transform: scaleY(0.95) rotate(1deg); }
  75%      { transform: scaleY(1.05) rotate(-1deg); }
}

/* --- Utility classes --- */

.animate-confetti {
  animation: confetti-burst var(--timing-slow) ease-out forwards;
}

.animate-incorrect {
  animation: shake 450ms ease-in-out;
}

.animate-toast {
  animation: toast-slide-up var(--timing-normal) ease-out forwards;
}

.animate-toast--out {
  animation: toast-fade-out var(--timing-fast) ease-in forwards;
}

.animate-levelup {
  animation: level-up 600ms ease-in-out;
}

.animate-badge {
  animation: badge-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-critical {
  animation: critical-flash 400ms ease-out;
}

.animate-xp {
  animation: float-up 800ms ease-out forwards;
}

.animate-streak {
  animation: streak-fire 1s ease-in-out infinite;
}

/* Screen transitions */
@keyframes view-fade-out {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes view-fade-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.view-exit {
  animation: view-fade-out 150ms ease-in forwards;
}

.view-enter {
  animation: view-fade-in 200ms ease-out forwards;
}

/* Timer pulse: red flash for last 5% */
@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.timer-danger exam-timer,
exam-timer.timer-danger {
  animation: timer-pulse 0.8s ease-in-out infinite;
}

/* --- Reduced motion: disable all animations --- */
@media (prefers-reduced-motion: reduce) {
  .animate-confetti,
  .animate-incorrect,
  .animate-toast,
  .animate-toast--out,
  .animate-levelup,
  .animate-badge,
  .animate-critical,
  .animate-xp,
  .animate-streak,
  .view-exit,
  .view-enter,
  exam-timer.timer-danger,
  .timer-danger exam-timer {
    animation: none !important;
  }
}