/**
 * scroll-animations-simples — feuille principale.
 *
 * Un seul systeme : la classe .reveal, des variantes de direction, des delais.
 * Le JS ajoute .is-visible quand l'element entre dans le viewport.
 *
 * Tout est pilote par des variables CSS surchargeables par le theme hote :
 *
 *     :root {
 *         --sas-ease: var(--mon-theme-ease);
 *         --sas-distance: 24px;
 *     }
 *
 * Elles portent un prefixe propre au paquet — un package qui lirait une variable
 * du theme casserait silencieusement sur le premier site ou elle n'existe pas.
 */

:root {
    --sas-duration: 0.9s;
    --sas-distance: 32px;
    --sas-scale: 0.95;
    --sas-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --sas-delay-step: 0.1s;
}

/*
 * Amelioration progressive : le masquage n'est applique QUE si le JS du paquet a
 * marque <html class="sas-js">. Sans JS — script bloque, erreur ailleurs dans la
 * page, crawler — tout reste visible. Un paquet d'animation ne doit jamais
 * pouvoir rendre le contenu invisible.
 *
 * :where() maintient la specificite a 0-1-0 : le theme surcharge .reveal sans
 * avoir a lutter contre html.sas-js.
 */
:where(html.sas-js) .reveal {
    opacity: 0;
    transform: translateY(var(--sas-distance));
    transition:
        opacity var(--sas-duration) var(--sas-ease),
        transform var(--sas-duration) var(--sas-ease);
}

:where(html.sas-js) .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Variantes de direction — a combiner avec .reveal */

:where(html.sas-js) .reveal--fade {
    transform: none;
}

:where(html.sas-js) .reveal--down {
    transform: translateY(calc(var(--sas-distance) * -1));
}

:where(html.sas-js) .reveal--left {
    transform: translateX(var(--sas-distance));
}

:where(html.sas-js) .reveal--right {
    transform: translateX(calc(var(--sas-distance) * -1));
}

:where(html.sas-js) .reveal--scale {
    transform: scale(var(--sas-scale));
}

/* Delais en cascade, pour decaler les elements d'un meme groupe */

:where(html.sas-js) .reveal-delay-1 { transition-delay: calc(var(--sas-delay-step) * 1); }
:where(html.sas-js) .reveal-delay-2 { transition-delay: calc(var(--sas-delay-step) * 2); }
:where(html.sas-js) .reveal-delay-3 { transition-delay: calc(var(--sas-delay-step) * 3); }
:where(html.sas-js) .reveal-delay-4 { transition-delay: calc(var(--sas-delay-step) * 4); }
:where(html.sas-js) .reveal-delay-5 { transition-delay: calc(var(--sas-delay-step) * 5); }
:where(html.sas-js) .reveal-delay-6 { transition-delay: calc(var(--sas-delay-step) * 6); }

/*
 * Interrupteur global. Poser .no-anim sur <body> (ou n'importe quel ancetre)
 * neutralise toutes les animations du paquet — utile pour une option de theme
 * ou un reglage par page.
 */
.no-anim .reveal,
.no-anim .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}