/* === KEYFRAMES === */

@keyframes spin {
  to { transform: rotate(360deg); }
}

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

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

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

@keyframes pulseGreen {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@keyframes flameWobble {
  0%, 100% { transform: rotate(-3deg) scale(1); }
  25%       { transform: rotate(3deg) scale(1.1); }
  50%       { transform: rotate(-2deg) scale(1.05); }
  75%       { transform: rotate(2deg) scale(1.08); }
}

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

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

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

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

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === CLASSES UTILITAIRES === */

.animate-fade-in  { animation: fadeIn  var(--transition) ease; }
.animate-slide-up { animation: slideUp var(--transition) ease; }
.animate-pulse-green { animation: pulseGreen 0.6s ease; }