/* persona.quest - Art Deco Theater / Masks & Persona */
/* Colors: #f2e8d5, #c9a96e, #7a6530, #0f0a1e, #1a0a2e, #8b6040, #1a1a1a, #9a8eb0 */
/* Fonts: Poiret One (display), Cormorant Garamond (body 400), Space Mono (stage) */

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

body {
    font-family: 'Cormorant Garamond', serif;
    background: #0f0a1e;
    color: #f2e8d5;
    overflow-x: hidden;
}

/* Acts */
.act {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.act-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 640px;
    padding: 60px 30px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}

.act.visible .act-content {
    opacity: 1;
    transform: translateY(0);
}

/* Chevron Background Pattern */
.chevron-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.05;
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 20px,
        #c9a96e 20px,
        #c9a96e 22px
    );
}

.chevron-bg-2 {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 30px,
        #c9a96e 30px,
        #c9a96e 32px
    );
}

.chevron-bg-3 {
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 40px,
        #c9a96e 40px,
        #c9a96e 42px
    );
}

/* Section Colors */
.act-1 { background: #0f0a1e; }
.act-2 { background: #1a0a2e; }
.act-3 { background: #1a1a1a; }
.act-4 { background: #0f0a1e; }
.act-5 { background: #1a0a2e; }

/* Stage Direction */
.stage-direction {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.25em;
    color: #7a6530;
    display: block;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.final-direction {
    margin-top: 30px;
    color: #9a8eb0;
}

/* Domain Title */
.domain-title {
    font-family: 'Poiret One', cursive;
    font-size: 64px;
    letter-spacing: 0.08em;
    color: #c9a96e;
    line-height: 1;
    margin-bottom: 40px;
}

/* Act Headings */
.act-heading {
    font-family: 'Poiret One', cursive;
    font-size: 42px;
    letter-spacing: 0.08em;
    color: #c9a96e;
    margin-bottom: 30px;
}

/* Act Text */
.act-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    line-height: 1.8;
    color: #f2e8d5;
    margin-bottom: 20px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Art Deco Mask */
.mask-svg {
    width: 220px;
    height: 290px;
    margin: 0 auto 40px;
    display: block;
    filter: drop-shadow(0 0 20px rgba(201, 169, 110, 0.2));
}

.mask-outline {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2.5s ease;
}

.act-1.visible .mask-outline {
    stroke-dashoffset: 0;
}

/* Deco Frame */
.deco-frame {
    position: relative;
    padding: 40px;
    margin: 0 auto;
    max-width: 520px;
}

.frame-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    border-color: #c9a96e;
    border-style: solid;
    border-width: 0;
}

.frame-corner.tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.frame-corner.tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.frame-corner.bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.frame-corner.br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

/* Split Mask (Act III) */
.split-mask-container {
    display: flex;
    justify-content: center;
    margin: 30px auto;
    width: 220px;
    height: 290px;
    position: relative;
}

.mask-half {
    width: 110px;
    height: 290px;
    overflow: hidden;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.mask-half svg {
    width: 220px;
    height: 290px;
}

.mask-left {
    transform: translateX(0);
}

.mask-right {
    transform: translateX(0);
}

.split-mask-container.split .mask-left {
    transform: translateX(-30px) rotate(-5deg);
}

.split-mask-container.split .mask-right {
    transform: translateX(30px) rotate(5deg);
}

/* Mirror Circle (Act IV) */
.mirror-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid #c9a96e;
    margin: 30px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: radial-gradient(circle, rgba(201,169,110,0.1) 0%, transparent 70%);
}

.mirror-text {
    font-family: 'Poiret One', cursive;
    font-size: 48px;
    color: #9a8eb0;
    opacity: 0;
    transition: opacity 1s ease;
}

.act-4.visible .mirror-text {
    opacity: 1;
}

/* Curtain Call */
.curtain-call {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid #7a6530;
}

.curtain-text {
    font-family: 'Poiret One', cursive;
    font-size: 28px;
    letter-spacing: 0.1em;
    color: #8b6040;
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .domain-title {
        font-size: 40px;
    }

    .act-heading {
        font-size: 30px;
    }

    .act-text {
        font-size: 17px;
    }

    .mask-svg {
        width: 160px;
        height: 210px;
    }

    .split-mask-container {
        width: 160px;
        height: 210px;
    }

    .mask-half svg {
        width: 160px;
        height: 210px;
    }

    .mask-half {
        width: 80px;
        height: 210px;
    }
}