@keyframes parallax-background {
    from {
        transform: translateY(0);
        /* transform: scale(1); */
    }
    to {
        transform: translateY(calc(var(--multiplier) * 15vh));
        /* transform: scale(2); */
    }
}

@keyframes parallax-foreground {
    from {
        transform: translateY(0);
        /* transform: scale(1); */
    }
    to {
        transform: translateY(calc(var(--multiplier) * -15vh));
        /* transform: scale(2); */
    }
}

@keyframes fade-in {
    from {
        opacity: .2;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: no-preference) {
     :is(#homepage-main, #subpage-main) {
        --multiplier: 1;
        view-timeline: --viewport;
    }
    #slideshow-row img {
        animation: parallax-background linear forwards;
        animation-timeline: --viewport;
        animation-range: contain;
        --multiplier: 10;
    }
    #slideshow-row p {
        animation: parallax-foreground linear forwards;
        animation-timeline: --viewport;
        animation-range: contain;
    }
     :is(.event-item, .news-item, #homepage-main #cta-row .column, #subpage-main #cta-row .column) {
        animation: fade-in ease-in-out forwards;
        animation-timeline: --scrollTimeline;
        view-timeline: --scrollTimeline block;
        animation-range: entry;
        animation-fill-mode: both;
    }
}