/* ============================================================
   NEXIA — animations.css
   Système d'animation unifié — choreography first
   Étape 1 (hero) : foundation classes + hero video scale
   Tous les states sont gated par html.js → no-FOUC, JS-off safe.
   ============================================================ */

:root {
  --rv-dur:     700ms;
  --rv-ease:    cubic-bezier(.16,1,.3,1);
  --rv-dist:    30px;
  --rv-blur:    8px;
  --rv-stagger: 100ms;
}

/* ---------- Reveal — états initiaux (gated html.js) ---------- */
html.js .reveal-up,
html.js .reveal-left,
html.js .reveal-right,
html.js .reveal-scale,
html.js .reveal-blur {
  opacity: 0;
  transition:
    opacity   var(--rv-dur) var(--rv-ease),
    transform var(--rv-dur) var(--rv-ease),
    filter    var(--rv-dur) var(--rv-ease);
  will-change: transform, opacity;
}
html.js .reveal-up    { transform: translateY(var(--rv-dist)); }
html.js .reveal-left  { transform: translateX(calc(-1 * var(--rv-dist))); }
html.js .reveal-right { transform: translateX(var(--rv-dist)); }
html.js .reveal-scale { transform: scale(.95); }
html.js .reveal-blur  { filter: blur(var(--rv-blur)); }

/* ---------- État "in" (ajouté par animations.js) ---------- */
html.js .reveal-up.is-in,
html.js .reveal-left.is-in,
html.js .reveal-right.is-in,
html.js .reveal-scale.is-in,
html.js .reveal-blur.is-in {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

/* ---------- Stagger via data-delay (multiples de 80ms) ---------- */
html.js [data-delay="1"] { transition-delay:  80ms; }
html.js [data-delay="2"] { transition-delay: 160ms; }
html.js [data-delay="3"] { transition-delay: 240ms; }
html.js [data-delay="4"] { transition-delay: 320ms; }
html.js [data-delay="5"] { transition-delay: 400ms; }
html.js [data-delay="6"] { transition-delay: 480ms; }
html.js [data-delay="7"] { transition-delay: 560ms; }
html.js [data-delay="8"] { transition-delay: 640ms; }

/* ---------- Stagger automatique sur enfants d'un container [data-stagger]
   animations.js ajoute --i sur chaque enfant ---------- */
html.js [data-stagger] > * {
  transition-delay: calc(var(--i, 0) * var(--rv-stagger));
}

/* ---------- Hero video — scale-in cinématique (1.05 → 1, 1.8s) ----------
   CSS-only, pas d'opacité pour rester safe LCP.
   Tourne automatiquement au load, n'est pas piloté par observer. */
@keyframes nexiaHeroVideoEnter {
  from { transform: scale(1.05); }
  to   { transform: scale(1);    }
}
html.js .hero__video {
  animation: nexiaHeroVideoEnter 1.8s var(--rv-ease) both;
}

/* ---------- prefers-reduced-motion (priorité absolue) ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal-up,
  html.js .reveal-left,
  html.js .reveal-right,
  html.js .reveal-scale,
  html.js .reveal-blur {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  html.js .hero__video { animation: none !important; }
}