/* ============================================================
   ANIMATIONS.CSS — Keyframes et micro-interactions
   Emil design-eng: uniquement transform + opacity, ease-out pour entrée
   ============================================================ */

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

/* Pulsation du dot "Ouvert" */
@keyframes pulse-dot {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%       { opacity: 0.4; transform: scale(0.75); }
}

/* Entrée slide-up pour le hero */
@keyframes slide-up-fade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== STATUT OUVERT ===== */
.nav-status--open .status-dot {
  animation: pulse-dot 2.2s ease-in-out infinite;
}

/* ===== HERO — entrées séquencées ===== */
.hero-eyebrow {
  animation: slide-up-fade 0.55s var(--ease-out) 0.08s both;
}

.hero-title {
  animation: slide-up-fade 0.65s var(--ease-out) 0.18s both;
}

.hero-desc {
  animation: slide-up-fade 0.65s var(--ease-out) 0.30s both;
}

.hero-cta {
  animation: slide-up-fade 0.65s var(--ease-out) 0.44s both;
}

/* ===== HOVER SUR LES BOUTONS (feedback press) ===== */
/* Déjà géré via transition transform dans components.css */

/* ===== HOVER SUR LA NAV — trait animé ===== */
/* Géré dans layout.css */

/* ===== prefers-reduced-motion ===== */
@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;
  }

  /* Le scroll-reveal passe directement à l'état visible */
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}