/**
 * Scroll Reveal — basé sur le tuto Grafikart
 * https://grafikart.fr/tutoriels/scroll-reveal-1176
 *
 * Utilisation :
 * - Mettre la classe "reveal" sur le conteneur parent
 * - Mettre une classe "reveal-1", "reveal-2", "reveal-3"... sur les enfants
 *   à faire apparaître (le chiffre gère le délai en cascade)
 *
 * Version "animation" (plutôt que transition) : permet de garder l'état
 * initial figé tant que .reveal est présent, et respecte prefers-reduced-motion.
 */

 .reveal-loaded .reveal [class*="reveal-"] {
  opacity: 0 !important;
  animation: none !important;
  transition: 0s !important;
}

.reveal-loaded .reveal [class*="reveal-"] {
  opacity: 0 !important;
  animation: none !important;
  transition: 0s !important;
}
 
.reveal-loaded [class*="reveal-"] {
  animation: revealAnimation 1s cubic-bezier(.5, 0, 0, 1) both;
}
 
/* Délais pour l'effet cascade */
.reveal-loaded .reveal-2 {
  animation-delay: .4s;
}
 
.reveal-loaded .reveal-3 {
  animation-delay: .8s;
}
 
.reveal-loaded .reveal-4 {
  animation-delay: 1.2s;
}
 
.reveal-loaded .reveal-5 {
  animation-delay: 1.6s;
}

@keyframes revealAnimation {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* Accessibilité : désactive l'animation si l'utilisateur préfère moins de mouvement */
@media (prefers-reduced-motion: reduce) {
  .reveal-loaded [class*="reveal-"] {
    animation: none !important;
  }
}