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

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.20),
            rgba(255, 255, 255, 0.07)
        ),
        rgba(20, 24, 30, 0.46);

    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.24),
        0 2px 10px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        inset 0 -1px 0 rgba(255, 255, 255, 0.07);

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

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

    isolation: isolate;
}

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

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

    background:
        radial-gradient(
            circle at 18% 0%,
            rgba(255, 255, 255, 0.42),
            transparent 28%
        ),
        linear-gradient(
            105deg,
            transparent 18%,
            rgba(255, 255, 255, 0.14) 48%,
            transparent 78%
        );

    opacity: 0.85;
    transform: translateZ(0);
}

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

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

    background:
        radial-gradient(
            circle at 50% 120%,
            rgba(72, 224, 194, 0.10),
            transparent 52%
        );

    mix-blend-mode: screen;
}

.nav-shell.is-reflecting::before {
    animation: navReflect 680ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes navReflect {
    0% {
        transform: translateX(-18%) skewX(-10deg);
        opacity: 0.45;
    }

    55% {
        transform: translateX(12%) skewX(-10deg);
        opacity: 1;
    }

    100% {
        transform: translateX(0) skewX(0);
        opacity: 0.85;
    }
}

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