.header{position:fixed;z-index:20;isolation:isolate}
.header-glass{position:absolute;inset:0 0 -64px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s ease;background:linear-gradient(to bottom,rgba(7,14,17,.5),rgba(7,14,17,.12) 58%,transparent)}
.header.is-scrolled .header-glass{opacity:1}
.header-glass span{position:absolute;inset:0;pointer-events:none;-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 var(--solid),transparent var(--fade));mask-image:linear-gradient(to bottom,#000 0%,#000 var(--solid),transparent var(--fade))}
.header-glass span:nth-child(1){--blur:1px;--solid:80%;--fade:100%}
.header-glass span:nth-child(2){--blur:2px;--solid:65%;--fade:90%}
.header-glass span:nth-child(3){--blur:4px;--solid:48%;--fade:76%}
.header-glass span:nth-child(4){--blur:8px;--solid:30%;--fade:61%}
.header-glass span:nth-child(5){--blur:16px;--solid:12%;--fade:45%}
.header-glass span:nth-child(6){--blur:24px;--solid:0%;--fade:28%}
.header-scroll-sentinel{position:absolute;top:0;left:0;width:1px;height:12px;pointer-events:none}
html{scroll-padding-top:100px}
@media(max-width:600px){.header-glass{bottom:-44px}html{scroll-padding-top:85px}}
@media(prefers-reduced-motion:reduce){.header-glass{transition:none}}
@media(prefers-reduced-transparency:reduce){.header-glass span{backdrop-filter:none;-webkit-backdrop-filter:none}.header-glass{background:linear-gradient(#0b1012 65%,transparent)}}
