header {z-index: 100;}


/* LOGO */
#header-home {
    top: calc(50vh - 5rem);
    left: 1rem;
    z-index: 100;
}
#header-home img {
    width: auto;
    height: 10rem;
}

body[data-load="false"] #header-home {animation: loadAni 1000ms alternate-reverse infinite;}
@keyframes loadAni {
    0% {opacity: .2;}
    100% {opacity: 1;}
}


/* NAV */
header > div {
    top: calc(50vh - 5rem);
    right: 1rem;
    z-index: 100;
}

header > div:nth-child(2) {height: fit-content;}
@media only screen and (min-width: 1200px) {
    header > div:nth-child(2) {
        flex-direction: row;
        align-items: flex-start;
        gap: .5rem;
    }

    body[data-template='video'] header > div:nth-child(2) {flex-direction: column;}
}

.header-nav {
    height: fit-content;
    border-radius: 2px;
}
.header-nav[data-status='close'] {height: 2.125rem;}
.header-nav[data-status='open'] {height: auto;}

#header-pages > button:first-of-type {margin-bottom: .75rem;}
.header-link:not(:last-of-type) {margin-bottom: .25rem;}

.header-link {
    opacity: .25;
    transition: 250ms ease-in-out;
}
.header-link.--active {opacity: 1;}

#header-filters,
#header-videos,
#header-directors {margin-top: 4px;}
@media only screen and (min-width: 1200px) {
    #header-pages {
        margin-left: auto;
        order: 2;
    }
    #header-filters,
    #header-directors {
        order: 1;
        margin-top: 0;
    }
    #header-videos {
        order: 3;
        margin-top: 0;
        align-self: flex-end;
    }
}

#header-videos {column-gap: 4px;}

@media (hover: hover) {
    header > div .header-nav {transition: opacity 250ms ease-in-out;}
    header > div:hover .header-nav {opacity: .5;}
    header > div .header-nav:hover {opacity: 1;}

    .header-link:hover {opacity: 1;}
}