header {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 100;
}
body[data-template="home"] header,
body[data-template="archive"] header,
body[data-template="categories"] header {top: 0;}
body[data-template="project"] header {transform: translateY(calc(var(--header_height) * -1));}
body[data-template="contact"] header {bottom: 0;}

header[data-load="false"] #mutant-logo path {animation: loading 1s linear infinite alternate forwards;}
@keyframes loading {
    from {opacity: .25;}
    to {opacity: 1;}
}


/* 
NAV
*/
body[data-load="false"] #header-nav {
    height: 0;
    overflow: hidden;
}
body[data-load="true"] #header-nav {
    height: 100%;
    overflow: visible;
}
@media only screen and (min-width: 1024px) {
    #header-nav {margin-top: -.5rem;}
}
#header-nav > div {width: 100%;}
#header-nav > div .header-link {margin-right: 1rem;}

.header-link {
    width: fit-content;
    height: fit-content;
}

.header_link--icon {
    display: inline-flex;
    margin: 0 .05em;
}
@media only screen and (min-width: 1024px) {
    .header_link--icon {margin: 0 .2em;}
}
.header-link svg {
    height: 1rem;
    transition: transform 500ms ease;
}
body[data-template="home"] #header-link--project svg,
body[data-template="home"] #header-link--categories svg,
body[data-template="archive"] #header-link--categories svg,
body[data-template="contact"] #header-link--project svg,
body[data-template="contact"] #header-link--categories svg,
body[data-template="project"] #header-link--project svg,
body[data-template="project"] #header-link--categories svg {transform: translateY(-1.25rem);}

body[data-template="home"] #header-link--project.--trigger-ani svg {animation: header_l-project 1s ease-in-out infinite alternate forwards;}
@keyframes header_l-project {
    from {transform: translateY(-1.25rem);}
    to {transform: translateY(0);}
}

#header-link--contact svg {rotate: 180deg;}
body[data-template="home"] #header-link--contact svg {transform: translateY(1.25rem);}
body[data-template="archive"] #header-link--contact svg {transform: translateY(1.25rem);}
body[data-template="categories"] #header-link--contact svg {transform: translateY(1.25rem);}
body[data-template="project"] #header-link--contact svg {transform: translateY(1.25rem);}

body[data-template="archive"] #header-link--project svg,
body[data-template="categories"] #header-link--project svg,
body[data-template="categories"] #header-link--categories svg,
body[data-template="contact"] #header-link--contact svg {transform: translateY(0);}
@media (hover: hover) {
    #header-link--project:hover svg,
    #header-link--categories:hover svg,
    #header-link--contact:hover svg {transform: translateY(0) !important;}
}

#header-link--categories ul {
    height: 0;
    transition: margin-top .75s ease;
}
#header-link--categories[data-status="open"] ul {margin-top: 1rem;}

@media (hover: hover) {
    #header-link--categories li:hover {text-decoration: underline !important;}
}


/* hover status */
@media (hover: hover) {
    body[data-template="home"] header > a,
    body[data-template="home"] #header-nav,
    body[data-template="archive"] header > a,
    body[data-template="archive"] #header-nav,
    body[data-template="categories"] header > a,
    body[data-template="categories"] #header-nav {
        opacity: .25;
        transition: opacity 500ms ease;
    }
/* 
    header:hover > a,
    header:hover > #header-nav {opacity: 1 !important;} */
}

/* 
WORKS
*/
@media only screen and (min-width: 1024px) {
    #header-archive {
        display: grid !important;
        
    }
    body[data-template="home"] #header-archive,
    body[data-template="project"] #header-archive,
    body[data-template="contact"] #header-archive {
        height: 0;
        margin-top: 0;
        visibility: hidden;
    }

    body[data-template="archive"] #header-archive,
    body[data-template="categories"] #header-archive {
        height: 100%;
        visibility: visible;
        margin-top: 1rem;
    }

    #header-archive p:nth-child(1) {grid-column: 1/5}
    #header-archive p:nth-child(2) {grid-column: 5/7}
    #header-archive p:nth-child(3) {grid-column: 7/8}
    #header-archive p:nth-child(4) {grid-column: 8/9}

    body[data-load="false"] #header-archive {
        visibility: hidden;
        height: 0;
    }
}