#curtain-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    overflow: hidden;
    pointer-events: none; /* allow clicks through unless curtains cover */
}

.curtain {
    background: 
        repeating-linear-gradient(
            90deg,
            rgba(70, 14, 13, 1) 0%,
            rgba(110, 22, 21, 1) 16.67%,
            rgba(157, 35, 32, 1) 33.33%,
            rgba(205, 78, 52, 1) 50%,
            rgba(157, 35, 32, 1) 66.67%,
            rgba(110, 22, 21, 1) 83.33%,
            rgba(70, 14, 13, 1) 100%
        ),
        linear-gradient(
            180deg,
            rgba(157, 35, 32, 0) 40%, 
            rgba(157, 35, 32, 0.8) 100%
        );
    background-blend-mode: hue;
    background-size: 
        33% 100%,    
        100% 100%;   
    width: 50%;
    height: 100%;
    transition:
        transform 2s ease-in-out,
        background-size 2s ease-in-out,
        filter 2s ease-in-out;
    pointer-events: auto;
    box-shadow: 5px 5px 18px 5px rgba(0, 0, 0, 0.32); 
}

#curtain-wrapper.open .curtain {
    filter: brightness(1); 
}

.curtain-left { 
    transform: translateX(0);
    transform-origin: left;
}
.curtain-right { 
    transform: translateX(0);
    transform-origin: right;
}

/* Default behavior will be overridden by media queries */

/* Desktop: compress curtains to 20% width at sides */
@media (min-width: 768px) {
    #curtain-wrapper.open .curtain-left { transform: translateX(0) scaleX(0.2); }
    #curtain-wrapper.open .curtain-right { transform: translateX(0) scaleX(0.2); }
}

/* Other pages (static) -> instantly compressed to sides */
@media (min-width: 768px) {
    #curtain-wrapper.static .curtain-left { transform: translateX(0) scaleX(0.2); transition: none; }
    #curtain-wrapper.static .curtain-right { transform: translateX(0) scaleX(0.2); transition: none; }
}

/* Mobile: move curtains out of the way, then hide */
@media (max-width: 767px) {
    #curtain-wrapper.open .curtain-left { transform: translateX(-100%); }
    #curtain-wrapper.open .curtain-right { transform: translateX(100%); }
    
    #curtain-wrapper.open:not(.static) {
        animation: hideCurtains 0s 2s forwards;
    }

    @keyframes hideCurtains {
        to { visibility: hidden; }
    }
}