/* ==========================================================================
   scroll-anim.css — Animaciones al hacer scroll (las activa scroll-anim.js)
   Solo actúa cuando el JS marca <html class="sa-on">: sin JS todo se ve normal.
   ========================================================================== */

.sa-on .sa {
    opacity: 0;
    transition: opacity .9s cubic-bezier(.22,.61,.36,1),
                transform .9s cubic-bezier(.22,.61,.36,1),
                filter .9s ease;
    transition-delay: var(--sa-delay, 0s);
    will-change: opacity, transform;
}
.sa-on .sa-up    { transform: translate3d(0, 50px, 0); }
.sa-on .sa-left  { transform: translate3d(-70px, 0, 0); }
.sa-on .sa-right { transform: translate3d(70px, 0, 0); }
.sa-on .sa-zoom  { transform: scale(.88); filter: blur(6px); }
.sa-on .sa-title { transform: translate3d(0, 30px, 0); letter-spacing: .12em; }

.sa-on .sa.sa-in {
    opacity: 1;
    transform: none;
    filter: none;
    letter-spacing: normal;
}

/* Las imágenes con parallax se escalan un poco para no dejar huecos al moverse */
.sa-parallax-wrap { overflow: hidden; }
.sa-parallax { transform: translate3d(0, var(--sa-py, 0px), 0) scale(1.08); transition: transform .1s linear; }

/* Línea decorativa de los títulos que crece al aparecer */
.sa-on .titleShortocode.sa .line,
.sa-on .contentTitle.sa .line { transform: scaleX(0); transition: transform 1s .3s ease; transform-origin: left center; }
.sa-on .titleShortocode.sa-in .line,
.sa-on .contentTitle.sa-in .line { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
    .sa-on .sa { opacity: 1; transform: none; filter: none; transition: none; }
    .sa-parallax { transform: none; }
}