/* Nav Header — Scroll-triggered gradient backdrop blur */
.nav-header {
    position: relative;
}

.nav-header::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.05);
}

.nav-header.is-scrolled::after {
    opacity: 1;
}