/* ============================================================
   ANIMATIONS — animations.css
   Convention : CSS pur pour toutes les transitions standard.
   JS uniquement pour les orchestrations complexes
   (séquences, timings dynamiques, animations liées au scroll).
   ============================================================ */

/* ----------------------------------------------------------
   KEYFRAMES
   ---------------------------------------------------------- */

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

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

@keyframes skeleton-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ----------------------------------------------------------
   CLASSES UTILITAIRES
   Usage : <div class="animate-fade-in"> ou via Stimulus
   pour déclencher l'animation au bon moment.
   ---------------------------------------------------------- */

.animate-fade-in {
  animation: fade-in var(--duration-normal) var(--easing-out) both;
}

.animate-fade-out {
  animation: fade-out var(--duration-normal) var(--easing-in) both;
}

.animate-slide-down {
  animation: slide-down var(--duration-normal) var(--easing-out) both;
}

.animate-slide-up {
  animation: slide-up var(--duration-normal) var(--easing-out) both;
}

.animate-scale-in {
  animation: scale-in var(--duration-normal) var(--easing-spring) both;
}

.animate-pulse {
  animation: pulse var(--duration-slow) var(--easing-default) infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Modificateurs de durée */
.animate-fast   { animation-duration: var(--duration-fast); }
.animate-slow   { animation-duration: var(--duration-slow); }

/* ----------------------------------------------------------
   RESPECT DE prefers-reduced-motion
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }
}