.animate-on-scroll {
    opacity: 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.animate-on-scroll.animate {
    opacity: 1;
}

.animate-on-scroll.slide-top.animate {
    animation: slide-top 1.2s cubic-bezier(.250, .460, .450, .940) both;
}

.animate-on-scroll.fade-up.animate {
    animation: fade-up 1.3s cubic-bezier(.250, .460, .450, .940) both;
}

.animate-on-scroll.fade-right.animate {
    animation: fade-right 1.3s cubic-bezier(.250, .460, .450, .940) both;
}


@keyframes slide-top {
    0% {
        transform: translateY(200px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fade-up {
    0% {
        transform: translateY(60px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fade-right {
    0% {
        transform: translateX(-60px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}


/* @media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1;
        transform: none;
        animation: none !important;
        transition: none !important;
    }
} */