/* =========================================
   NASA-Punk Transition System (Module)
   Version: 1.0
   ========================================= */

.transition-curtain {
    position: fixed;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    display: flex;
    transform: skewX(-15deg) translateX(-100%);
}

.curtain-col {
    flex: 1;
    height: 100%;
    transform: scaleX(1.1);
}

.c1 {
    background: var(--const-red);
}

.c2 {
    background: var(--const-orange);
}

.c3 {
    background: var(--const-yellow);
}

.c4 {
    background: var(--const-blue);
}

.curtain-exit {
    animation: wipe-in 0.8s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

.curtain-intro {
    animation: wipe-out 0.8s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

@keyframes wipe-in {
    from {
        transform: skewX(-15deg) translateX(-100%);
    }

    to {
        transform: skewX(-15deg) translateX(0%);
    }
}

@keyframes wipe-out {
    from {
        transform: skewX(-15deg) translateX(0%);
    }

    to {
        transform: skewX(-15deg) translateX(100%);
    }
}