#coming-soon {z-index: 200;}
#coming-soon .--bg {
    opacity: 0;
    padding: 1rem;
}
@media only screen and (min-width: 768px) {
    #coming-soon .--bg {padding: 2rem;}
}

body:not([data-load="true"]) {overflow: hidden;}
body:not([data-load="true"]) header,
body:not([data-load="true"]) main,
body:not([data-load="true"]) footer {display: none;}

#splash {z-index: 200;}
#splash .--bg {
    opacity: 0;
    padding: 1rem;
}

#splash .--icon {
    top: 50vh;
    left: 50vw;
    opacity: 0;
    transform: translate(-50%, -50%);
    width: 8.5vw;
}

@media only screen and (min-width: 768px) {
    #splash .--bg {
        padding: 2rem;
    }
}

@media only screen and (min-width: 1096px) {
    #splash .--icon {width: 4.5vw;}
}


/* 
HEADER
*/
header {
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
}

#header-bg {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    transition: opacity 500ms ease-in-out;
}
header.--transparent #header-bg {opacity: 0;}


header *:not(#header--bg) {z-index: 5;}

/* LOGO */
#header-logo img {
    width: auto;
    height: 2.25rem;
}


/* 
MENU
*/
#menu {
    min-height: calc(var(--vh) * 100);
    max-height: calc(var(--vh) * 100);
    z-index: 99;
}
#menu[data-status='close'] {transform: translateY(100%);}

#menu-pages {margin-bottom: var(--size-d);}
#menu-pages a:not(:last-of-type) {margin-bottom: .2em;}

#menu-lang a,
#menu-lang > span {opacity: .25;}
#menu-lang a.--active {opacity: 1;}
#menu-lang > span {margin: 0 .2em;}

body:not([data-template='home']) #header-menu a,
body:not([data-template='home']) #menu-pages a {opacity: var(--alpha);}

#header-menu a.--active,
#menu-pages a.--active {opacity: 1 !important;}


@media only screen and (min-width: 768px) {
    #header-menu {
        column-gap: var(--size-ss);
        height: fit-content;
    }
    
    #header-menu * {height: fit-content;}

    #header-langs a,
    #header-langs > span {opacity: var(--alpha);}
    #header-langs a.--active {opacity: 1;}
    #header-langs > span {margin: 0 .15em;}
}

@media (hover: hover) {
    #header-menu > a,
    #header-langs a {transition: 250ms ease-in-out;}

    #header-menu:hover > a,
    #header-langs:hover a {opacity: var(--alpha);}
    
    #header-menu > a:hover,
    #header-langs a:hover {opacity: 1 !important;}
}