/* GrammarForge Animations */

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

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

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(14, 165, 233, 0.3); }
  50% { box-shadow: 0 0 20px rgba(14, 165, 233, 0.6); }
}

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

.animate-fade-in { animation: fadeInUp 0.5s ease-out; }
.animate-shake { animation: shakeX 0.4s ease-in-out; }
.animate-celebrate { animation: celebrateBounce 0.3s ease-in-out; }
.pulse-glow { animation: pulseGlow 2s infinite; }

/* Correct/Wrong feedback animations */
@keyframes correctFlash {
  from { background-color: rgba(34, 197, 94, 0.3); }
  to { background-color: transparent; }
}

@keyframes wrongShake {
  0%, 100% { transform: translateX(0); background-color: rgba(239, 68, 68, 0.1); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

/* Smooth transitions for options */
.mc-option, .error-word {
  transition: all 0.2s ease;
}

.mc-option:active, .error-word:active {
  transform: scale(0.98);
}

/* Scroll behavior */
html { scroll-behavior: smooth; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar-thumb { background: #475569; }

/* Toast animations */
@keyframes slideIn { from { transform: translateY(-20px); opacity:0; } to { transform: translateY(0); opacity:1; } }
@keyframes slideOut { from { opacity:1; } to { transform: translateY(-20px); opacity:0; } }
.toast-enter { animation: slideIn 0.4s ease-out; }
.toast-exit { animation: slideOut 0.3s ease-in forwards; }

/* Category chips */
.cat-chip.selected { border-color: #0ea5e9; background: #e0f2fe; color: #0369a1; }
.dark .cat-chip.selected { background: rgba(14,165,233,0.2); color: #7dd3fc; border-color: #0ea5e9; }