/* Tout le mouvement du site. `html.is-still` (prefers-reduced-motion, suivi en direct) le coupe. */

/* ---------- Apparition au défilement ---------- */
html.js:not(.is-still) [data-reveal] {
    opacity: 0;
    transform: translateY(56px) skewY(2deg);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    /* Cascade : les éléments qui entrent ensemble se suivent de 60 ms (posé par initReveal) */
    transition-delay: var(--reveal-delay, 0ms);
}

html.js:not(.is-still) [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* ---------- Dicton : l'ancien s'efface (fondu + léger flou), puis les mots montent un par un ---------- */
.dictons.is-leaving .dicton-text,
.dictons.is-leaving .dicton-source {
    opacity: 0;
    filter: blur(2px);
    transition: opacity var(--dur-exit) var(--ease-out), filter var(--dur-exit) var(--ease-out);
}

.dictons.is-playing .word {
    animation: word-in 0.75s var(--ease-out) both;
    animation-delay: calc(var(--i) * 55ms);
}

@keyframes word-in {
    from {
        opacity: 0;
        transform: translateY(0.55em);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Bandeaux ---------- */
.marquee-track {
    animation: marquee 70s linear infinite;
}

.marquee--reverse .marquee-track {
    animation-direction: reverse;
}

@keyframes marquee {
    to {
        transform: translateX(-50%);
    }
}

/* ---------- Hero ---------- */
.mascot {
    animation: float 7s ease-in-out infinite;
}

@keyframes float {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -16px;
    }
}

/* ---------- Animations réduites (html.is-still suit prefers-reduced-motion en direct) ---------- */
html.is-still .marquee-track,
html.is-still .mascot,
html.is-still .dicton-text .word {
    animation: none !important;
}

html.is-still .loader {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    html.js .loader {
        display: none;
    }

    /* Moins de mouvement, pas zéro : les fondus d'opacité, de couleur et de lueur restent ;
       déplacements, rotations, zooms et découpes deviennent instantanés. */
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-property: opacity, color, background-color, border-color, filter, visibility !important;
    }
}