/*
 * Animations « reveal » — système d'entrée réutilisable.
 *
 * Repris du thème maison-marion (assets/css/animations.css + initReveal dans main.js), au
 * préfixe de ce thème.
 *
 * UTILISATION
 *
 * Toutes les sections d'une page (#main > section) sont animées d'office : rien à ajouter dans
 * les gabarits. Pour animer autre chose, l'attribut suffit :
 *
 *   <div data-bel-reveal>…</div>                     → fondu + montée (défaut)
 *   <div data-bel-reveal="fade">…</div>              → fondu seul
 *   <div data-bel-reveal="left|right">…</div>        → glisse depuis le côté
 *   <div data-bel-reveal="zoom">…</div>              → léger zoom
 *   <div data-bel-reveal data-bel-reveal-delay="120">→ décalage de 120 ms (stagger)
 *
 * assets/js/app.js ajoute .is-revealed quand l'élément entre dans la fenêtre, puis cesse de
 * l'observer : l'apparition a lieu UNE fois, elle ne se rejoue pas en remontant.
 *
 * ON UTILISE « animation » ET NON « transition » : une transition écraserait celle des éléments
 * interactifs qu'elle contient (le survol des boutons, par exemple).
 *
 * ANTI-FLASH : l'état masqué n'est appliqué que si <html> porte .bel-reveal-ready, posée très tôt
 * par un script en ligne dans le <head>. Sans JavaScript, la classe n'existe pas, rien n'est
 * masqué — aucun risque de page blanche.
 *
 * Le @layer de la source est volontairement retiré : ce thème n'a pas d'architecture de couches,
 * et une règle en couche perdrait contre n'importe quelle règle de composant hors couche.
 *
 * Accessibilité : tout est neutralisé si l'utilisateur demande moins d'animations.
 */

@media (prefers-reduced-motion: no-preference) {

    /* État initial masqué, avant révélation. */
    .bel-reveal-ready #main > section,
    .bel-reveal-ready [data-bel-reveal] {
        opacity: 0;
    }

    /* Révélation, avec délai optionnel pour échelonner une série. */
    .bel-reveal-ready #main > section.is-revealed,
    .bel-reveal-ready [data-bel-reveal].is-revealed {
        animation: bel-reveal-up 600ms ease both;
        animation-delay: var(--bel-reveal-delay, 0ms);
    }

    .bel-reveal-ready [data-bel-reveal="fade"].is-revealed  { animation-name: bel-reveal-fade; }
    .bel-reveal-ready [data-bel-reveal="left"].is-revealed  { animation-name: bel-reveal-left; }
    .bel-reveal-ready [data-bel-reveal="right"].is-revealed { animation-name: bel-reveal-right; }
    .bel-reveal-ready [data-bel-reveal="zoom"].is-revealed  { animation-name: bel-reveal-zoom; }
}

@keyframes bel-reveal-up {
    from { opacity: 0; transform: translateY(1.5rem); }
    to   { opacity: 1; transform: none; }
}

@keyframes bel-reveal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes bel-reveal-left {
    from { opacity: 0; transform: translateX(-1.5rem); }
    to   { opacity: 1; transform: none; }
}

@keyframes bel-reveal-right {
    from { opacity: 0; transform: translateX(1.5rem); }
    to   { opacity: 1; transform: none; }
}

@keyframes bel-reveal-zoom {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: none; }
}