/**
 * Animaciones al entrar en viewport — usado por js/scroll_animation.js
 */

.scroll-fade-in,
.scroll-slide-up,
.scroll-slide-left,
.scroll-slide-right,
.animated-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-slide-left {
    transform: translateX(-40px);
}

.scroll-slide-right {
    transform: translateX(40px);
}

.scroll-fade-in.is-visible,
.scroll-slide-up.is-visible,
.scroll-slide-left.is-visible,
.scroll-slide-right.is-visible,
.animated-section.is-visible {
    opacity: 1;
    transform: translate(0);
}

.scroll-fade-in[data-anim-delay],
.scroll-slide-up[data-anim-delay],
.scroll-slide-left[data-anim-delay],
.scroll-slide-right[data-anim-delay] {
    transition-delay: var(--anim-delay, 0s);
}

.scroll-fade-in.is-visible[data-anim-delay],
.scroll-slide-up.is-visible[data-anim-delay],
.scroll-slide-left.is-visible[data-anim-delay],
.scroll-slide-right.is-visible[data-anim-delay] {
    transition-delay: var(--anim-delay, 0s);
}