/* PRELOADER STYLES - Dedicated file for theater curtain preloader */

/* Main preloader container */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000; /* Extremely high z-index to ensure visibility */
    background-color: #0a0a0a;
    display: flex !important;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    opacity: 1 !important; /* Force opacity */
    visibility: visible !important;
    transition: opacity 0.5s ease, visibility 0.5s ease; /* Add transition for smoother fade out */
}

/* Preloader content (masks and text) */
.preloader-content {
    text-align: center;
    position: relative;
    z-index: 5;
    color: white;
    opacity: 1;
    transition: opacity 0.5s ease;
    pointer-events: none;
    margin-top: 40px;
}

/* Main curtain container */
.curtain-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    overflow: hidden;
    box-shadow: inset 0 0 150px 50px rgba(0, 0, 0, 0.8);
}

/* Stage floor effect */
.curtain-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Aumentar altura para mayor visibilidad */
    background: linear-gradient(to bottom, #5a3410, #3a2208);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.8);
    z-index: 4; /* Reducir z-index para que las tablas estén por encima */
    
    /* Añadir textura de tablas de madera */
    background-image: 
        /* Líneas horizontales para las juntas entre tablas */
        repeating-linear-gradient(
            to right,
            rgba(0, 0, 0, 0.3) 0px,
            rgba(0, 0, 0, 0.3) 1px,
            transparent 1px,
            transparent 120px
        ),
        /* Líneas horizontales para las tablas */
        repeating-linear-gradient(
            to right,
            rgba(0, 0, 0, 0.2) 0px,
            rgba(0, 0, 0, 0.2) 1px,
            transparent 1px,
            transparent 40px
        ),
        /* Textura de grano de madera */
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px,
            transparent 4px
        ),
        /* Variación de color para realismo */
        repeating-linear-gradient(
            to right,
            rgba(90, 52, 16, 1) 0px,
            rgba(90, 52, 16, 1) 70px,
            rgba(75, 45, 15, 1) 70px,
            rgba(75, 45, 15, 1) 140px,
            rgba(65, 40, 10, 1) 140px,
            rgba(65, 40, 10, 1) 210px
        );
}

/* Stage spotlight */
.curtain-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 70%;
    height: 100%;
    transform: translateX(-50%);
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0) 60%
    );
    
    /* Añadir patrón para clavos/tornillos */
    background-image: radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0.4) 0px,
        rgba(0, 0, 0, 0.4) 1px,
        transparent 1px,
        transparent 30px
    );
    background-size: 120px 80px;
    background-position: 0 bottom;
    background-repeat: repeat-x;
    
    z-index: 1;
    pointer-events: none;
}

/* Añadir elementos 3D para el escenario */
.stage-floor {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 5;
    perspective: 500px;
    overflow: hidden;
}

.stage-floor::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: #2a1806;
    transform: rotateX(45deg);
    transform-origin: bottom;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

/* CURTAIN HALVES - CRITICAL VISIBILITY STYLES */
.curtain-half {
    position: absolute;
    width: 50%;
    height: 102%; /* Extra height to ensure full coverage */
    top: 0;
    background-color: #d10000 !important; /* Bright red base color - with !important */
    background: linear-gradient(180deg, #a50000, #d10000, #a50000) !important;
    transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.9);
    overflow: hidden;
    z-index: 4;
    visibility: visible !important; /* Force visibility */
    opacity: 1 !important; /* Force opacity */
    display: block !important; /* Force display */
}

/* Left curtain half */
.curtain-left {
    left: 0;
    border-right: 8px solid #540000;
    transform-origin: left;
}

/* Right curtain half */
.curtain-right {
    right: 0;
    border-left: 8px solid #540000;
    transform-origin: right;
}

/* Vertical folds texture */
.curtain-half::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5) 2px,
        rgba(0, 0, 0, 0.2) 2px,
        rgba(0, 0, 0, 0.2) 15px,
        rgba(0, 0, 0, 0.6) 15px,
        rgba(0, 0, 0, 0.6) 17px,
        rgba(0, 0, 0, 0.2) 17px,
        rgba(0, 0, 0, 0.2) 30px,
        rgba(0, 0, 0, 0.7) 30px,
        rgba(0, 0, 0, 0.7) 32px,
        rgba(0, 0, 0, 0.2) 32px,
        rgba(0, 0, 0, 0.2) 45px
    );
}

/* Secondary texture for smaller folds */
.curtain-half::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        /* Subtle grain texture */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='%23000000' fill-opacity='0.07' d='M0 0h1v1H0zM10 0h1v1h-1zM20 0h1v1h-1zM30 0h1v1h-1zM5 5h1v1H5zM15 5h1v1h-1zM25 5h1v1h-1zM35 5h1v1h-1zM0 10h1v1H0zM10 10h1v1h-1zM20 10h1v1h-1zM30 10h1v1h-1zM5 15h1v1H5zM15 15h1v1h-1zM25 15h1v1h-1zM35 15h1v1h-1z'/%3E%3C/svg%3E"),
        /* Subtle horizontal folds */
        repeating-linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0px,
            rgba(0, 0, 0, 0) 40px,
            rgba(0, 0, 0, 0.07) 40px,
            rgba(0, 0, 0, 0.07) 42px,
            rgba(0, 0, 0, 0) 42px,
            rgba(0, 0, 0, 0) 80px,
            rgba(0, 0, 0, 0.05) 80px,
            rgba(0, 0, 0, 0.05) 82px,
            rgba(0, 0, 0, 0) 82px,
            rgba(0, 0, 0, 0) 120px
        );
}

/* Pronounced curtain folds for 3D effect */
.curtain-fold {
    position: absolute;
    height: 100%;
    top: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 3;
    transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1);
}

.fold-left {
    width: 20px;
    left: 33%;
    transform: skewX(-4deg);
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.7);
}

.fold-right {
    width: 20px;
    right: 33%;
    transform: skewX(4deg);
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.7);
}

/* Multiple secondary folds for both sides */
.curtain-left::before {
    content: '';
    position: absolute;
    top: 0;
    right: 60%;
    width: 8px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    transform: skewX(-2deg);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4);
    z-index: 3;
}

.curtain-left::after {
    content: '';
    position: absolute;
    top: 0;
    right: 20%;
    width: 12px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45);
    transform: skewX(-3deg);
    box-shadow: 3px 0 12px rgba(0, 0, 0, 0.5);
    z-index: 3;
}

.curtain-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 60%;
    width: 8px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    transform: skewX(2deg);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.4);
    z-index: 3;
}

.curtain-right::after {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    width: 12px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45);
    transform: skewX(3deg);
    box-shadow: -3px 0 12px rgba(0, 0, 0, 0.5);
    z-index: 3;
}

/* Ornate top border with draping */
.curtain-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 65px;
    background: linear-gradient(to bottom, #ffdf00, #d4af37);
    z-index: 5;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

/* Top border texture */
.curtain-top::before {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 25px;
    background: repeating-linear-gradient(
        to right,
        #d4af37,
        #d4af37 20px,
        #ffdf00 20px,
        #ffdf00 40px
    );
    clip-path: polygon(
        0% 0%, 3.3% 100%, 6.6% 0%, 10% 100%,
        13.3% 0%, 16.6% 100%, 20% 0%, 23.3% 100%,
        26.6% 0%, 30% 100%, 33.3% 0%, 36.6% 100%,
        40% 0%, 43.3% 100%, 46.6% 0%, 50% 100%,
        53.3% 0%, 56.6% 100%, 60% 0%, 63.3% 100%,
        66.6% 0%, 70% 100%, 73.3% 0%, 76.6% 100%,
        80% 0%, 83.3% 100%, 86.6% 0%, 90% 100%,
        93.3% 0%, 96.6% 100%, 100% 0%
    );
}

/* Additional top border */
.curtain-top-border {
    position: absolute;
    top: 65px;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: #cc9900;
    z-index: 5;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

/* Theater mask decorations */
.curtain-decoration {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    z-index: 6;
    top: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.7));
    transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s ease;
}

.decoration-left {
    left: 100px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='38' fill='%23FFD700' stroke='%23CC9900' stroke-width='2'/%3E%3Cpath d='M40 15C30 15 20 25 20 40C20 55 30 65 40 65C50 65 60 55 60 40C60 25 50 15 40 15Z' fill='%23FFD700' stroke='%23CC9900' stroke-width='1'/%3E%3Ccircle cx='30' cy='35' r='5' fill='%23CC9900'/%3E%3Ccircle cx='50' cy='35' r='5' fill='%23CC9900'/%3E%3Cpath d='M25 50C30 60 50 60 55 50' fill='none' stroke='%23CC9900' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.decoration-right {
    right: 100px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='38' fill='%23C30010' stroke='%23780000' stroke-width='2'/%3E%3Cpath d='M40 15C30 15 20 25 20 40C20 55 30 65 40 65C50 65 60 55 60 40C60 25 50 15 40 15Z' fill='%23C30010' stroke='%23780000' stroke-width='1'/%3E%3Ccircle cx='30' cy='35' r='5' fill='%23780000'/%3E%3Ccircle cx='50' cy='35' r='5' fill='%23780000'/%3E%3Cpath d='M25 55C30 45 50 45 55 55' fill='none' stroke='%23780000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Preloader animation states */
/* Initial slight movement for anticipation */
#preloader.curtain-ready .curtain-left {
    transform: translateX(-5%) !important;
}

#preloader.curtain-ready .curtain-right {
    transform: translateX(5%) !important;
}

/* Curtain opening animation */
#preloader.curtain-open .curtain-left {
    transform: translateX(-100%) !important;
}

#preloader.curtain-open .curtain-right {
    transform: translateX(100%) !important;
}

#preloader.curtain-open .fold-left {
    transform: translateX(-100%) skewX(-4deg);
}

#preloader.curtain-open .fold-right {
    transform: translateX(100%) skewX(4deg);
}

#preloader.curtain-open .decoration-left {
    transform: translateX(-150px) rotate(-30deg);
    opacity: 0;
}

#preloader.curtain-open .decoration-right {
    transform: translateX(150px) rotate(30deg);
    opacity: 0;
}

/* Theater masks container */
.masks-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}

/* Individual mask styles */
.mask {
    width: 55px;
    height: 55px;
    margin: 0 15px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.5));
}

.comedy-mask {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='38' fill='%23FFD700' stroke='%23CC9900' stroke-width='2'/%3E%3Cpath d='M40 15C30 15 20 25 20 40C20 55 30 65 40 65C50 65 60 55 60 40C60 25 50 15 40 15Z' fill='%23FFD700' stroke='%23CC9900' stroke-width='1'/%3E%3Ccircle cx='30' cy='35' r='5' fill='%23CC9900'/%3E%3Ccircle cx='50' cy='35' r='5' fill='%23CC9900'/%3E%3Cpath d='M25 50C30 60 50 60 55 50' fill='none' stroke='%23CC9900' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    animation: comedyBounce 3s infinite alternate;
}

.tragedy-mask {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='38' fill='%23C30010' stroke='%23780000' stroke-width='2'/%3E%3Cpath d='M40 15C30 15 20 25 20 40C20 55 30 65 40 65C50 65 60 55 60 40C60 25 50 15 40 15Z' fill='%23C30010' stroke='%23780000' stroke-width='1'/%3E%3Ccircle cx='30' cy='35' r='5' fill='%23780000'/%3E%3Ccircle cx='50' cy='35' r='5' fill='%23780000'/%3E%3Cpath d='M25 55C30 45 50 45 55 55' fill='none' stroke='%23780000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    animation: tragedyBounce 3s infinite alternate;
}

/* Loading text styles */
.loading-text {
    font-family: 'Playfair Display', serif;
    font-size: 38px;
    margin: 0;
    font-weight: 700;
    letter-spacing: 3px;
    color: #ffd700;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
    animation: textGlow 2s infinite alternate;
}

/* Preloader animations */
@keyframes comedyBounce {
    0% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-5px) rotate(0deg); }
    100% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes tragedyBounce {
    0% { transform: translateY(0) rotate(5deg); }
    50% { transform: translateY(-5px) rotate(0deg); }
    100% { transform: translateY(-10px) rotate(-5deg); }
}

@keyframes textGlow {
    0% {
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
        color: #ffd700;
    }
    100% {
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
        color: #ffec80;
    }
}

/* Hidden preloader styles - IMPROVED */
.preloader-hidden {
    opacity: 0 !important;
    pointer-events: none;
    visibility: hidden !important;
}

.preloader-hidden .preloader-content {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Final hiding state - ensures page content is visible */
body.preloader-done #preloader {
    display: none !important;
    z-index: -1 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Main content visibility once preloader is complete */
body.preloader-done {
    overflow: visible !important;
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .curtain-decoration {
        width: 60px;
        height: 60px;
    }
    
    .decoration-left {
        left: 50px;
    }
    
    .decoration-right {
        right: 50px;
    }
    
    .curtain-top {
        height: 40px;
    }
    
    .mask {
        width: 40px;
        height: 40px;
    }
    
    .loading-text {
        font-size: 28px;
    }
}

/* Tablas individuales del escenario */
.stage-board {
    position: absolute;
    bottom: 0;
    height: 65px;
    background: linear-gradient(to bottom, #7d4a22, #4b2e14);
    border-left: 1px solid rgba(0, 0, 0, 0.4);
    border-right: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.5);
    
    /* Textura de grano de madera */
    background-image: 
        /* Líneas verticales para simular el grano */
        repeating-linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.1) 0px,
            rgba(0, 0, 0, 0.1) 1px,
            rgba(0, 0, 0, 0.05) 2px,
            rgba(0, 0, 0, 0.05) 3px,
            transparent 3px,
            transparent 8px
        ),
        /* Detalles de brillo */
        radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.1) 0,
            rgba(255, 255, 255, 0) 40px
        );
    
    /* Efecto 3D con transformación */
    transform: perspective(500px) rotateX(30deg);
    transform-origin: bottom;
    z-index: 5;
    
    /* Añadir efecto de desgaste en los bordes */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Añadir efecto de sombra para profundidad */
    box-shadow: 
        inset 0 10px 20px rgba(0, 0, 0, 0.4),
        0 -1px 4px rgba(0, 0, 0, 0.3);
}

/* Posición y tamaño de cada tabla */
.board-1 {
    left: 5%;
    width: 16%;
    filter: brightness(0.9);
}

.board-2 {
    left: 22%;
    width: 18%;
    filter: brightness(1.05);
    height: 68px; /* Ligera variación en altura */
}

.board-3 {
    left: 41%;
    width: 20%;
    filter: brightness(0.95);
}

.board-4 {
    right: 22%;
    width: 16%;
    filter: brightness(1);
}

.board-5 {
    right: 5%;
    width: 16%;
    filter: brightness(0.9);
    height: 63px; /* Ligera variación en altura */
}

/* Efecto de foco en el escenario */
.stage-spotlight {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 100px;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.08) 40%,
        rgba(255, 255, 255, 0) 70%
    );
    pointer-events: none;
    z-index: 6;
    
    /* Añadir efecto de pulso sutil */
    animation: spotlightPulse 4s infinite alternate;
}

/* Animación del spotlight */
@keyframes spotlightPulse {
    0% {
        opacity: 0.7;
        width: 45%;
    }
    100% {
        opacity: 1;
        width: 55%;
    }
}

/* Añadir una sutíl línea de borde del escenario */
.stage-floor::after {
    content: '';
    position: absolute;
    bottom: 79px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, 
        rgba(0, 0, 0, 0.8) 0%, 
        rgba(130, 82, 40, 0.6) 50%, 
        rgba(0, 0, 0, 0.8) 100%
    );
    box-shadow: 
        0 1px 0 rgba(255, 255, 255, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 7;
}

/* Añadir clavos/tornillos a las tablas */
.stage-board::before,
.stage-board::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(70, 40, 20, 1) 0%,
        rgba(40, 20, 10, 1) 50%,
        rgba(20, 10, 5, 1) 100%
    );
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.5);
    z-index: 8;
}

/* Posición del primer clavo */
.stage-board::before {
    top: 10px;
    left: 15%;
}

/* Posición del segundo clavo */
.stage-board::after {
    bottom: 15px;
    right: 15%;
}

/* Variaciones para las distintas tablas */
.board-1::before { left: 25%; top: 12px; }
.board-1::after { right: 20%; bottom: 18px; }

.board-2::before { left: 18%; top: 15px; }
.board-2::after { right: 25%; bottom: 12px; }

.board-3::before { left: 30%; top: 10px; }
.board-3::after { right: 18%; bottom: 15px; }

.board-4::before { left: 22%; top: 14px; }
.board-4::after { right: 22%; bottom: 13px; }

.board-5::before { left: 15%; top: 16px; }
.board-5::after { right: 28%; bottom: 10px; }

/* Añadir un tercer clavo en posición variable para cada tabla */
.board-1::after, .board-2::after, .board-3::after, .board-4::after, .board-5::after {
    content: '';
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.5),
        8px -20px 0 -1px rgba(40, 20, 10, 1),
        8px -20px 0 -1px rgba(40, 20, 10, 0.5);
}

/* Efecto de luz reflejada en las tablas */
.stage-board::before {
    /* Añadir efecto de brillo alrededor del clavo */
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.5),
        0 0 15px 5px rgba(255, 255, 255, 0.03);
}

/* Movimiento sutil de las tablas durante la animación */
#preloader.curtain-ready .stage-board {
    transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1);
}

#preloader.curtain-open .stage-board {
    transform: perspective(500px) rotateX(30deg) translateY(-2px);
    transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Variaciones sutiles para cada tabla */
#preloader.curtain-open .board-1 {
    transform: perspective(500px) rotateX(31deg) translateY(-1px);
    transition-delay: 0.1s;
}

#preloader.curtain-open .board-2 {
    transform: perspective(500px) rotateX(29deg) translateY(-2px);
    transition-delay: 0.05s;
}

#preloader.curtain-open .board-3 {
    transform: perspective(500px) rotateX(30deg) translateY(-3px);
    transition-delay: 0.15s;
}

#preloader.curtain-open .board-4 {
    transform: perspective(500px) rotateX(32deg) translateY(-1px);
    transition-delay: 0.2s;
}

#preloader.curtain-open .board-5 {
    transform: perspective(500px) rotateX(29.5deg) translateY(-2px);
    transition-delay: 0.1s;
}

/* Amplificar el efecto de spotlight durante la animación */
#preloader.curtain-open .stage-spotlight {
    opacity: 1;
    width: 65%;
    transition: opacity 1.5s ease, width 1.5s ease;
}

/* Ajuste de sombras durante la apertura para mejor efecto de iluminación */
#preloader.curtain-open .stage-board {
    box-shadow: 
        inset 0 10px 20px rgba(0, 0, 0, 0.3),
        0 -1px 4px rgba(0, 0, 0, 0.2),
        0 5px 15px rgba(0, 0, 0, 0.4);
}

/* Efecto de polvo/partículas que se levantan al abrir la cortina */
.stage-dust {
    position: absolute;
    bottom: 78px;
    left: 0;
    width: 100%;
    height: 20px;
    background-image: 
        radial-gradient(circle at 10% 50%, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0) 5px),
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0) 4px),
        radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0) 6px),
        radial-gradient(circle at 40% 50%, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0) 3px),
        radial-gradient(circle at 60% 50%, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0) 5px),
        radial-gradient(circle at 70% 50%, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0) 4px),
        radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0) 6px),
        radial-gradient(circle at 90% 50%, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0) 3px);
    opacity: 0;
    z-index: 6;
    pointer-events: none;
}

#preloader.curtain-open .stage-dust {
    animation: dustRise 2s ease-out forwards;
}

@keyframes dustRise {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    30% {
        opacity: 0.7;
    }
    100% {
        opacity: 0;
        transform: translateY(-40px);
    }
}

/* Animación de vibración del suelo cuando se abre la cortina */
@keyframes floorVibrate {
    0% { transform: translateY(0); }
    10% { transform: translateY(-1px); }
    20% { transform: translateY(0.5px); }
    30% { transform: translateY(-0.5px); }
    40% { transform: translateY(0.25px); }
    50% { transform: translateY(-0.25px); }
    60% { transform: translateY(0.1px); }
    70% { transform: translateY(-0.1px); }
    80% { transform: translateY(0.05px); }
    90% { transform: translateY(-0.05px); }
    100% { transform: translateY(0); }
}