/* =========================================================================
   Kara home v3 — MOTION (Phase 3). Sobre, premium, niveau agence.
   Principe : le motion s'AJOUTE par-dessus un design qui tient déjà.
     • Sans JS  → la classe html.ks-motion n'est jamais posée → tout visible.
     • reduced-motion → la classe n'est jamais posée (cf. script inline) → tout visible.
     • Échec JS → html.ks-reveal-all force l'affichage (jamais de section invisible).
   transform + opacity uniquement. Aucune propriété de layout animée.
   ========================================================================= */

.kara-home { --rev-dur: .55s; }

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

  /* ----------------------------------------------------------------------
     HERO — le seul « moment ». Séquence CSS (joue dès le 1er paint, sans
     attendre le JS : ne retarde pas le LCP au-delà de sa propre durée).
     ---------------------------------------------------------------------- */
  /* LCP-safe : le h1 (élément LCP) rend à pleine opacité tout de suite,
     il ne fait qu'une montée légère (transform only) → LCP jamais masqué. */
  html.ks-motion .kh-hero h1            { animation: khRiseSolid .5s var(--ks-ease-out) both; }
  html.ks-motion .kh-hero .kh-sub       { animation: khRise .55s var(--ks-ease-out) .16s both; }
  html.ks-motion .kh-hero .kh-hero-cta  { animation: khRise .55s var(--ks-ease-out) .32s both; }
  html.ks-motion .kh-hero .kh-photo-slot{ animation: khFade .8s  var(--ks-ease-out) .28s both; }

  /* Finale : le mot accentué « appeler » se souligne en dernier. */
  html.ks-motion .kh-hero h1 .accent { position: relative; }
  html.ks-motion .kh-hero h1 .accent::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -.04em; height: 2px;
    background: var(--ks-mint); transform: scaleX(0); transform-origin: left;
    animation: khUnderline .5s var(--ks-ease-out) .62s both;
  }

  /* ----------------------------------------------------------------------
     REVEALS au scroll — état initial posé par CSS (sur des classes déjà
     présentes : aucun flash). Le JS ne fait qu'ajouter .is-in (une fois).
     ---------------------------------------------------------------------- */
  html.ks-motion :where(
    .kh-notice .kh-wrap > *,
    .kh-proof .kh-wrap > span,
    .kh-section > .kh-wrap > .kh-head,
    .kh-why-grid > *,
    .kh-cards > *,
    .kh-pricing-grid > *,
    .kh-pricing-note,
    .kh-figures-grid > *,
    .kh-reviews-grid > *,
    .kh-manifesto-grid > *,
    .kh-statement .kh-wrap > *,
    .kh-cta .kh-wrap > *,
    .kh-footer-cols > *,
    .kh-footer-legal
  ) {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--rev-dur) var(--ks-ease-out),
                transform var(--rev-dur) var(--ks-ease-out);
  }
  html.ks-motion .is-in { opacity: 1; transform: none; }
}

/* Failsafe : si le JS de motion n'a pas confirmé (réseau coupé, erreur),
   on révèle tout après 4 s (cf. script inline). Jamais de contenu bloqué. */
html.ks-reveal-all :where(
  .kh-notice .kh-wrap > *,
  .kh-proof .kh-wrap > span,
  .kh-section > .kh-wrap > .kh-head,
  .kh-why-grid > *,
  .kh-cards > *,
  .kh-pricing-grid > *,
  .kh-pricing-note,
  .kh-figures-grid > *,
  .kh-cta .kh-wrap > *,
  .kh-footer-cols > *,
  .kh-footer-legal
) { opacity: 1 !important; transform: none !important; }

/* Hover-motion gaté : sur appareils sans vrai survol (tactile), on neutralise
   les effets de transform au survol pour éviter le hover « collant ». Les
   changements de couleur au survol restent (inoffensifs au tap). */
@media (hover: none), (pointer: coarse) {
  .kara-home a.kh-card:hover { transform: none; }
  .kara-home .kh-textlink:hover::after,
  .kara-home a.kh-card:hover .kh-more::after { transform: none; }
  .kara-home .kh-nav a:hover::after { transform: scaleX(0); }
}

@keyframes khRise      { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes khRiseSolid { from { transform: translateY(14px); } to { transform: none; } }
@keyframes khFade      { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes khUnderline { to { transform: scaleX(1); } }