/* animations.css — EVAPS Guadeloupe — WEB-242 */

/* ─── REDUCED MOTION GUARD (WCAG 2.3.1) ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── KEYFRAMES ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.45); }
  55%       { box-shadow: 0 0 0 12px rgba(225, 29, 72, 0); }
}

@keyframes iconPop {
  0%   { transform: scale(0.5); }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ─── ANIMATIONS (désactivées si prefers-reduced-motion: reduce) ─── */
@media (prefers-reduced-motion: no-preference) {

  /* 1. HERO — cascade de fade-in au-dessus de la ligne de flottaison */
  .hero h1 {
    animation: fadeUp 0.65s ease both;
  }
  .hero .hero-lead {
    animation: fadeUp 0.65s ease 0.13s both;
  }
  .hero .hero-creole {
    animation: fadeUp 0.55s ease 0.24s both;
  }
  .hero .btn-secondary {
    animation: fadeUp 0.5s ease 0.36s both;
  }
  /* CTA téléphone : fade-in puis pulse unique pour attirer l'attention */
  .hero .btn-primary {
    animation: fadeUp 0.5s ease 0.24s both,
               heroPulse 0.6s ease-out 0.85s 1;
  }

  /* 2. PAGE HERO (pages intérieures) */
  .page-hero h1 {
    animation: fadeUp 0.65s ease both;
  }
  .page-hero .page-hero-lead {
    animation: fadeUp 0.6s ease 0.13s both;
  }
  .page-hero .btn {
    animation: fadeUp 0.5s ease 0.26s both;
  }
  .page-hero p:not(.page-hero-lead) {
    animation: fadeUp 0.5s ease 0.2s both;
  }

  /* 3. SERVICE CARDS — cascade scroll-driven (Chromium 115+)
        Fallback : IntersectionObserver + .reveal/.revealed de main.js reste actif */
  @supports (animation-timeline: view()) {
    .services-grid .service-card {
      opacity: 1;
      transform: none;
      transition: box-shadow 0.2s ease, transform 0.2s ease;
      animation: fadeUp linear both;
      animation-timeline: view(block);
      animation-range: entry 0% entry 45%;
    }
    .services-grid .service-card:nth-child(2) { animation-range: entry 10% entry 55%; }
    .services-grid .service-card:nth-child(3) { animation-range: entry 20% entry 65%; }
    .services-grid .service-card:nth-child(4) { animation-range: entry 30% entry 75%; }
  }

  /* 4. SERVICE CARD hover lift */
  .service-card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }
  .service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  /* 5. PRODUIT BLOCKS (produits.html) — scroll-driven fade-in */
  @supports (animation-timeline: view()) {
    .produit-block {
      animation: fadeUp linear both;
      animation-timeline: view(block);
      animation-range: entry 5% entry 40%;
    }
  }

  /* 6. FAQ ITEMS — hover accent + décalage latéral */
  /* Note : le collapse interactif nécessiterait du JS ou <details> — non présent dans ce markup */
  .faq-item {
    transition: background-color 0.22s ease, border-left-color 0.22s ease,
                transform 0.22s ease;
  }
  .faq-item:hover {
    background-color: #fff8f0;
    border-left-color: var(--color-accent);
    transform: translateX(4px);
  }

  /* 7. BOUTONS — hover lift global (toutes les pages) */
  .btn {
    transition: background-color 0.2s, color 0.2s, border-color 0.2s,
                transform 0.18s ease, box-shadow 0.18s ease;
  }
  .btn:hover,
  .btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  }

  /* 8. FOOTER NAV — underline glissant */
  .footer-nav a {
    position: relative;
    text-decoration: none;
  }
  .footer-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0.6rem;
    right: 0.6rem;
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
  }
  .footer-nav a:hover::after,
  .footer-nav a:focus-visible::after {
    transform: scaleX(1);
  }

  /* 9. STEP NUM — pop au survol (conseils.html) */
  .step-num {
    transition: transform 0.2s ease, background-color 0.2s ease;
  }
  .step:hover .step-num {
    transform: scale(1.12);
    background-color: var(--color-accent);
  }

  /* 10. ICON CHECK — pop scroll-driven */
  @supports (animation-timeline: view()) {
    .icon-check {
      animation: iconPop linear both;
      animation-timeline: view(block);
      animation-range: entry 20% entry 65%;
    }
  }

  /* 11. FOCUS VISIBLE — ring accent discret */
  :focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 3px;
  }

}