/* Animation Keyframes */

@keyframes fireGlow {
  0% { box-shadow: 0 0 10px rgba(255, 107, 53, 0.4); }
  50% { box-shadow: 0 0 25px rgba(255, 107, 53, 0.8), 0 0 10px rgba(239, 68, 68, 0.6); }
  100% { box-shadow: 0 0 10px rgba(255, 107, 53, 0.4); }
}

@keyframes fireParticle {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) scale(0.5) rotate(45deg);
    opacity: 0;
  }
}

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

@keyframes slideInDown {
  0% { transform: translateY(-30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

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

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

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeInScale {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes shakeWrong {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-10px); }
}

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

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes countdownUrgent {
  0% { transform: scale(1); color: inherit; }
  50% { transform: scale(1.1); color: var(--fire-red); }
  100% { transform: scale(1); color: inherit; }
}

@keyframes phaseTransition {
  0% { opacity: 0; transform: scale(0.9); }
  20% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.1); }
}

@keyframes playerJoin {
  0% { transform: translateX(50px) scale(0.9); opacity: 0; }
  70% { transform: translateX(-5px) scale(1.02); opacity: 1; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

@keyframes ripple {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
  100% { box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); }
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes vibrate {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

@keyframes typewriter {
  from { max-width: 0; }
  to { max-width: 100%; }
}

/* Animation Utility Classes */

.animate-slide-up {
  animation: slideInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}

.animate-slide-down {
  animation: slideInDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}

.animate-slide-left {
  animation: slideInLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}

.animate-slide-right {
  animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}

.animate-fade-in {
  animation: fadeIn 0.4s ease-out forwards;
  will-change: opacity;
}

.animate-fade-in-scale {
  animation: fadeInScale 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}

.animate-shake {
  animation: shakeWrong 0.5s ease-in-out forwards;
  will-change: transform;
}

.animate-pulse {
  animation: pulse 2s infinite ease-in-out;
  will-change: transform;
}

.animate-float {
  animation: float 3s infinite ease-in-out;
  will-change: transform;
}

.animate-fire-glow {
  animation: fireGlow 2s infinite ease-in-out;
  will-change: box-shadow;
}

.animate-player-join {
  animation: playerJoin 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  will-change: transform, opacity;
}

.animate-confetti {
  animation: confettiBurst 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  will-change: transform, opacity;
}

.animate-urgent {
  animation: countdownUrgent 1s infinite ease-in-out;
  will-change: transform, color;
}

/* Fire Background Particles */
.fire-bg-particles {
  position: relative;
  overflow: hidden;
}

.fire-bg-particles::before,
.fire-bg-particles::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: var(--fire-orange);
  border-radius: 50%;
  bottom: -10px;
  filter: blur(2px);
  animation: fireParticle 3s infinite ease-in;
  will-change: transform, opacity;
  z-index: 0;
  pointer-events: none;
}

.fire-bg-particles::before {
  left: 20%;
  animation-delay: 0.5s;
}

.fire-bg-particles::after {
  left: 80%;
  animation-delay: 1.2s;
  background-color: var(--fire-red);
}

/* Stagger Utilities */
.stagger-1 { animation-delay: 100ms; opacity: 0; }
.stagger-2 { animation-delay: 200ms; opacity: 0; }
.stagger-3 { animation-delay: 300ms; opacity: 0; }
.stagger-4 { animation-delay: 400ms; opacity: 0; }
.stagger-5 { animation-delay: 500ms; opacity: 0; }

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