header {
    top: 0;
    right: 0;
    left: 0;
    padding-bottom: var(--size-m) !important;
    /* background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 75%); */
    transition: 500ms;
    z-index: 500;
}

body[data-section="landing"] header {
    transform: translateY(-12px);
    opacity: 0;
}



/* 
BUTTONS
*/
header button {transition: opacity 500ms, color 1000ms;}

header #header-previous {
    margin-left: var(--size);
    transition: margin 1000ms, opacity 500ms !important;
}

body[data-section="previous"] #header-current {opacity: var(--alpha);}
body:not([data-section="previous"]) #header-previous {opacity: var(--alpha);}

@media (hover: hover) {
    header button:hover {opacity: 1 !important;}
}




/* 
LOGO 
*/
#level-logo {
    position: fixed;
    top: calc(100dvh - 41.5vw);
    right: 1rem;
    height: 41.2vw;
    z-index: 490;
}

.st0 {transition: fill 1000ms;}

/*
LOGO - wide screens
Moment 1 only. GSAP owns the box from the moment it starts collapsing, but the
resting state has to live here: the height/right tween is immediateRender:false,
so before it first runs there is no inline value and the stylesheet governs.
43.521vw is the height at which the box width reaches exactly 100vw, so min()
keeps it from ever being wider than the viewport. 114.888dvh is 50dvh * the
logo's aspect ratio, i.e. the box width when the height is uncapped.
*/
@media (min-width: 769px) {
    #level-logo {
        height: min(50dvh, 43.521vw);
        right: calc((100vw - min(114.888dvh, 100vw)) / 2);
        top: calc(100dvh - min(50dvh, 43.521vw) - 12px);
    }
}