/* ==========================================================================
   ANIMATIONS — apparitions au défilement, keyframes, accessibilité
   ========================================================================== */

/* --- Apparition au défilement ---------------------------------------------
   Usage : <div data-reveal>            → glisse vers le haut
           <div data-reveal="fade">     → fondu simple
           <div data-reveal="scale">    → fondu + zoom
           <div data-reveal="left">     → arrive de la gauche
           <div data-reveal="right">    → arrive de la droite
           <div data-reveal="clip">     → dévoilement par masque
           <div data-reveal-group>      → anime ses enfants en cascade
   ------------------------------------------------------------------------- */
/* Les états masqués ne s'appliquent que si JavaScript a démarré : sans lui,
   le contenu reste lisible (et indexable) tel quel.                        */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity .9s var(--ease-out) var(--delay, 0s),
    transform 1.05s var(--ease-out) var(--delay, 0s),
    clip-path 1.1s var(--ease-out) var(--delay, 0s),
    filter .9s var(--ease-out) var(--delay, 0s);
  will-change: opacity, transform;
}
[data-reveal="fade"]  { transform: none; }
[data-reveal="scale"] { transform: scale(.94) translate3d(0, 24px, 0); }
[data-reveal="left"]  { transform: translate3d(-44px, 0, 0); }
[data-reveal="right"] { transform: translate3d(44px, 0, 0); }
[data-reveal="clip"]  {
  transform: none;
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  filter: blur(6px);
}
[data-reveal="blur"]  { filter: blur(10px); transform: translate3d(0, 20px, 0); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  filter: none;
}

/* Cascade automatique sur les enfants directs */
.js [data-reveal-group] > * {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity .85s var(--ease-out), transform 1s var(--ease-out);
}
[data-reveal-group].is-visible > * {
  opacity: 1;
  transform: none;
}
[data-reveal-group].is-visible > *:nth-child(1)  { transition-delay: .00s; }
[data-reveal-group].is-visible > *:nth-child(2)  { transition-delay: .07s; }
[data-reveal-group].is-visible > *:nth-child(3)  { transition-delay: .14s; }
[data-reveal-group].is-visible > *:nth-child(4)  { transition-delay: .21s; }
[data-reveal-group].is-visible > *:nth-child(5)  { transition-delay: .28s; }
[data-reveal-group].is-visible > *:nth-child(6)  { transition-delay: .35s; }
[data-reveal-group].is-visible > *:nth-child(7)  { transition-delay: .42s; }
[data-reveal-group].is-visible > *:nth-child(8)  { transition-delay: .49s; }
[data-reveal-group].is-visible > *:nth-child(n+9){ transition-delay: .56s; }

/* Titres découpés en lignes (rempli par le JS) ----------------------------- */
.split { display: block; }
.split-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.split-line > span {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform 1.05s var(--ease-out);
  transition-delay: calc(var(--i, 0) * .075s);
}
.is-visible .split-line > span,
.split.is-visible .split-line > span { transform: none; }

/* Effet de parallaxe léger ------------------------------------------------- */
[data-parallax] { will-change: transform; }

/* --- Keyframes ------------------------------------------------------------ */
@keyframes fadeUp {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes lineIn {
  from { opacity: 0; transform: translate3d(0, 105%, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes heroDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.04); }
}

@keyframes scrollCue {
  0%, 100% { transform: scaleY(.35); opacity: .4; transform-origin: top; }
  50%      { transform: scaleY(1);   opacity: 1;  transform-origin: top; }
}

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes panelIn {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes ping {
  0%   { transform: scale(.6); opacity: .9; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

@keyframes spinSlow {
  to { transform: rotate(360deg); }
}

/* --- Accessibilité : mouvement réduit ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal],
  [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }
  .split-line > span,
  .hero-line > span { transform: none !important; opacity: 1 !important; }
  .hero-eyebrow, .hero-bottom, .hero-scroll { opacity: 1 !important; }
  /* plutot que de sauter a la fin en 0,01 ms, le bandeau reste au debut */
  .marquee-track { animation: none !important; }
  .marquee { overflow-x: auto; }
  .stack-hint { display: none; }
  .stack { height: auto !important; }
  .stack-sticky { position: static; height: auto; padding-block: 4rem; }
  .stack-cards { min-height: 0; display: grid; gap: 1rem; }
  .stack-cards { padding-top: 0; }
  .stack-card {
    position: static;
    inset: auto;
    grid-area: auto;              /* les tuiles se suivent au lieu de s'empiler */
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    pointer-events: auto;
  }
}