/* Image cover */
#img-cover-container {
    will-change: transform;
    animation: imgCoverAnimation 10s;
}

@keyframes imgCoverAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}





/* Logo animation */
#logo {
    will-change: opacity;
    animation: logoAnimationInitial 6s;
}

@keyframes logoAnimationInitial {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#logo_E {
    will-change: opacity;
    animation: logoAnimation 1s;
    animation-delay: 2.5s;
}

#logo_X {
    will-change: opacity;
    animation: logoAnimation 1s;
    animation-delay: 3.4s;
}

#logo_O {
    will-change: opacity;
    animation: logoAnimation 1s;
    animation-delay: 3.1s;
}

#logo_P {
    will-change: opacity;
    animation: logoAnimation 1s;
    animation-delay: 3s;
}

#logo_L {
    will-change: opacity;
    animation: logoAnimation 1s;
    animation-delay: 3.5s;
}

#logo_A {
    will-change: opacity;
    animation: logoAnimation 1s;
    animation-delay: 2.8s;
}

#logo_N {
    will-change: opacity;
    animation: logoAnimation 1s;
    animation-delay: 3.3s;
}



@keyframes logoAnimation {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 100%;
    }

    12% {
        opacity: 0;
    }

    20% {
        opacity: 100%;
    }

    27% {
        opacity: 0;
    }

    30% {
        opacity: 100%;
    }

    45% {
        opacity: 0;
    }

    60% {
        opacity: 100%;
    }

    72% {
        opacity: 0;
    }

    78% {
        opacity: 100%;
    }

    88% {
        opacity: 0;
    }

    90% {
        opacity: 100%;
    }

    94% {
        opacity: 0;
    }

    100% {
        opacity: 100%;
    }
}





/* Navigation animation */
#nav-bottom,
#btn-explore {
    will-change: transform, opacity;
    animation: navBottomAnimation 6s;
}

@keyframes navBottomAnimation {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

    62% {
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 100%;
    }
}

#nav-top {
    will-change: transform, opacity;
    animation: navTopAnimation 6s;
}

@keyframes navTopAnimation {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }

    62% {
        transform: translateY(-50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 100%;
    }
}