/**
 * Styles pour l'animation synchronisée et décalée du Vanish Slider.
 */

/* --- ÉTAT PAR DÉFAUT (ANIMATION D'ENTRÉE) --- */
/* C'est l'état final, quand tout est visible. */
.carousel-title,
.carousel-description,
.carousel-link-1,
.carousel-link-2,
.carousel-sticker {
  opacity: 1;
  transform: translateY(0);
  /* Définition de la transition et de son décalage pour l'ENTRÉE */
  transition: opacity 400ms ease-in-out, transform 400ms ease-in-out;
}

/* On définit le décalage pour l'animation d'ENTRÉE (cascade inversée) */
.carousel-link-1,
.carousel-link-2 {
  transition-delay: 0ms; /* Les boutons apparaissent en premier */
}
.carousel-description {
  transition-delay: 50ms; /* Puis la description */
}
.carousel-title {
  transition-delay: 100ms; /* Le titre en dernier */
}

/* --- ÉTAT DE TRANSITION (ANIMATION DE SORTIE) --- */
/* C'est l'état de "sortie", quand le carrousel change. */
.carousel-vanish.is-changing .carousel-title,
.carousel-vanish.is-changing .carousel-description,
.carousel-vanish.is-changing .carousel-link-1,
.carousel-vanish.is-changing .carousel-link-2,
.carousel-vanish.is-changing .carousel-sticker {
  opacity: 0;
  transform: translateY(-20px);
}

/* On redéfinit le décalage spécifiquement pour l'animation de SORTIE */
.carousel-vanish.is-changing .carousel-title {
  transition-delay: 0ms; /* Le titre disparaît en premier */
}
.carousel-vanish.is-changing .carousel-description {
  transition-delay: 50ms; /* Puis la description */
}
.carousel-vanish.is-changing .carousel-link-1,
.carousel-vanish.is-changing .carousel-link-2 {
  transition-delay: 100ms; /* Les boutons en dernier */
}

/* --- CLASSE POUR LES ÉLÉMENTS CACHÉS --- */
/* Cet état doit être identique à l'état de sortie pour une transition parfaite */
.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-20px) !important;
}