/* =================================
   RESET GLOBAL
================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    background-color:#0f0d10;
}

body{
    background-color:#0f0d10;
    font-family:"Cinzel",serif;
    min-height:100vh;
    overflow-x:hidden;
    overflow-y:auto;
}

/* ============================
   FOOTER
   ============================ */

footer {
    width: 100%;
    text-align: center;
    color: #aaaaaa;
    font-size: 0.8rem;
    margin: 10px 0 18px;
    background: transparent;
    border: none;
}

/* =================================
   TEATRO / CONTENEDOR PRINCIPAL
================================= */

.page-container{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}


.theatre-window{
    width:100%;
    max-width:900px;
    margin:60px auto 0;
    padding:0 15px;
    position:relative;
    box-sizing:border-box;
}

.theatre-inner{
    position:relative;
    width:100%;
    min-height:600px;
    height:auto;
    border:10px solid #d4af37;
    border-radius:36px;
    overflow:hidden;
    background-color:#000;
}


/* =================================
   CORTINAS
================================= */

/* TELÓN TRASERO QUE SE ABRE */

.curtain-back{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    overflow:hidden;
    z-index:3;
}

.curtain-back::before,
.curtain-back::after{
    content:"";
    position:absolute;
    top:0;
    width:50%;
    height:100%;
    background:url("../images/curtain-back.png") center center / 100% 100% no-repeat;
    transition:transform 1.8s ease-in-out;
}

.curtain-back::before{
    left:0;
    background-position:left center;
}

.curtain-back::after{
    right:0;
    background-position:right center;
}

.curtain-back.curtain-open::before{
    transform:translateX(-100%);
}

.curtain-back.curtain-open::after{
    transform:translateX(100%);
}


/* CORTINAS ESTÁTICAS DEL MARCO */

.curtain-static{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background:url("../images/curtain-closed.png")
               center center / 150% 190% no-repeat;

    pointer-events:none;
    z-index:8;
}


/* =================================
   MAGA PRINCIPAL
================================= */

.mage-center{
    position:absolute;
    bottom:10%;
    left:50%;
    transform:translateX(-50%);
    width:340px;
    z-index:15;
    pointer-events:none;
    transition:transform 1.5s ease,opacity 1.5s ease;
}

.mage-center.exit-left{
    transform:translateX(-140%) !important;
    opacity:0 !important;
}

.mage-center.slide-left{
    transform:translateX(-140%) !important;
    opacity:0 !important;
}


/* =================================
   CLICK HERE LINK
================================= */

.click-here{
    color:#f5d77c;
    text-decoration:underline;
    text-underline-offset:4px;
    cursor:pointer;
    font-weight:600;
    position:relative;
    z-index:100;
}


/* =================================
   INTRO BANNER
================================= */

.intro-banner{
    position:absolute;
    bottom:4%;
    left:50%;
    transform:translateX(-50%);
    width:65%;
    padding:30px 45px;

    background:radial-gradient(circle at center,rgba(0,0,0,0.85),rgba(0,0,0,0.60));
    border:3px solid #d4af37;
    border-radius:50%;
    box-shadow:0 0 20px rgba(212,175,55,0.7);

    text-align:center;
    color:#d4af37;

    font-size:1.1rem;
    line-height:1.6;
    font-weight:500;

    z-index:20;
    pointer-events:auto;

    animation:glowPulse 3s ease-in-out infinite;
    transition:opacity 1s ease;
}

.intro-banner.fade-out{
    opacity:0 !important;
    pointer-events:none;
}

.intro-banner a{
    color:#f5d77c;
    font-weight:600;
    text-decoration:underline !important;
    text-underline-offset:4px;
    cursor:pointer;
    position:relative;
    z-index:50;
}


/* TEXTO TYPER */

.intro-banner-text{
    font-family:"Quintessential",serif;
    font-weight:400;
}


/* ANIMACIÓN DEL BANNER */

@keyframes glowPulse{

    0%{
        box-shadow:0 0 12px rgba(212,175,55,0.7);
    }

    50%{
        box-shadow:0 0 22px rgba(212,175,55,1);
    }

    100%{
        box-shadow:0 0 12px rgba(212,175,55,0.7);
    }

}


/* =================================
   VIDEO BACKGROUND
================================= */

.scene-video{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:1;
    opacity:0;
    transition:opacity 1s ease;
    pointer-events:none;
}

.scene-video.show{
    opacity:1;
}


/* =================================
   MAGA 2
================================= */

.mage-two{
    position:absolute;
    bottom:0%;
    left:50%;
    transform:translateX(-50%);
    height:76%;
    z-index:5;
    pointer-events:none;
    opacity:1;
    transition:opacity 1s ease;
}

.mage-two.hidden{
    opacity:0;
}


.mage-hand{
    position:absolute;
    bottom:0%;
    left:50%;
    transform:translateX(-50%);
    height:76%;
    z-index:6;
    pointer-events:none;
    opacity:1;
    transition:opacity 1s ease;
    transform-origin:55% 70%;
}

.mage-hand.hidden{
    opacity:0;
}

.mage-hand.tap-wand{
    animation:wandTap 0.6s ease;
}


/* ANIMACIÓN VARITA */

@keyframes wandTap{

    0%{
        transform:translate(-50%,0) rotate(0deg);
    }

    40%{
        transform:translate(-50%,6%) rotate(18deg);
    }

    100%{
        transform:translate(-50%,0) rotate(0deg);
    }

}


/* =================================
   CARTAS MÁGICAS
================================= */

.magic-cards{
    position:absolute;
    bottom:22%;
    left:50%;
    transform:translateX(-50%);
    width:260px;
    height:260px;
    z-index:18;
}


/* CARTA BASE */

.magic-card{
    position:absolute;
    width:40px;
    opacity:0;
    transform:translate(0,40px) scale(0.3) rotate(0deg);
    transform-origin:50% 100%;
    cursor:pointer;
    transition:
        transform 0.3s ease,
        border 0.15s ease,
        box-shadow 0.15s ease;

    border:2px solid transparent;
    border-radius:6px;
    pointer-events:auto;
}


.magic-card img{
    width:100%;
    height:auto;
    display:block;
    border-radius:inherit;
}


.magic-card:hover{
    border:2px solid gold;
    box-shadow:0 0 4px gold;
}


/* TOOLTIP */

.magic-card[data-label]::after{

    content:attr(data-label);

    position:absolute;
    left:50%;
    top:100%;
    transform:translateX(-50%);
    margin-top:6px;

    padding:4px 8px;

    font-size:13px;
    font-family:"Quintessential",serif;
    font-weight:700;

    color:#ffd700;

    background:rgba(0,0,0,0.85);
    border:1px solid rgba(255,215,0,0.7);
    border-radius:6px;

    white-space:nowrap;

    opacity:0;
    pointer-events:none;

    transition:opacity 0.2s ease;

    z-index:30;
}

.magic-card[data-label]:hover::after{
    opacity:1;
}


.magic-card.show{
    opacity:1;
}


/* POSICIÓN FINAL DE CARTAS */

.card-1{bottom:4%;left:29%;--final-rot:-8deg;}
.card-2{bottom:30%;left:-10%;--final-rot:-2deg;}
.card-3{bottom:38%;left:37%;--final-rot:4deg;}
.card-4{bottom:85%;left:87%;--final-rot:0deg;}
.card-5{bottom:88%;left:6%;--final-rot:-12deg;}
.card-6{bottom:18%;left:75%;--final-rot:10deg;}
.card-7{bottom:50%;left:92%;--final-rot:12deg;}


/* ANIMACIONES DE ENTRADA */

.magic-card.show.card-1{animation:cardFly1 0.9s ease-out forwards,cardHover 1.4s ease-in-out 0.9s infinite alternate;}
.magic-card.show.card-2{animation:cardFly2 0.9s ease-out forwards,cardHover 1.4s ease-in-out 0.9s infinite alternate;}
.magic-card.show.card-3{animation:cardFly3 0.9s ease-out forwards,cardHover 1.4s ease-in-out 0.9s infinite alternate;}
.magic-card.show.card-4{animation:cardFly4 0.9s ease-out forwards,cardHover 1.4s ease-in-out 0.9s infinite alternate;}
.magic-card.show.card-5{animation:cardFly5 0.9s ease-out forwards,cardHover 1.4s ease-in-out 0.9s infinite alternate;}
.magic-card.show.card-6{animation:cardFly6 0.9s ease-out forwards,cardHover 1.4s ease-in-out 0.9s infinite alternate;}
.magic-card.show.card-7{animation:cardFly7 0.9s ease-out forwards,cardHover 1.4s ease-in-out 0.9s infinite alternate;}


/* =================================
   ANIMACIONES DE VUELO DE CARTAS
================================= */

@keyframes cardFly1{
0%{transform:translate(-20px,40px) scale(0.3) rotate(-40deg);}
60%{transform:translate(-25px,10px) scale(1.05) rotate(-18deg);}
100%{transform:translate(0,0) scale(1) rotate(-10deg);}
}

@keyframes cardFly2{
0%{transform:translate(-5px,40px) scale(0.3) rotate(-30deg);}
60%{transform:translate(-5px,5px) scale(1.05) rotate(-8deg);}
100%{transform:translate(0,0) scale(1) rotate(-2deg);}
}

@keyframes cardFly3{
0%{transform:translate(10px,40px) scale(0.3) rotate(-20deg);}
60%{transform:translate(15px,0px) scale(1.05) rotate(8deg);}
100%{transform:translate(0,0) scale(1) rotate(6deg);}
}

@keyframes cardFly4{
0%{transform:translate(25px,40px) scale(0.3) rotate(-10deg);}
60%{transform:translate(30px,10px) scale(1.05) rotate(15deg);}
100%{transform:translate(0,0) scale(1) rotate(10deg);}
}

@keyframes cardFly5{
0%{transform:translate(-25px,40px) scale(0.3) rotate(-30deg);opacity:0;}
60%{transform:translate(-35px,5px) scale(1.05) rotate(-18deg);opacity:1;}
100%{transform:translate(0,0) scale(1) rotate(-14deg);opacity:1;}
}

@keyframes cardFly6{
0%{transform:translate(0,40px) scale(0.3) rotate(-15deg);opacity:0;}
60%{transform:translate(0,5px) scale(1.05) rotate(0deg);opacity:1;}
100%{transform:translate(0,0) scale(1) rotate(2deg);opacity:1;}
}

@keyframes cardFly7{
0%{transform:translate(20px,40px) scale(0.3) rotate(-5deg);opacity:0;}
60%{transform:translate(30px,5px) scale(1.05) rotate(12deg);opacity:1;}
100%{transform:translate(0,0) scale(1) rotate(12deg);opacity:1;}
}


/* =================================
   ANIMACIÓN DE FLOTADO
================================= */

@keyframes cardHover{

0%{
transform:translate(0,0) scale(1) rotate(var(--final-rot,0deg));
}

100%{
transform:translate(0,-6px) scale(1.03)
rotate(calc(var(--final-rot,0deg) + 1deg));
}

}