/* ============================================
   ANIMATIONS.CSS — Animations au défilement
   Transitions d'entrée, délais progressifs,
   compteur, et respect des préférences utilisateur
   ============================================ */

/* ---- État de base : éléments masqués avant animation ---- */
[data-anim] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

/* ---- État visible : éléments révélés ---- */
[data-anim].visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* ---- Variantes d'animation ---- */

/* Fondu vers le haut (par défaut) */
[data-anim='fade-up'] {
  opacity: 0;
  transform: translateY(24px);
}

/* Fondu simple (opacité seule) */
[data-anim='fade-in'] {
  opacity: 0;
  transform: none;
}

[data-anim='fade-in'].visible {
  opacity: 1;
}

/* Glissement depuis la gauche */
[data-anim='slide-left'] {
  opacity: 0;
  transform: translateX(-24px);
}

[data-anim='slide-left'].visible {
  opacity: 1;
  transform: translateX(0);
}

/* Glissement depuis la droite */
[data-anim='slide-right'] {
  opacity: 0;
  transform: translateX(24px);
}

[data-anim='slide-right'].visible {
  opacity: 1;
  transform: translateX(0);
}

/* Mise à l'échelle */
[data-anim='scale'] {
  opacity: 0;
  transform: scale(0.95);
}

[data-anim='scale'].visible {
  opacity: 1;
  transform: scale(1);
}

/* ---- Délais progressifs (échelonnement) ---- */
[data-anim-delay='1'] {
  transition-delay: 0.1s;
}

[data-anim-delay='2'] {
  transition-delay: 0.2s;
}

[data-anim-delay='3'] {
  transition-delay: 0.3s;
}

[data-anim-delay='4'] {
  transition-delay: 0.4s;
}

[data-anim-delay='5'] {
  transition-delay: 0.5s;
}

[data-anim-delay='6'] {
  transition-delay: 0.6s;
}

/* ---- Animation du compteur ---- */
@keyframes count-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.counter__number[data-counted] {
  animation: count-up 0.8s var(--ease) forwards;
}

/* ---- Animation de pulsation (utilisée par le CTA flottant) ---- */
@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgb(30 58 95 / 40%);
  }

  50% {
    box-shadow: 0 0 0 12px rgb(30 58 95 / 0%);
  }
}

/* ---- Animation de rotation (chargement) ---- */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--c-border);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ---- Accessibilité : respect de prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  /* Désactivation de toutes les animations et transitions */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Affichage immédiat des éléments animés */
  [data-anim] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  [data-anim-delay='1'],
  [data-anim-delay='2'],
  [data-anim-delay='3'],
  [data-anim-delay='4'],
  [data-anim-delay='5'],
  [data-anim-delay='6'] {
    transition-delay: 0s;
  }

  .counter__number[data-counted] {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .spinner {
    animation: none;
  }
}