/* =========================================================================
scroll-anim.css — Animations au scroll (réutilisable, vanilla, sans dépendance)
transform / opacity / clip-path uniquement (60 fps).
BRANCHEMENT (à faire une fois) :
1) Dans (head.php), AVANT le rendu, poser la classe .js-anim sauf si l'utilisateur
demande moins d'animations — c'est ce qui évite tout clignotement :
2) En fin de (foot.php) :
USAGE (opt-in par attribut sur les éléments à animer) :
data-reveal -> fondu + montée
data-reveal="left|right" -> entrée latérale
data-reveal="zoom" -> léger zoom
data-reveal="image" -> photo : masque clip-path + zoom (sur ![]()
ou bloc)
data-reveal="words" -> titre : cascade mot à mot (préserve les internes)
data-stagger -> sur un conteneur : ses enfants entrent en cascade
data-count -> compteur : défile de 0 à la valeur du texte (« + 350 », « 100% »)
data-parallax -> sur une section à image de fond : parallax (desktop only)
+ style="--hero-pos:NN%" pour le cadrage vertical
========================================================================= */
@media (prefers-reduced-motion: no-preference) {
/* États masqués (pré-rendu) */
html.js-anim [data-reveal],
html.js-anim [data-stagger] > * {
opacity: 0;
transform: translateY(40px);
transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
transform .75s cubic-bezier(.22, .61, .36, 1);
transition-delay: calc(var(--i, 0) * 70ms);
will-change: opacity, transform;
}
html.js-anim [data-reveal="left"] { transform: translateX(-40px); }
html.js-anim [data-reveal="right"] { transform: translateX(40px); }
html.js-anim [data-reveal="zoom"] { transform: scale(.94); }
/* Titres en cascade de mots */
html.js-anim [data-reveal="words"] { opacity: 0; transform: none; }
html.js-anim [data-reveal="words"].words-ready { opacity: 1; }
html.js-anim [data-reveal="words"] .word {
display: inline-block; opacity: 0; transform: translateY(.85em);
transition: opacity .55s ease, transform .65s cubic-bezier(.22, .61, .36, 1);
transition-delay: calc(var(--i, 0) * 55ms);
will-change: opacity, transform;
}
/* Photos : masque + zoom */
html.js-anim [data-reveal="image"] {
opacity: 0; clip-path: inset(0 0 100% 0); transform: scale(1.05);
transition: opacity .8s ease,
clip-path .95s cubic-bezier(.22, .61, .36, 1),
transform 1s cubic-bezier(.22, .61, .36, 1);
will-change: opacity, clip-path, transform;
}
/* Révélation (classe posée par le JS) — APRÈS les états masqués (l'ordre source gagne) */
html.js-anim .is-visible { opacity: 1; transform: none; }
html.js-anim [data-reveal="image"].is-visible { clip-path: inset(0 0 0 0); }
html.js-anim [data-reveal="words"].is-visible .word { opacity: 1; transform: none; }
}
/* Cadrage vertical des héros à image de fond (indépendant du JS, 100% responsive) */
[data-parallax] { background-position: 50% var(--hero-pos, 50%); }