.scroll-reveal {
    --reveal-distance: 28px;
    --reveal-delay: 0ms;
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0) scale(.992);
    transition:
        opacity .62s cubic-bezier(.22, .75, .2, 1) var(--reveal-delay),
        transform .72s cubic-bezier(.22, .75, .2, 1) var(--reveal-delay);
}

.scroll-reveal.reveal-from-top {
    --reveal-distance: -24px;
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.scroll-reveal:not(.is-visible) {
    will-change: opacity, transform;
}

.scroll-reveal.reveal-soft {
    --reveal-distance: 16px;
}

.scroll-reveal.reveal-feature {
    --reveal-distance: 36px;
}

@media (max-width: 740px) {
    .scroll-reveal {
        --reveal-distance: 20px;
        transition-duration: .5s, .58s;
    }

    .scroll-reveal.reveal-from-top {
        --reveal-distance: -18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .scroll-reveal,
    .scroll-reveal.reveal-from-top,
    .scroll-reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}