/* ============================================
   ANIMATIONS & EFFECTS
   ============================================ */

@keyframes slide-in-right {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slide-out-right {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(120%); opacity: 0; }
}

@keyframes scale-in {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes bounce-in {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.1); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

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

@keyframes confetti-fall {
  0% { transform: translateY(-100%) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* XP gain animation */
.xp-gain {
  position: fixed;
  pointer-events: none;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--xp-color);
  animation: xp-float 1.5s ease-out forwards;
  z-index: 3000;
}

@keyframes xp-float {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-80px) scale(1.5); opacity: 0; }
}

/* Correct character flash */
.char-correct-flash {
  animation: correct-flash 0.3s ease;
}

@keyframes correct-flash {
  0% { color: white; }
  50% { color: var(--success); text-shadow: 0 0 8px var(--success); }
  100% { color: var(--success); }
}

/* Combo indicator */
.combo-indicator {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--xp-color);
  animation: combo-pop 0.5s ease;
  pointer-events: none;
}

@keyframes combo-pop {
  0% { transform: translateX(-50%) scale(0.5); opacity: 0; }
  50% { transform: translateX(-50%) scale(1.3); }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* Confetti container */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5000;
}

.confetti-piece {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 10px;
  animation: confetti-fall var(--duration) ease-in forwards;
  animation-delay: var(--delay);
}

/* Star burst effect */
.star-burst {
  position: fixed;
  pointer-events: none;
  z-index: 4000;
}

.star-burst-particle {
  position: absolute;
  font-size: 1.5rem;
  animation: burst 0.8s ease-out forwards;
}

@keyframes burst {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* Progress bar animation */
.progress-bar-fill {
  animation: fill-grow 0.5s ease-out;
}

@keyframes fill-grow {
  from { width: 0; }
}

/* Streak fire animation */
.streak-fire {
  animation: fire-flicker 0.5s ease-in-out infinite alternate;
}

@keyframes fire-flicker {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

/* Fade transitions */
.fade-in {
  animation: fade-in 0.3s ease;
}

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

/* New record celebration */
.new-record-banner {
  background: linear-gradient(135deg, #FFD700, #FF8C00);
  color: #1a1a1a;
  text-align: center;
  padding: 12px 24px;
  border-radius: 16px;
  font-weight: 900;
  font-size: 1.2rem;
  margin-bottom: 16px;
  animation: record-entrance 0.6s ease;
  box-shadow: 0 4px 24px rgba(255, 215, 0, 0.4);
}

@keyframes record-entrance {
  0% { transform: scale(0.3) rotate(-10deg); opacity: 0; }
  60% { transform: scale(1.1) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Improvement streak fire animation */
.streak-fire-effect {
  position: fixed;
  pointer-events: none;
  z-index: 4000;
  font-size: 2rem;
  animation: fire-rise 1.5s ease-out forwards;
}

@keyframes fire-rise {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-120px) scale(1.5); opacity: 0; }
}

/* Chart appear animation */
.chart-appear {
  animation: chart-slide-up 0.6s ease-out;
}

@keyframes chart-slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Personal best card stagger animation */
.personal-best-card:nth-child(1) { animation: bounce-in 0.5s ease 0.0s both; }
.personal-best-card:nth-child(2) { animation: bounce-in 0.5s ease 0.1s both; }
.personal-best-card:nth-child(3) { animation: bounce-in 0.5s ease 0.2s both; }
.personal-best-card:nth-child(4) { animation: bounce-in 0.5s ease 0.3s both; }

/* Attempt dot stagger */
.attempt-dot {
  animation: scale-in 0.3s ease both;
}

/* Map lesson tile stagger */
.map-lesson {
  animation: scale-in 0.2s ease both;
}

/* Heatmap day pop-in */
.heatmap-day:not(.empty) {
  animation: scale-in 0.15s ease both;
}