/* ============================================================
   SUPRADRAMA — scroll_reveal.css
   Reveal animations au scroll via IntersectionObserver
   Respecte prefers-reduced-motion
   ============================================================ */

/* ── État initial : éléments cachés avant reveal ──────────── */
.sr {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity  0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

/* Variante montée plus douce (cartes latérales) */
.sr--up {
  transform: translateY(32px);
}

/* Variante légère (éléments inline, tags) */
.sr--soft {
  transform: translateY(12px);
  transition-duration: 0.42s;
}

/* Délais en cascade pour les grilles */
.sr--d1  { transition-delay: 0.06s; }
.sr--d2  { transition-delay: 0.13s; }
.sr--d3  { transition-delay: 0.20s; }
.sr--d4  { transition-delay: 0.27s; }
.sr--d5  { transition-delay: 0.34s; }
.sr--d6  { transition-delay: 0.41s; }

/* ── État révélé ──────────────────────────────────────────── */
.sr.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Respect de prefers-reduced-motion ─────────────────────
   On désactive les transforms et on force is-visible
   pour que les éléments soient simplement visibles.        */
@media (prefers-reduced-motion: reduce) {
  .sr {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}