/**
 * CSS associé à ScrollZoomObserver.js
 * ------------------------------------------------------------------
 * Repose sur deux choses posées par le JS sur l'élément observé :
 * - la classe `.is-in-view` (option `activeClass`)
 * - l'attribut `[data-scroll-direction="down|up"]` (option `directionAttr`)
 *
 * Variables CSS exposées pour ajuster facilement sans toucher aux
 * règles : amplitude du zoom, durée, easing, décalage de fondu.
 * ------------------------------------------------------------------
 */

.js-scroll-zoom {
    --zoom-scale-down: 0.94;
    /* échelle de départ quand on arrive en scrollant vers le bas */
    --zoom-scale-up: 1.06;
    /* échelle de départ quand on arrive en scrollant vers le haut */
    --zoom-duration: 0.8s;
    --zoom-easing: cubic-bezier(0.16, 1, 0.3, 1);
    --zoom-opacity-duration: 0.6s;

    opacity: 0 !important;
    transform: scale(var(--zoom-scale-down)) !important;
    transform-origin: center !important;

    transition:
        transform var(--zoom-duration) var(--zoom-easing),
        opacity var(--zoom-opacity-duration) ease-out !important;
}

/* Etat de départ différent selon le sens du scroll au moment de l'entrée */
.js-scroll-zoom[data-scroll-direction='up'] {
    transform: scale(var(--zoom-scale-up)) !important;
}

/* Etat final : identique quel que soit le sens */
.js-scroll-zoom.is-in-view {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/*
 * Le JS gère déjà will-change dynamiquement (ajout avant l'animation,
 * retrait au transitionend) — inutile de le poser en dur ici, ça
 * créerait un layer GPU permanent sur chaque .js-scroll-zoom de la page.
 */

/* Respecte les préférences d'accessibilité en filet de sécurité,
   même si le JS n'active déjà rien dans ce cas. */
@media (prefers-reduced-motion: reduce) {
    .js-scroll-zoom {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}