/* Shared site header: keep navigation crisp while the backdrop fades into the page. */
#main-header {
    --header-fade-height: 2.5rem;
    --header-tint: rgba(9, 9, 11, .82);
    background: transparent;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition-property: height;
}

#main-header.is-scrolled {
    --header-tint: rgba(9, 9, 11, .9);
}

#main-header > nav {
    /* Navigation owns the entrance animation so the backdrop can sample the page. */
    position: relative;
    z-index: 1;
}

#main-header::before {
    content: '';
    position: absolute;
    inset: 0 0 calc(-1 * var(--header-fade-height));
    z-index: 0;
    pointer-events: none;
    /* A smooth tint also works when backdrop filters or masks are unavailable. */
    background: linear-gradient(180deg,
        var(--header-tint) 0%,
        var(--header-tint) 42%,
        rgba(9, 9, 11, .55) 66%,
        rgba(9, 9, 11, .18) 85%,
        rgba(9, 9, 11, 0) 100%);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and ((mask-image: linear-gradient(black, transparent)) or (-webkit-mask-image: linear-gradient(black, transparent))) {
    #main-header::before {
        background: var(--header-tint);
        -webkit-backdrop-filter: blur(20px) saturate(125%);
        backdrop-filter: blur(20px) saturate(125%);
        -webkit-mask-image: linear-gradient(180deg,
            black 0%, black 42%, rgba(0, 0, 0, .94) 55%,
            rgba(0, 0, 0, .68) 72%, rgba(0, 0, 0, .24) 88%, transparent 100%);
        mask-image: linear-gradient(180deg,
            black 0%, black 42%, rgba(0, 0, 0, .94) 55%,
            rgba(0, 0, 0, .68) 72%, rgba(0, 0, 0, .24) 88%, transparent 100%);
    }
}