/**
* Animations « reveal » — système d'entrée réutilisable.
*
* UTILISATION : ajouter l'attribut data-mm-reveal sur n'importe quel élément.
* …
→ fondu + montée (défaut)
* …
→ fondu seul
* …
→ glisse depuis le côté
* …
→ léger zoom
* → décalage de 120 ms (stagger)
*
* Le JS (main.js) ajoute .is-revealed quand l'élément entre dans le viewport.
*
* IMPORTANT : on utilise `animation` (et non `transition`) pour NE PAS écraser
* la propriété `transition` des éléments interactifs (ex. le hover des boutons).
*
* Anti-flash : l'état masqué n'est appliqué QUE si porte la classe
* .mm-reveal-ready (posée très tôt par un script inline dans le ).
*
* Accessibilité : neutralisé si l'utilisateur demande moins d'animations.
*/
@layer utilities {
@media (prefers-reduced-motion: no-preference) {
/* État initial masqué (avant révélation). */
.mm-reveal-ready [data-mm-reveal] {
opacity: 0;
}
/* Révélation : une animation dédiée, avec délai optionnel (stagger). */
.mm-reveal-ready [data-mm-reveal].is-revealed {
animation: mm-reveal-up 600ms ease both;
animation-delay: var(--mm-reveal-delay, 0ms);
}
.mm-reveal-ready [data-mm-reveal="fade"].is-revealed { animation-name: mm-reveal-fade; }
.mm-reveal-ready [data-mm-reveal="left"].is-revealed { animation-name: mm-reveal-left; }
.mm-reveal-ready [data-mm-reveal="right"].is-revealed { animation-name: mm-reveal-right; }
.mm-reveal-ready [data-mm-reveal="zoom"].is-revealed { animation-name: mm-reveal-zoom; }
}
}
@keyframes mm-reveal-up {
from { opacity: 0; transform: translateY(1.5rem); }
to { opacity: 1; transform: none; }
}
@keyframes mm-reveal-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes mm-reveal-left {
from { opacity: 0; transform: translateX(-1.5rem); }
to { opacity: 1; transform: none; }
}
@keyframes mm-reveal-right {
from { opacity: 0; transform: translateX(1.5rem); }
to { opacity: 1; transform: none; }
}
@keyframes mm-reveal-zoom {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: none; }
}