/* ==========================================================================
   #ANIMATIONS
   ========================================================================== */

/**
 * Variables pour les animations
 */
:root {
  --animation-duration: 0.6s;
  --animation-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --animation-stagger: 0.1s;
}

/* ==========================================================================
   #KEYFRAMES
   ========================================================================== */

/**
 * Fade In Up
 * Fait apparaître un élément en le faisant glisser vers le haut
 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/**
 * Fade In Down
 * Fait apparaître un élément en le faisant glisser vers le bas
 */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/**
 * Slide In Left
 * Fait glisser un élément depuis la gauche
 */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translate3d(-50px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/**
 * Slide In Right
 * Fait glisser un élément depuis la droite
 */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translate3d(50px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/**
 * Zoom In
 * Fait apparaître un élément en zoomant légèrement
 */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.95, 0.95, 0.95);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

/**
 * Pulse
 * Animation de pulsation pour attirer l'attention
 */
@keyframes pulse {
  0% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

/**
 * Float
 * Animation de flottement léger
 */
@keyframes float {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -10px, 0);
  }
}

/* ==========================================================================
   #ANIMATION CLASSES
   ========================================================================== */

/**
 * Classe de base pour les éléments animés
 * Masque l'élément par défaut, il sera révélé par JavaScript
 */
.animate-on-scroll {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.6s var(--animation-easing),
              transform 0.6s var(--animation-easing);
}

/**
 * Animation de base - Fade In
 */
.animate-fade-in {
  animation: fadeInUp var(--animation-duration) var(--animation-easing) forwards;
}

/**
 * Animation de défilement vers le haut
 */
.animate-fade-in-up {
  animation: fadeInUp var(--animation-duration) var(--animation-easing) forwards;
}

/**
 * Animation de défilement vers le bas
 */
.animate-fade-in-down {
  animation: fadeInDown var(--animation-duration) var(--animation-easing) forwards;
}

/**
 * Animation de glissement depuis la gauche
 */
.animate-slide-in-left {
  animation: slideInLeft var(--animation-duration) var(--animation-easing) forwards;
}

/**
 * Animation de glissement depuis la droite
 */
.animate-slide-in-right {
  animation: slideInRight var(--animation-duration) var(--animation-easing) forwards;
}

/**
 * Animation de zoom
 */
.animate-zoom-in {
  animation: zoomIn var(--animation-duration) var(--animation-easing) forwards;
}

/**
 * Animation de pulsation
 */
.animate-pulse {
  animation: pulse 2s infinite;
}

/**
 * Animation de flottement
 */
.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* ==========================================================================
   #ANIMATION DELAYS
   ========================================================================== */

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1s; }

/* ==========================================================================
   #ANIMATION DURATIONS
   ========================================================================== */

.duration-200 { animation-duration: 0.2s; }
.duration-300 { animation-duration: 0.3s; }
.duration-400 { animation-duration: 0.4s; }
.duration-500 { animation-duration: 0.5s; }
.duration-600 { animation-duration: 0.6s; }
.duration-700 { animation-duration: 0.7s; }
.duration-800 { animation-duration: 0.8s; }
.duration-900 { animation-duration: 0.9s; }
.duration-1000 { animation-duration: 1s; }

/* ==========================================================================
   #ANIMATION FILL MODES
   ========================================================================== */

.animate-forwards { animation-fill-mode: forwards; }
.animate-backwards { animation-fill-mode: backwards; }
.animate-both { animation-fill-mode: both; }

/* ==========================================================================
   #PREFERENCES UTILISATEUR
   ========================================================================== */

/**
 * Désactive les animations pour les utilisateurs qui préfèrent les réductions de mouvement
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* Animation au scroll */
.animate-on-scroll {
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: none !important;
}