/* ============================================================
   animations.css — Nat' Esthétique · WebStudio Caraïbes
   Couche animation additive — ne modifie aucun sélecteur de layout
   ============================================================ */

/* ── Kill-switch accessibilité ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  /* Assure que les éléments fade-in restent visibles */
  .fade-in {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Toutes les animations sous no-preference ──────────────── */
@media (prefers-reduced-motion: no-preference) {

  /* ── 1. HERO ENTRANCE — stagger fade-up au chargement ────── */
  @keyframes nat-fade-up {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .hero h1 {
    animation: nat-fade-up .65s ease both;
    animation-delay: .05s;
  }
  .hero .tagline {
    animation: nat-fade-up .65s ease both;
    animation-delay: .22s;
  }
  .hero .hero-desc {
    animation: nat-fade-up .65s ease both;
    animation-delay: .38s;
  }
  .hero .btn-group {
    animation: nat-fade-up .65s ease both;
    animation-delay: .54s;
  }
  .hero .hero-img {
    animation: nat-fade-up .7s ease both;
    animation-delay: .7s;
  }

  /* ── 2. SCROLL REVEAL — stagger cartes (transition CSS) ───── */
  /* Les cards ont déjà transition: via style.css ; on ajoute le délai */
  .card-grid .card:nth-child(1) { transition-delay: 0s; }
  .card-grid .card:nth-child(2) { transition-delay: .1s; }
  .card-grid .card:nth-child(3) { transition-delay: .2s; }

  /* ── 3. BOUTONS — lift + ombre au survol ─────────────────── */
  .btn {
    transition: background .2s, color .2s, border-color .2s,
                transform .18s ease, box-shadow .18s ease;
  }
  .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
  }
  .btn:active {
    transform: scale(.97) translateY(0);
    box-shadow: none;
  }

  /* ── 4. FOCUS VISIBLE — ring animé avec offset ───────────── */
  :focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 3px;
    border-radius: 4px;
    transition: outline-offset .15s ease;
  }
  :focus-visible:not(:active) {
    outline-offset: 5px;
  }

  /* ── 5. NAV — soulignement animé (desktop uniquement) ──────── */
  @media (min-width: 1024px) {
    .site-nav a {
      position: relative;
    }
    .site-nav a::after {
      content: '';
      position: absolute;
      bottom: -3px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--color-accent);
      border-radius: 1px;
      transition: width .25s ease;
    }
    .site-nav a:hover::after,
    .site-nav a[aria-current="page"]::after {
      width: 100%;
    }
  }

  /* ── 6. CARTES — transition enrichie ─────────────────────── */
  .card {
    transition: box-shadow .25s ease, transform .25s ease;
  }

  /* ── 7. LOGO — micro-scale au survol ─────────────────────── */
  .site-logo img {
    transition: transform .22s ease;
  }
  .site-logo:hover img {
    transform: scale(1.04);
  }

  /* ── 8. FOOTER LIENS — transition couleur + spacing ────────── */
  .footer-col a {
    transition: color .2s ease, letter-spacing .15s ease;
  }
  .footer-col a:hover {
    letter-spacing: .01em;
  }

  /* ── 9. SECTION-TITLE h2 — slide doux depuis le bas ─────────
     (via .fade-in géré par main.js IntersectionObserver)
     On ajoute une variante directionnelle pour les titres de section */
  .section-title .fade-in,
  .section-title h2 {
    transition: opacity .55s ease, transform .55s ease;
  }

  /* ── 10. FORMULAIRE — focus border animate ──────────────────  */
  .form-group input,
  .form-group select,
  .form-group textarea {
    transition: border-color .22s ease, box-shadow .22s ease, transform .15s ease;
  }
  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    transform: translateY(-1px);
  }

  /* ── 11. CTA BANNER — apparition des boutons groupés ──────── */
  .cta-banner .btn-group {
    animation: nat-fade-up .5s ease both;
    animation-delay: .1s;
  }

  /* ── 12. PAGE-HERO — slide h1 sur pages internes ─────────── */
  .page-hero h1 {
    animation: nat-fade-up .6s ease both;
    animation-delay: .05s;
  }
  .page-hero p {
    animation: nat-fade-up .6s ease both;
    animation-delay: .2s;
  }

}