/* ============================================
   Keyframe Animations & Transitions
   ============================================ */

/* ---- Fade ---- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

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

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideOutRight {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* ---- Scale ---- */
@keyframes scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes scaleOut {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.9); opacity: 0; }
}

/* ---- Pulse ---- */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(var(--color-gold-rgb), 0.3); }
  50% { box-shadow: 0 0 20px rgba(var(--color-gold-rgb), 0.6); }
}

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

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

/* ---- Shimmer (skeleton loading) ---- */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

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

/* ---- Shake ---- */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ---- Confetti burst ---- */
@keyframes confettiFall {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ---- Progress bar fill ---- */
@keyframes progressFill {
  from { width: 0%; }
  to { width: 100%; }
}

/* ---- Score count up (number tick) ---- */
@keyframes countUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ---- Notification dot ---- */
@keyframes notificationPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--color-red-rgb), 0.4);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(var(--color-red-rgb), 0);
  }
}

/* ============================================
   Animation Utility Classes
   ============================================ */

.anim-fade-in { animation: fadeIn var(--transition-normal) ease forwards; }
.anim-fade-out { animation: fadeOut var(--transition-normal) ease forwards; }
.anim-slide-up { animation: slideUp var(--transition-normal) ease forwards; }
.anim-slide-down { animation: slideDown var(--transition-normal) ease forwards; }
.anim-scale-in { animation: scaleIn var(--transition-spring) forwards; }
.anim-bounce-in { animation: bounceIn 500ms ease forwards; }
.anim-pulse { animation: pulse 2s ease-in-out infinite; }
.anim-float { animation: float 3s ease-in-out infinite; }
.anim-spin { animation: spin 1s linear infinite; }
.anim-shake { animation: shake 400ms ease; }

/* ---- Stagger delay helpers ---- */
.anim-delay-1 { animation-delay: 50ms; }
.anim-delay-2 { animation-delay: 100ms; }
.anim-delay-3 { animation-delay: 150ms; }
.anim-delay-4 { animation-delay: 200ms; }
.anim-delay-5 { animation-delay: 250ms; }
.anim-delay-6 { animation-delay: 300ms; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}