/* Keep geometry and the glass surface independent during scrolling. */
#navbar {
    --header-logo-width: min(72vw, 280px, calc(100vw - 128px));
    isolation: isolate;
    border: 0;
    padding-block: 20px;
    transition: padding 300ms cubic-bezier(.22, .61, .36, 1);
}

#navbar.glass-nav {
    --header-logo-width: min(54vw, 205px);
    padding-block: 12px;
}

#navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    backdrop-filter: blur(24px) saturate(190%);
    opacity: 0;
    transition: opacity 300ms cubic-bezier(.22, .61, .36, 1);
}

#navbar.glass-nav::before {
    opacity: 1;
}

#navbar .nav-logo {
    width: var(--header-logo-width);
    transition: width 300ms cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 1024px) {
    #navbar {
        --header-logo-width: 320px;
    }
    #navbar.glass-nav {
        --header-logo-width: 240px;
    }
}

@media (prefers-color-scheme: dark) {
    #navbar::before {
        background: rgba(18, 18, 18, .75);
    }
}

/* Preserve immediate overlay closing, including its glass surface. */
body.menu-open #navbar::before {
    opacity: 0;
    transition: none;
}

body.menu-open #navbar .nav-logo {
    width: var(--header-logo-width);
}

@media (prefers-reduced-motion: reduce) {
    #navbar, #navbar::before, #navbar .nav-logo {
        transition: none;
    }
}