/* =====================================================
   DPBT MASTER – Animations
   ===================================================== */

/* ---- Keyframes ---- */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fade-out {
  to { opacity: 0; pointer-events: none; }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slide-down {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}
@keyframes flash-green {
  0%   { box-shadow: none; }
  50%  { box-shadow: 0 0 24px rgba(16,185,129,0.6); }
  100% { box-shadow: none; }
}
@keyframes pulse-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(124,58,237,0.5)); }
  50%      { filter: drop-shadow(0 0 24px rgba(124,58,237,0.9)); }
}
@keyframes pulse-red {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}
@keyframes float-particle {
  from { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.15; }
  90%  { opacity: 0.15; }
  to   { transform: translateY(-20px) rotate(360deg); opacity: 0; }
}
@keyframes float-xp {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  60%  { opacity: 1; transform: translateY(-60px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-100px) scale(0.8); }
}
@keyframes spin-once {
  from { transform: rotate(0deg) scale(0.5); opacity: 0; }
  60%  { transform: rotate(20deg) scale(1.1); opacity: 1; }
  to   { transform: rotate(0deg) scale(1); opacity: 1; }
}
@keyframes bounce-in {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes streak-glow {
  0%, 100% { text-shadow: 0 0 8px rgba(245,158,11,0.4); }
  50%      { text-shadow: 0 0 24px rgba(245,158,11,0.9); }
}
@keyframes heart-lose {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.4); filter: hue-rotate(180deg); }
  60%  { transform: scale(0.8); }
  100% { transform: scale(0); opacity: 0; }
}
@keyframes xp-bar-fill {
  from { width: 0%; }
}
@keyframes confetti-fall {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
@keyframes option-enter {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes correct-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes timer-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
@keyframes drop-in {
  0%   { transform: translateY(-40px) scale(0.8); opacity: 0; }
  70%  { transform: translateY(4px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ---- Utility classes ---- */
.animate-fade-in    { animation: fade-in 0.4s ease both; }
.animate-slide-up   { animation: slide-up 0.35s ease both; }
.animate-slide-down { animation: slide-down 0.35s ease both; }
.animate-pop-in     { animation: pop-in 0.3s cubic-bezier(0.34,1.56,0.64,1) both; }
.animate-bounce-in  { animation: bounce-in 0.5s cubic-bezier(0.34,1.56,0.64,1) both; }
.animate-shake      { animation: shake 0.4s ease; }
.animate-drop-in    { animation: drop-in 0.45s cubic-bezier(0.34,1.56,0.64,1) both; }

/* Staggered option entry */
.option-btn:nth-child(1) { animation: option-enter 0.25s 0.05s ease both; }
.option-btn:nth-child(2) { animation: option-enter 0.25s 0.12s ease both; }
.option-btn:nth-child(3) { animation: option-enter 0.25s 0.19s ease both; }
.option-btn:nth-child(4) { animation: option-enter 0.25s 0.26s ease both; }
.option-btn:nth-child(5) { animation: option-enter 0.25s 0.33s ease both; }

/* Pulse glow util */
.pulse-glow { animation: pulse-glow 2.5s ease-in-out infinite; }

/* Streak animation */
.streak-active { animation: streak-glow 1s ease-in-out infinite; }

/* Timer urgent */
.timer-urgent { animation: timer-pulse 0.5s ease-in-out infinite; color: var(--red) !important; }