.nav-shell {
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.22),
            rgba(255, 255, 255, 0.08)
        ),
        rgba(18, 22, 28, 0.46);

    box-shadow:
        0 16px 44px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08);

    backdrop-filter:
        blur(28px)
        saturate(180%)
        brightness(1.06);

    -webkit-backdrop-filter:
        blur(28px)
        saturate(180%)
        brightness(1.06);

    isolation: isolate;
}

.nav-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    border-radius: inherit;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 22% 0%,
            rgba(255, 255, 255, 0.4),
            transparent 31%
        ),
        linear-gradient(
            105deg,
            transparent 20%,
            rgba(255, 255, 255, 0.12) 50%,
            transparent 80%
        );
}

.nav-shell.is-reflecting::before {
    animation: navReflect 520ms ease-out;
}

@supports not (backdrop-filter: blur(1px)) {
    .nav-shell {
        background: var(--glass-fallback-bg);
    }
}