/* ═══════════════════════════════════════════════════════════════════════════
   QuizBattle — animations.css
   All keyframes used across the app
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(.4) translateY(20px); }
  60%  { opacity: 1; transform: scale(1.08) translateY(-4px); }
  80%  { transform: scale(.97) translateY(2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes countdownPulse {
  0%   { transform: scale(1.4); opacity: 0; }
  30%  { opacity: 1; }
  70%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(.9); opacity: .5; }
}

@keyframes scoreReveal {
  0%   { transform: translate(-50%, -50%) scale(.3) rotate(-10deg); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.1) rotate(2deg);  opacity: 1; }
  80%  { transform: translate(-50%, -50%) scale(.95) rotate(-1deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0);       opacity: 1; }
}

@keyframes podiumRise {
  0%   { transform: scaleY(0); }
  70%  { transform: scaleY(1.08); }
  100% { transform: scaleY(1); }
}

@keyframes barGrow {
  0%   { transform: scaleY(0); opacity: 0; }
  100% { transform: scaleY(1); opacity: 1; }
}

@keyframes correctFlash {
  0%,100% { filter: brightness(1); }
  30%     { filter: brightness(1.4) saturate(1.3); box-shadow: 0 0 30px rgba(38,137,12,.8); }
}

@keyframes wrongShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-8px); }
  40%     { transform: translateX(8px); }
  60%     { transform: translateX(-5px); }
  80%     { transform: translateX(5px); }
}

@keyframes confettiFall {
  0%   { top: -20px; opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 110vh; opacity: 0; }
}

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

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

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Utility animation classes */
.animate-fade-in     { animation: fadeIn .4s ease both; }
.animate-bounce-in   { animation: bounceIn .5s ease both; }
.animate-fade-in-down{ animation: fadeInDown .4s ease both; }
.animate-slide-up    { animation: slideUp .4s ease both; }

/* Staggered delay helpers */
.delay-1 { animation-delay: .05s; }
.delay-2 { animation-delay: .10s; }
.delay-3 { animation-delay: .15s; }
.delay-4 { animation-delay: .20s; }
.delay-5 { animation-delay: .25s; }