/* ==========================================================================
   animations.css — Animations sobres au scroll
   Respecte prefers-reduced-motion (cf. reset.css).
   Volontairement minimaliste : pas d'effets flashy.
   ========================================================================== */

/* Scroll fluide pour ancres internes */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Reveal au scroll (ajouté par reveal.js via IntersectionObserver) */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variantes */
.reveal--fade {
  transform: none;
}

.reveal--up {
  transform: translateY(24px);
}

/* Délais (pour cascade légère) */
.reveal[data-delay="100"] { transition-delay: 100ms; }
.reveal[data-delay="200"] { transition-delay: 200ms; }
.reveal[data-delay="300"] { transition-delay: 300ms; }
.reveal[data-delay="400"] { transition-delay: 400ms; }

/* Spinner discret (pour bouton submit en cours) */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Fade in simple (utilisable manuellement) */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fade-in 400ms ease both;
}

/* ==========================================================================
   Apparition du hero au chargement (sans attendre le scroll)
   ========================================================================== */

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-fade-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

.hero__eyebrow,
.hero__title,
.hero__lede,
.hero__cta,
.hero__micro,
.hero__search,
.hero__trust {
  animation: hero-fade-up 700ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.hero__title    { animation-delay: 80ms; }
.hero__lede     { animation-delay: 160ms; }
.hero__cta      { animation-delay: 240ms; }
.hero__micro    { animation-delay: 320ms; }
.hero__search   { animation-delay: 400ms; }
.hero__trust    { animation-delay: 500ms; }

.hero__visual {
  animation: hero-fade-right 800ms cubic-bezier(0.4, 0, 0.2, 1) 200ms both;
}

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow, .hero__title, .hero__lede, .hero__cta,
  .hero__micro, .hero__search, .hero__trust, .hero__visual {
    animation: none;
  }
}

/* ==========================================================================
   Micro-interactions globales — boutons, cartes, liens
   ========================================================================== */

/* Tous les boutons reçoivent une élévation au survol */
.btn--primary:hover,
.btn--secondary:hover {
  transform: translateY(-1px);
}

.btn--primary:active,
.btn--secondary:active {
  transform: translateY(0);
}

/* Les cartes catalogue / homepage liftent légèrement */
.card:hover,
.need-card:hover,
.why-card:hover,
.about-block:hover {
  transform: translateY(-3px);
}

.card,
.need-card,
.why-card,
.about-block {
  transition: transform var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary:hover, .btn--secondary:hover,
  .card:hover, .need-card:hover, .why-card:hover, .about-block:hover {
    transform: none;
  }
}

/* Effet "underline animé" sur les liens du footer et drawer mobile */
.site-nav__link {
  position: relative;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 4px;
  height: 2px;
  background-color: var(--color-cta);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-base);
}

.site-nav__link:hover::after,
.site-nav__link.is-active::after {
  transform: scaleX(1);
}