/* =====================================================================
   Animations — états de révélation au défilement + keyframes
   (GSAP pilote la plupart ; ces classes servent de repli/no-JS)
   ===================================================================== */

/* État initial des éléments révélés (si JS actif, la classe .js masque) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.js [data-reveal-delay="1"].is-in { transition-delay: 90ms; }
.js [data-reveal-delay="2"].is-in { transition-delay: 180ms; }
.js [data-reveal-delay="3"].is-in { transition-delay: 270ms; }
.js [data-reveal-delay="4"].is-in { transition-delay: 360ms; }

/* Révélation par masque (pour titres) */
.js [data-reveal="mask"] { transform: translateY(110%); opacity: 1; }
.reveal-mask { overflow: hidden; display: block; }

@keyframes cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(240%); }
  100% { transform: translateY(240%); }
}

/* Tracé SVG qui se dessine */
.draw-path {
  stroke-dasharray: var(--len, 2000);
  stroke-dashoffset: var(--len, 2000);
}
.draw-path.is-drawn {
  animation: draw 2.6s var(--ease-out) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Pulsation douce (jalons/pics) */
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.6); opacity: 0.55; }
}
.pulse { animation: pulse-dot 2.4s var(--ease-in-out) infinite; transform-box: fill-box; transform-origin: center; }

/* Compteur : léger fondu pendant l'incrément */
.counting { color: var(--signal); }