/* ==========================================================================
   ✨ ANIMATIONS GLOBALES – Apparitions, SVG, flottements
   ========================================================================== */

/* 🌫️ Apparition simple (fade-in) */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 1s ease-out forwards;
}

/* 🪄 Apparition décalée vers le haut */
.stagger-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeIn 0.8s ease-out forwards;
  animation-delay: 0.2s;
}

/* 🕰️ Apparition lente avec délai */
.delayed-fade-in {
  opacity: 0;
  animation: fadeIn 1.5s ease-out forwards;
  animation-delay: 0.4s;
}

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

/* ==========================================================================
   🧬 TRAÇAGE SVG – Animation pour ligne SVG (ex. feature-line)
   ========================================================================== */

.draw-line path {
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: drawLine 2s ease-out forwards;
  will-change: stroke-dashoffset;
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

/* ==========================================================================
   🫧 FLOTTEMENT – Animation fluide verticale
   ========================================================================== */

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(var(--float-y, -10px)); }
}

.float {
  animation: float 3s ease-in-out infinite;
  will-change: transform;
}

/* 👻 Variante utilisée pour l'image 404 */
.error-wave {
  --float-y: -6px;
  animation: float 3s ease-in-out infinite;
}

/* ==========================================================================
   ♿ ACCESSIBILITÉ – Réduction des animations
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   🔁 ROTATION – Pour icônes ou loaders
   ========================================================================== */

.rotate-hover {
  transition: transform 0.4s ease;
}

.rotate-hover:hover {
  transform: rotate(360deg);
}

/* ==========================================================================
   ⬆️ FADE-UP – Apparition du bas vers le haut
   ========================================================================== */

.fade-up {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 0.8s ease-out forwards;
}

.fade-up-delayed {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 0.8s ease-out forwards;
  animation-delay: 0.3s;
}

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