/* Vanilla replacement for Antra's GSAP .fade-top and .slide-anim effects */
.scroll-fade-init,
.scroll-slide-init {
    opacity: 0;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.scroll-fade-init {
    transform: translate3d(0, 100px, 0);
    transition-duration: 1s;
    transition-delay: var(--anim-delay, 0s);
}

.scroll-slide-init {
    transform: translate3d(var(--anim-x, 0px), var(--anim-y, 50px), 0);
    transition-duration: var(--anim-duration, 1.15s);
    transition-delay: var(--anim-delay, 0.15s);
}

.scroll-fade-init.is-visible,
.scroll-slide-init.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-fade-init,
    .scroll-slide-init {
        opacity: 1;
        transform: none;
        transition: none;
    }
}