header {
    top: 0;
    right: 0;
    left: 0;
    z-index: 200;
}

#header-title {grid-column: 1/-2;}
@media only screen and (min-width: 768px) {
    #header-title {grid-column: 8/-1;}
}




/*
MOBILE
*/
#header-mobile #header_m-top {z-index: 20;}

#header-mobile #header_m-button {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    transition: 1000ms;
}

#header-mobile #header_m-button div:nth-child(1) {
    top: 0;
    left: calc(50% - 1px);
    bottom: 0;
    width: 2px;
}

#header-mobile #header_m-button div:nth-child(2) {
    top: calc(50% - 1px);
    right: 0;
    left: 0;
    height: 2px;
}

#header-mobile[data-status="open"] #header_m-button {
    scale: 1.1;
    rotate: 45deg;
}




/* 
DESKTOP
*/
#header_d-pages {
    grid-column: 1/8;
    height: fit-content;
    column-gap: 1.25rem;
    transform: translateY(2.5vw);
}
@media only screen and (min-width: 820px) {
    #header_d-pages {transform: translateY(2.75vw);}
}
@media only screen and (min-width: 1024px) {
    #header_d-pages {transform: translateY(3vw);}
}
@media only screen and (min-width: 1096px) {
    #header_d-pages {transform: translateY(3.5vw);}
}

#header_d-pages a {
    width: fit-content;
    height: fit-content;
}




/* 
MENU
*/
#header_m-menu {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    min-height: 100dvh;
    max-height: 100dvh;
    row-gap: .5rem;
    transition: 1500ms;
}

#header-mobile[data-status="close"] #header_m-menu {transform: translateY(-100dvh);}
#header-mobile[data-status="close"] #header_m-menu a {opacity: 0;}

#header-mobile[data-status="open"] #header_m-menu a:nth-of-type(1) {transition: 750ms 250ms;}
#header-mobile[data-status="open"] #header_m-menu a:nth-of-type(2) {transition: 750ms 450ms;}
#header-mobile[data-status="open"] #header_m-menu a:nth-of-type(3) {transition: 750ms 650ms;}
#header-mobile[data-status="open"] #header_m-menu a:nth-of-type(4) {transition: 750ms 850ms;}

#header-mobile[data-status="close"] #header_m-menu a:nth-of-type(1) {transition: 750ms 50ms;}
#header-mobile[data-status="close"] #header_m-menu a:nth-of-type(2) {transition: 750ms 150ms;}
#header-mobile[data-status="close"] #header_m-menu a:nth-of-type(3) {transition: 750ms 250ms;}
#header-mobile[data-status="close"] #header_m-menu a:nth-of-type(4) {transition: 750ms 350ms;}




/* 
SCROLL TIMELINE
*/
header[data-compact="true"] #cc-wordmark path:nth-of-type(1) {opacity: 0; transition: 500ms;}
header[data-compact="true"] #cc-wordmark path:nth-of-type(2) {opacity: 0; transition: 500ms 50ms;}
header[data-compact="true"] #cc-wordmark path:nth-of-type(3) {opacity: 0; transition: 500ms 100ms;}
header[data-compact="true"] #cc-wordmark path:nth-of-type(4) {opacity: 0; transition: 500ms 150ms;}
header[data-compact="true"] #cc-wordmark path:nth-of-type(5) {opacity: 0; transition: 500ms 200ms;}
header[data-compact="true"] #cc-wordmark path:nth-of-type(6) {opacity: 0; transition: 500ms 250ms;}
header[data-compact="true"] #cc-wordmark path:nth-of-type(7) {opacity: 0; transition: 500ms 300ms;}
header[data-compact="true"] #cc-wordmark path:nth-of-type(8) {opacity: 0; transition: 500ms 350ms;}
header[data-compact="true"] #cc-wordmark path:nth-of-type(9) {opacity: 0; transition: 500ms 400ms;}
header[data-compact="true"] #cc-wordmark path:nth-of-type(10) {opacity: 0; transition: 500ms 450ms;}
header[data-compact="true"] #cc-wordmark path:nth-of-type(11) {opacity: 0; transition: 500ms 500ms;}
header[data-compact="true"] #cc-wordmark path:nth-of-type(12) {opacity: 0; transition: 500ms 550ms;}
header[data-compact="true"] #cc-wordmark {transform: translateX(42.5vw); transition: 1000ms 400ms;}
@media only screen and (min-width: 425px) {
    header[data-compact="true"] #cc-wordmark {transform: translateX(43.5vw)}
}
@media only screen and (min-width: 768px) {
    header[data-compact="true"] #cc-wordmark {transform: translateX(35.5vw)}
}

header[data-compact="false"] #cc-wordmark {transform: translateX(0); transition: 1000ms;}
header[data-compact="false"] #cc-wordmark path:nth-of-type(12) {opacity: 1; transition: 500ms 50ms;}
header[data-compact="false"] #cc-wordmark path:nth-of-type(11) {opacity: 1; transition: 500ms 100ms;}
header[data-compact="false"] #cc-wordmark path:nth-of-type(10) {opacity: 1; transition: 500ms 150ms;}
header[data-compact="false"] #cc-wordmark path:nth-of-type(9) {opacity: 1; transition: 500ms 200ms;}
header[data-compact="false"] #cc-wordmark path:nth-of-type(8) {opacity: 1; transition: 500ms 250ms;}
header[data-compact="false"] #cc-wordmark path:nth-of-type(7) {opacity: 1; transition: 500ms 300ms;}
header[data-compact="false"] #cc-wordmark path:nth-of-type(6) {opacity: 1; transition: 500ms 350ms;}
header[data-compact="false"] #cc-wordmark path:nth-of-type(5) {opacity: 1; transition: 500ms 400ms;}
header[data-compact="false"] #cc-wordmark path:nth-of-type(4) {opacity: 1; transition: 500ms 450ms;}
header[data-compact="false"] #cc-wordmark path:nth-of-type(3) {opacity: 1; transition: 500ms 500ms;}
header[data-compact="false"] #cc-wordmark path:nth-of-type(2) {opacity: 1; transition: 500ms 550ms;}
header[data-compact="false"] #cc-wordmark path:nth-of-type(1) {opacity: 1; transition: 500ms 600ms;}

#header-title p {transition: 2000ms;}
header[data-compact="true"] #header-title p {opacity: 0;}
header[data-compact="false"] #header-title p {opacity: 1;}