/* Lightweight motion and compositor-safe interaction refinements. */

body.menu-open {
    overscroll-behavior: contain;
    touch-action: none;
}

.ls-header.is-scrolled,
.ls-product-nav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: color-mix(in srgb, var(--ls-surface) 97%, transparent);
}

body:not(.ls-home) .ls-header {
    transition: background-color 0.18s ease-out, border-color 0.18s ease-out,
        padding 0.18s ease-out;
}

@media (max-width: 680px) {
    .ls-navigation {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .reveal-ready [data-reveal]:not(.is-visible) {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }

    .reveal-ready [data-reveal] {
        transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    }

    @media (max-width: 680px) {
        .ls-navigation {
            transition: opacity 0.18s ease-out, visibility 0s linear 0.18s;
        }

        .ls-navigation.is-open {
            transition-delay: 0s;
        }

        .ls-navigation .nav {
            opacity: 0;
            transform: translate3d(0, 8px, 0);
            transition: opacity 0.18s ease-out, transform 0.18s ease-out;
        }

        .ls-navigation.is-open .nav {
            opacity: 1;
            transform: none;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.ls-home) .ls-header {
        transition: none;
    }

    .reveal-ready [data-reveal],
    .reveal-ready [data-reveal]:not(.is-visible) {
        opacity: 1;
        transform: none;
    }
}