/* ==========================================================================
   Animations et Transitions
   ========================================================================== */

/* Animation de base fadeUp */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Classes utilitaires pour l'observer JS */
.animate-on-scroll {
  opacity: 0; /* Invisible au départ */
}

.animate-on-scroll.is-visible {
  animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Décalages (staggering) pour les éléments dans une grille */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

/* Cas spécifique pour que le premier élément visible apparaisse plus vite si non retardé */
.animate-on-scroll.is-visible:not(.stagger-1):not(.stagger-2):not(.stagger-3):not(.stagger-4) {
  animation-delay: 0s;
}

/* ==========================================================================
   Micro-interactions additionnelles
   ========================================================================== */

/* Blob flottants continus */
@keyframes float {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-15px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

/* Appliqué au hero-image pour lui donner un côté magique/vivant */
.hero-image {
  animation: float 6s ease-in-out infinite;
}

/* Badge pulse effect */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(196, 149, 106, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(196, 149, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(196, 149, 106, 0); }
}

.about-badge {
  animation: pulse 3s infinite;
}