.splash {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    background-color: var(--color-background-splash);
}

.splash-logo {
    -webkit-animation: enterLogo 1200ms cubic-bezier(0.64, 0.04, 0.35, 1);
            animation: enterLogo 1200ms cubic-bezier(0.64, 0.04, 0.35, 1);
}
.splash-logo img {
    width: 100%;
}

.is--completed .splash-logo {
    -webkit-animation: leaveLogo 800ms cubic-bezier(0.64, 0.04, 0.35, 1);
            animation: leaveLogo 800ms cubic-bezier(0.64, 0.04, 0.35, 1);
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-delay: 200ms;
            animation-delay: 200ms;
}

.splash-loading {
    height: 2px;
    width: 160px;
    border-radius: 10px;
    background-color: rgba(255,255,255, .1);
    position: relative;
    -webkit-animation: enterLoading 1200ms cubic-bezier(0.64, 0.04, 0.35, 1);
            animation: enterLoading 1200ms cubic-bezier(0.64, 0.04, 0.35, 1);
    margin: var(--space-xxl) auto 0;
}

.is--completed .splash-loading {
    -webkit-animation: leaveLoading 800ms cubic-bezier(0.64, 0.04, 0.35, 1);  
            animation: leaveLoading 800ms cubic-bezier(0.64, 0.04, 0.35, 1);  
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-delay: 200ms;
            animation-delay: 200ms;
}

.splash-loading-bar {
    position: absolute;
    background-color: rgba(255, 255, 255, .7);
    top: 0;
    left: 0;
    height: 100%;
    -webkit-transition: width 800ms cubic-bezier(0.64, 0.04, 0.35, 1);
            transition: width 800ms cubic-bezier(0.64, 0.04, 0.35, 1);
}

@-webkit-keyframes enterLogo {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
}

@keyframes enterLogo {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

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

@-webkit-keyframes enterLoading {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
}

@keyframes enterLoading {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

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

@-webkit-keyframes leaveLogo {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }
}

@keyframes leaveLogo {
    0% {
        opacity: 1;
        transform: translateY(0px);
    }

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

@-webkit-keyframes leaveLoading {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
}

@keyframes leaveLoading {
    0% {
        opacity: 1;
        transform: translateY(0px);
    }

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