/* =========================================================
   Motion — états initiaux des animations "reveal on scroll"
   ---------------------------------------------------------
   Tout est piloté par IntersectionObserver dans reveal.js.
   .dm-reveal       → état initial (caché)
   .dm-reveal.is-in → état final (visible)
   data-reveal="..."→ variante : fade, up, right, blur
   data-delay="N"   → délai en ms (max 800)
   ========================================================= */

.dm-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity .9s var(--dm-ease-out),
    transform .9s var(--dm-ease-out),
    filter .9s var(--dm-ease-out);
  transition-delay: var(--dm-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.dm-reveal[data-reveal="fade"]   { transform: none; }
.dm-reveal[data-reveal="right"]  { transform: translate3d(-32px, 0, 0); }
.dm-reveal[data-reveal="blur"]   { filter: blur(8px); transform: none; }
.dm-reveal[data-reveal="scale"]  { transform: scale(1.04); }

.dm-reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
}

/* Fallback si JS désactivé : tout est visible. */
.no-js .dm-reveal { opacity: 1; transform: none; filter: none; }

/* Reduce motion : pas de translate, juste un fade très court. */
@media (prefers-reduced-motion: reduce) {
  .dm-reveal { transform: none !important; filter: none !important; transition-duration: .2s; }
}

/* "Cinema marquee" — indicateur de chargement sur titres (utilisé sur hero) */
@keyframes dm-fade-in-up {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: none; }
}
.dm-hero__title { animation: dm-fade-in-up 1.2s var(--dm-ease-out) .15s both; }
.dm-hero__kicker { animation: dm-fade-in-up 1.2s var(--dm-ease-out) .05s both; }
.dm-hero__bottom > * { animation: dm-fade-in-up 1.2s var(--dm-ease-out) .5s both; }