/* XenSupport — Scroll reveal « ouahh » 2026 (chargé après styles.css).
   Activé uniquement quand html.xs-reveal est présent (posé par scroll-reveal.js
   si IntersectionObserver dispo et pas de reduced-motion). */
html.xs-reveal [data-animate] .xs-rev {
    opacity: 0;
    /* Montée cinématique en 3D : l'élément se redresse depuis le bas, légèrement
       incliné et reculé, puis vient à plat → vraie sensation de profondeur. */
    transform: perspective(1200px) rotateX(7deg) translateY(44px) scale(0.975);
    transform-origin: 50% 100%;
    filter: blur(8px);
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--xs-i, 0) * 95ms);
    will-change: opacity, transform;
}
html.xs-reveal [data-animate].xs-in .xs-rev {
    opacity: 1;
    transform: perspective(1200px) rotateX(0) translateY(0) scale(1);
    filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
    html.xs-reveal [data-animate] .xs-rev {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* Hero FX (parallax scroll + aurore réactive au pointeur).
   .hero-aurora et .hero-showcase n'ont aucune keyframe → on peut composer leur
   transform en JS sans rien écraser. will-change uniquement quand le moteur tourne. */
html.xs-herofx .hero-aurora,
html.xs-herofx .hero-showcase {
    will-change: transform;
}
html.xs-herofx .hero-centered {
    will-change: transform, opacity;
}