/* ============================================
   CURTAIN OVERLAY - Theatrical Opening Effect
   ============================================ */

.curtain-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: auto;
}

/* --- Curtain Panels --- */
.curtain-panel {
    position: fixed;
    top: 0;
    width: 50%;
    height: 100vh;
    z-index: 9999;
    background-color: var(--curtain-red);
    background-image:
        /* Vertical fold shadows - simulating draped fabric */
        linear-gradient(90deg,
            transparent 0%,
            var(--curtain-red-dark) 8%,
            var(--curtain-red) 16%,
            var(--curtain-red-light) 22%,
            var(--curtain-red) 30%,
            var(--curtain-red-dark) 40%,
            var(--curtain-red) 48%,
            var(--curtain-red-sheen) 52%,
            var(--curtain-red) 58%,
            var(--curtain-red-dark) 68%,
            var(--curtain-red) 76%,
            var(--curtain-red-light) 82%,
            var(--curtain-red) 90%,
            var(--curtain-red-dark) 96%,
            var(--curtain-red) 100%
        ),
        /* Subtle horizontal grain - fabric texture */
        repeating-linear-gradient(
            180deg,
            transparent,
            rgba(0, 0, 0, 0.02) 1px,
            transparent 3px
        );
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
    transition: transform 2.2s var(--ease-curtain);
    will-change: transform;
}

.curtain-panel--left {
    left: 0;
    transform: translateX(0);
    border-right: 2px solid var(--curtain-red-dark);
}

.curtain-panel--right {
    right: 0;
    transform: translateX(0);
    border-left: 2px solid var(--curtain-red-dark);
}

/* Bottom shadow on each panel for depth */
.curtain-panel::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
    pointer-events: none;
}

/* --- Open State --- */
.curtain-overlay.curtain-open .curtain-panel--left {
    transform: translateX(-105%);
}

.curtain-overlay.curtain-open .curtain-panel--right {
    transform: translateX(105%);
}

/* --- Valance (decorative top border) --- */
.curtain-valance {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 10000;
    background: linear-gradient(180deg,
        var(--curtain-red-dark) 0%,
        var(--curtain-red) 30%,
        var(--curtain-red-dark) 70%,
        #3A0000 100%
    );
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.8),
        inset 0 -3px 8px rgba(0, 0, 0, 0.3);
    transition: opacity 0.8s ease 2.5s, transform 0.8s ease 2.5s;
}

/* Gold trim on valance bottom */
.curtain-valance::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 5%,
        var(--gold-dark) 15%,
        var(--gold) 30%,
        var(--gold-light) 50%,
        var(--gold) 70%,
        var(--gold-dark) 85%,
        transparent 95%
    );
}

/* Scalloped/draped shape on valance bottom using clip-path */
.curtain-valance::before {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 15px;
    background: var(--curtain-red-dark);
    clip-path: polygon(
        0% 0%, 5% 100%, 10% 0%, 15% 100%, 20% 0%, 25% 100%, 30% 0%,
        35% 100%, 40% 0%, 45% 100%, 50% 0%, 55% 100%, 60% 0%,
        65% 100%, 70% 0%, 75% 100%, 80% 0%, 85% 100%, 90% 0%,
        95% 100%, 100% 0%
    );
    opacity: 0.7;
}

/* Valance fades after curtain opens */
.curtain-overlay.curtain-open .curtain-valance {
    opacity: 0;
    transform: translateY(-100%);
}

/* --- Hidden state (after animation fully done) --- */
.curtain-overlay.curtain-done {
    display: none;
}