.page-scroll-demo .page-scroll-reveal {
    --page-reveal-x: 0px;
    --page-reveal-y: 22px;
    opacity: 0;
    translate: var(--page-reveal-x) var(--page-reveal-y);
    transition:
        opacity 680ms ease,
        translate 760ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--page-reveal-delay, 0ms);
    will-change: opacity, translate;
}

.page-scroll-demo .page-scroll-reveal--left {
    --page-reveal-x: -46px;
    --page-reveal-y: 0px;
}

.page-scroll-demo .page-scroll-reveal--right {
    --page-reveal-x: 46px;
    --page-reveal-y: 0px;
}

.page-scroll-demo .page-scroll-reveal.is-visible {
    opacity: 1;
    translate: 0 0;
}

@media (max-width: 767px) {
    .page-scroll-demo .page-scroll-reveal--left,
    .page-scroll-demo .page-scroll-reveal--right {
        --page-reveal-x: 0px;
        --page-reveal-y: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-scroll-demo .page-scroll-reveal {
        opacity: 1 !important;
        translate: none !important;
        transition: none !important;
    }
}