:root {
    --scroll-animation-duration: 750ms;
    --scroll-animation-distance: 30px;
    --scroll-animation-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Critical startup-loader styles are global so they apply before component-scoped CSS loads. */
#app-loading {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 280ms ease, visibility 280ms ease;
}

#app-loading.app-loading-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.scroll-reveal {
    opacity: 0;
    transform: translate3d(0, var(--scroll-animation-distance), 0);
    transition: opacity var(--scroll-animation-duration) ease, transform var(--scroll-animation-duration) var(--scroll-animation-easing);
}

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

    .scroll-reveal.reveal-left {
        transform: translate3d(-30px, 0, 0);
    }

    .scroll-reveal.reveal-right {
        transform: translate3d(30px, 0, 0);
    }

        .scroll-reveal.reveal-left.reveal-visible,
        .scroll-reveal.reveal-right.reveal-visible {
            transform: translate3d(0, 0, 0);
        }

    .scroll-reveal.reveal-delay-1 {
        transition-delay: 100ms;
    }

    .scroll-reveal.reveal-delay-2 {
        transition-delay: 200ms;
    }

    .scroll-reveal.reveal-delay-3 {
        transition-delay: 300ms;
    }

    .scroll-reveal.reveal-delay-4 {
        transition-delay: 400ms;
    }

@media (prefers-reduced-motion: reduce) {
    .scroll-reveal,
    .scroll-reveal.reveal-left,
    .scroll-reveal.reveal-right {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

}