// Page transitions
.loading-screen {
    background-color: var(--alpha-page-transition-bg);
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1000000;
    transition: all 0.3s ease-in-out;

    .loading-overlay {
        background: transparent;
    }

    .reveal {
        position: absolute;
        left: 100%;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: var(--alpha-page-transition-bg);
    }

    &[data-effect="slide"] {
        transition: none;
        background: transparent;
        left: -100%;
    }

    &.loaded {
        .reveal {
            animation: reveal-anim-2 1.85s cubic-bezier(0.67, 0, 0.3, 1) forwards;
        }
    }

    &.in-from-right {
        left: 0;

        .reveal {
            animation: reveal-anim-1 1.1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
        }
    }
}

@keyframes reveal-anim-1 {
    0% {
        transform: translate3d(0, 0, 0);
    }

    30%,
    100% {
        transform: translate3d(-100%, 0, 0);
        animation-timing-function: cubic-bezier(0.67, 0, 0.3, 1);
    }
}

@keyframes reveal-anim-2 {

    0%,
    14.5% {
        transform: translate3d(0, 0, 0);
    }

    34.5%,
    100% {
        transform: translate3d(-100%, 0, 0);
        animation-timing-function: cubic-bezier(0.67, 0, 0.3, 1);
    }
}