/* =============================
   🎬 ANIMATIONS ET TRANSITIONS
   =============================
   Fichier dédié aux animations dynamiques et transitions
   qui étaient précédemment gérées par des styles inline
*/

/* =============================
   🖼️ HERO SLIDESHOW - OPACITÉ DES SLIDES
   ============================= */

/* Slide actif (visible) */
.slide-active {
  opacity: 1;
  transition: opacity 500ms ease-in-out;
}

/* Slide inactif (caché) */
.slide-inactive {
  opacity: 0;
  transition: opacity 500ms ease-in-out;
}

/* Désactivation des animations si préférées réduites */
@media (prefers-reduced-motion: reduce) {
  .slide-active,
  .slide-inactive {
    transition: none;
  }
}

/* =============================
   📊 BARRE DE PROGRESSION - WIDTH DYNAMIQUE
   ============================= */

/* Barre de progression avec largeur dynamique */
.progress-bar {
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  transition: width 0.3s ease-linear;
}

/* =============================
   🎯 TRANSITIONS CONDITIONNELLES
   ============================= */

/* Transition standard */
.transition-standard {
  transition: opacity 500ms ease-in-out;
}

/* Transition rapide */
.transition-fast {
  transition: opacity 200ms ease-in-out;
}

/* Transition lente */
.transition-slow {
  transition: opacity 800ms ease-in-out;
}

/* =============================
   🔄 ÉTATS D'ANIMATION
   ============================= */

/* État initial */
.animate-initial {
  opacity: 0;
  transform: translateY(20px);
}

/* État final */
.animate-final {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.5s ease-out;
}

/* =============================
   📱 RESPONSIVE ANIMATIONS
   ============================= */

@media (max-width: 768px) {
  .slide-active,
  .slide-inactive {
    transition: opacity 300ms ease-in-out;
  }
  
  .transition-standard {
    transition: opacity 300ms ease-in-out;
  }
}

@media (max-width: 480px) {
  .slide-active,
  .slide-inactive {
    transition: opacity 200ms ease-in-out;
  }
  
  .transition-standard {
    transition: opacity 200ms ease-in-out;
  }
}