html {
    scroll-behavior: smooth;
}

.progressive-blur {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: backdrop-filter;
}

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

body.is-scrolling .site-header__nav {
    -webkit-backdrop-filter: blur(12px) saturate(1.05);
    backdrop-filter: blur(12px) saturate(1.05);
}

.progressive-blur--bottom {
    background: transparent;
    -webkit-mask-image: linear-gradient(to top, #000 35%, transparent 100%);
    mask-image: linear-gradient(to top, #000 35%, transparent 100%);
}