/* ═══ TETA ANIMATIONS ═══ */

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

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes numberAppear {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes correctGlow {
  0% {
    box-shadow: 0 0 0 0 var(--correct-glow);
  }
  50% {
    box-shadow: 0 0 40px 10px var(--correct-glow);
  }
  100% {
    box-shadow: 0 0 0 0 var(--correct-glow);
  }
}

@keyframes errorGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.3);
  }
  50% {
    box-shadow: 0 0 40px 10px rgba(255, 82, 82, 0.3);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.3);
  }
}

@keyframes countdownPulse {
  0% {
    opacity: 0;
    transform: scale(1.5);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
}

@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes homeGlowPulse {
  0%, 100% { opacity: 0.45; transform: translate(-50%, -55%) scale(0.96); }
  50% { opacity: 0.75; transform: translate(-50%, -55%) scale(1.04); }
}

@keyframes splashPulse {
  0%, 100% {
    text-shadow: 0 0 20px var(--theta-glow);
  }
  50% {
    text-shadow: 0 0 40px var(--theta-glow-strong), 0 0 80px var(--theta-glow);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

.animate-fade-in-up {
  animation: fadeInUp 0.3s ease-out;
}

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

.animate-number-appear {
  animation: numberAppear 0.1s ease-out;
}

.animate-correct-glow {
  animation: correctGlow 0.8s ease-out;
}

.animate-error-shake {
  animation: errorShake 0.4s ease-out;
}

.animate-error-glow {
  animation: errorGlow 0.8s ease-out;
}

.animate-countdown-pulse {
  animation: countdownPulse 0.9s ease-out;
}

.animate-splash-pulse {
  animation: splashPulse 3s ease-in-out infinite;
}

/* ── Streak ── */
@keyframes streakPop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.5) translateY(10px); }
  40% { opacity: 1; transform: translateX(-50%) scale(1.15) translateY(0); }
  100% { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
}

@keyframes particleBurst {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0); }
}

/* ── Streak Banner ── */
.streak-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

.streak-banner.visible {
  animation: streakPop 0.4s ease-out forwards;
}

.streak-banner.streak-3 {
  color: var(--correct);
  text-shadow: 0 0 12px var(--correct-glow);
}

.streak-banner.streak-5 {
  color: #fbbf24;
  text-shadow: 0 0 16px rgba(251, 191, 36, 0.5), 0 0 40px rgba(251, 191, 36, 0.2);
  font-size: 16px;
}

.streak-banner.streak-7 {
  color: #f472b6;
  text-shadow: 0 0 20px rgba(244, 114, 182, 0.6), 0 0 50px rgba(244, 114, 182, 0.3);
  font-size: 18px;
}

/* ── Streak Particles ── */
.streak-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--correct);
  pointer-events: none;
  z-index: 20;
  animation: particleBurst 0.7s ease-out forwards;
}

.streak-5 ~ .streak-particle,
.streak-banner.streak-5 ~ .streak-particle {
  background: #fbbf24;
}

.streak-banner.streak-7 ~ .streak-particle {
  background: #f472b6;
}