.scroll-hide, .scroll-hide-always {
    --transition-time: 1000ms;
    --offset-left: -300px;
    --offset-right: 300px;
}

.scroll-hide, .scroll-hide-always {
    opacity: 0;
    filter: blur(5px);
    transform: scale(0.6);
    transition: all var(--transition-time);
}

.scroll-hide.from-left, .scroll-hide-always.from-left {
    transform: translateX(var(--offset-left));
}
.scroll-hide.from-right, .scroll-hide-always.from-right {
    transform: translateX(var(--offset-right));
}

.scroll-show {
    animation: scroll-show var(--transition-time) forwards;
}

@media (prefers-reduced-motion) {
    .scroll-hide, .scroll-hide-always {
        animation-duration: 0s;
    }
}

@keyframes scroll-show {
    0% {
        opacity: 0;
        filter: blur(5px);
        transform: scale(0.6);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}