/* Scroll Fade Animations - se reinician cada vez que el elemento vuelve a ser visible
   Agrega la clase correspondiente en Elementor: Advanced > CSS Classes */

/* Estado inicial / al salir del viewport: gobierna la velocidad del fade-out */
.scroll-fade,
.scroll-fade-up,
.scroll-fade-down,
.scroll-fade-left,
.scroll-fade-right {
    opacity: 0;
    transition: opacity 1.2s ease,
                transform 1.2s ease;
}

.scroll-fade-up {
    transform: translate3d(0, 30px, 0);
}
.scroll-fade-down {
    transform: translate3d(0, -30px, 0);
}
.scroll-fade-left {
    transform: translate3d(-30px, 0, 0);
}
.scroll-fade-right {
    transform: translate3d(30px, 0, 0);
}

/* Estado visible, lo activa el JS al entrar en el viewport: gobierna la velocidad del fade-in */
.scroll-fade.in-view,
.scroll-fade-up.in-view,
.scroll-fade-down.in-view,
.scroll-fade-left.in-view,
.scroll-fade-right.in-view {
    opacity: 1;
    transform: none;
    transition: opacity 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Accesibilidad: si el usuario prefiere menos movimiento, mostrar directo sin animar */
@media (prefers-reduced-motion: reduce) {
    .scroll-fade,
    .scroll-fade-up,
    .scroll-fade-down,
    .scroll-fade-left,
    .scroll-fade-right {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Dentro del editor de Elementor: mostrar siempre visible para poder editar con normalidad */
.elementor-editor-active .scroll-fade,
.elementor-editor-active .scroll-fade-up,
.elementor-editor-active .scroll-fade-down,
.elementor-editor-active .scroll-fade-left,
.elementor-editor-active .scroll-fade-right {
    opacity: 1 !important;
    transform: none !important;
}