/* ============================================================
   Animations "reveal" au scroll — apparition des éléments quand
   ils entrent dans l'écran (fade / up / zoom / blur), avec effet
   de cascade pour les groupes (data-reveal-group).
   Compagnon de reveal.js, qui ajoute la classe .is-visible.
   ============================================================ */

:root{
  /* Réglages faciles à ajuster — intensité "subtile" par défaut. */
  --reveal-duration: 700ms;                       /* durée de la transition */
  --reveal-easing: cubic-bezier(.16,.8,.24,1);     /* décélération douce, naturelle */
  --reveal-distance: 22px;                         /* distance parcourue par la variante "up" */
  --reveal-scale: .95;                             /* échelle de départ de la variante "zoom" */
  --reveal-blur: 6px;                              /* flou de départ de la variante "blur" */
  --reveal-stagger: 90ms;                          /* délai entre deux enfants d'un data-reveal-group */
}

/* État initial (masqué) : uniquement une fois que reveal.js a confirmé qu'il tourne
   (classe posée sur <html>, voir reveal.js). Sans JS, [data-reveal] garde l'affichage
   normal du navigateur (opacity:1 par défaut) — dégradation gracieuse assurée. */
html.reveal-ready [data-reveal]{
  opacity:0;
  transition:
    opacity var(--reveal-duration) var(--reveal-easing),
    transform var(--reveal-duration) var(--reveal-easing),
    filter var(--reveal-duration) var(--reveal-easing);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Variantes : chacune ajoute son état de départ propre en plus du fade commun. */
html.reveal-ready [data-reveal="up"]{ transform: translate3d(0, var(--reveal-distance), 0); }
html.reveal-ready [data-reveal="zoom"]{ transform: scale(var(--reveal-scale)); }
html.reveal-ready [data-reveal="blur"]{ filter: blur(var(--reveal-blur)); }
/* "fade" n'a pas de transform/filter propre : juste l'opacité de base ci-dessus. */

/* État final, posé par reveal.js quand l'élément entre dans l'écran. */
html.reveal-ready [data-reveal].is-visible{
  opacity:1;
  transform:none;
  filter:none;
}

/* Sous cette largeur, on garde l'effet mais avec une distance/flou réduits pour ne
   pas trop bouger le contenu sur un petit écran (la durée reste la même). */
@media (max-width:640px){
  :root{
    --reveal-distance: 14px;
    --reveal-blur: 4px;
  }
}

/* Accessibilité : les personnes qui demandent moins de mouvement voient le contenu
   directement dans son état final, sans transition ni décalage. */
@media (prefers-reduced-motion: reduce){
  html.reveal-ready [data-reveal]{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    clip-path:none !important;
    transition:none !important;
  }
}

/* ── Variante "clip" — wipe Squarespace : l'élément se dévoile par le haut ── */
html.reveal-ready [data-reveal="clip"]{
  clip-path: inset(0 0 100% 0);
  transition:
    opacity var(--reveal-duration) var(--reveal-easing),
    transform var(--reveal-duration) var(--reveal-easing),
    filter var(--reveal-duration) var(--reveal-easing),
    clip-path var(--reveal-duration) cubic-bezier(.165,.84,.44,1);
}
html.reveal-ready [data-reveal="clip"].is-visible{
  clip-path: inset(0 0 0% 0);
}

/* ── Variante "left" — glisse depuis la gauche (horizontal) ── */
html.reveal-ready [data-reveal="left"]{
  transform: translate3d(-28px, 0, 0);
}
html.reveal-ready [data-reveal="right"]{
  transform: translate3d(28px, 0, 0);
}