/* CHOICE HAIR — WEB-1995 Animation pass
   Toutes les règles sont encapsulées dans prefers-reduced-motion: no-preference.
   Le garde-fou reduce ci-dessous neutralise toute animation résiduelle. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) {

  /* ── 1. Hero — entrée étagée au chargement de page ──
     S'applique uniquement à index.html (seule page avec .hero).
     fill-mode: both garantit que l'élément reste invisible avant le début. */
  @keyframes ch-slide-up {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
  }

  .hero-tagline {
    animation: ch-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .hero-content h1 {
    animation: ch-slide-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
  }
  .hero-lead {
    animation: ch-slide-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
  }
  .hero-actions {
    animation: ch-slide-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
  }

  /* ── 2. Cartes — hover lift ──
     On utilise la propriété CSS individuelle `translate` (distincte de `transform`)
     pour ne pas interférer avec la transition transform du fade-in JS. */
  .feature-card,
  .service-card {
    transition: translate 0.2s ease, box-shadow 0.2s ease;
  }
  .feature-card:hover {
    translate: 0 -3px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
  }
  .service-card:hover {
    translate: 0 -3px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
  }
  /* focus-visible : ring distinct pour clavier */
  .feature-card:focus-visible,
  .service-card:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
  }

  /* ── 3. Visual placeholder — shimmer dégradé glissant ──
     background-size agrandi pour que la position puisse varier visiblement.
     Pas de CLS : aspect-ratio du placeholder reste intact. */
  @keyframes ch-shimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .visual-placeholder {
    background-size: 250% 250%;
    animation: ch-shimmer 6s ease infinite;
  }

  /* ── 4. Compteurs — fondu d'entrée (la valeur finale est déjà dans le DOM,
     le count-up JS est un enrichissement ; si JS est absent la valeur reste lisible) ── */
  .stat__number {
    display: inline-block;
    transition: opacity 0.4s ease;
  }

  /* ── 5. Révélation sections au scroll ──
     La classe .reveal-on-scroll est ajoutée par JS (main.js) sur .cta-section et
     .page-header. L'IntersectionObserver pose ensuite .is-visible pour déclencher
     la transition. Le contenu est toujours dans le DOM — aucune gate de lecture. */
  .reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal-on-scroll.is-visible {
    opacity: 1;
    transform: none;
  }

}