/* diplomacy.bar - Art-Deco Embassy Noir */

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

:root{
    --obsidian:#0D0B0A;
    --anthracite:#1A1714;
    --gold:#C9A84C;
    --cognac:#B8722D;
    --ivory:#E8E0D0;
    --smoke:#8A8279;
    --vermillion:#9B2335;
    --teal:#0F2027;
}

body{
    background:var(--obsidian);
    color:var(--ivory);
    font-family:'Libre Baskerville',serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.2vw,1.15rem);
    line-height:1.75;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Fog layer */
.fog-layer{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

.fog-cloud{
    position:absolute;
    border-radius:50%;
    background:radial-gradient(circle,rgba(138,130,121,0.04),transparent 70%);
}

.fc1{width:600px;height:400px;top:10%;left:-10%;animation:fogDrift 60s ease-in-out infinite}
.fc2{width:800px;height:500px;top:40%;right:-20%;animation:fogDrift 90s ease-in-out infinite reverse}
.fc3{width:500px;height:350px;bottom:5%;left:30%;animation:fogDrift 120s ease-in-out infinite}

@keyframes fogDrift{
    0%,100%{transform:translateX(0)}
    50%{transform:translateX(80px)}
}

/* Monogram */
.monogram{
    position:fixed;
    top:20px;right:20px;
    z-index:50;
    font-family:'Cinzel',serif;
    font-weight:700;
    font-size:0.7rem;
    letter-spacing:0.1em;
    color:var(--gold);
    background:none;
    border:1px solid var(--gold);
    border-radius:50%;
    width:40px;height:40px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:background 0.3s ease,color 0.3s ease;
}

.monogram:hover{
    background:var(--gold);
    color:var(--obsidian);
}

/* Acts */
.act{
    position:relative;
    z-index:1;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(40px,6vw,80px);
    overflow:hidden;
}

/* Act I */
.act-1{
    background:var(--obsidian);
}

.gold-line{
    width:0;
    height:1px;
    background:var(--gold);
    margin-bottom:2rem;
    transition:width 2s cubic-bezier(0.25,0.1,0.25,1);
}

.gold-line.drawn{width:clamp(200px,50vw,500px)}

.hero-title{
    font-family:'Poiret One',sans-serif;
    font-weight:400;
    font-size:clamp(3rem,8vw,9rem);
    letter-spacing:0.12em;
    line-height:1.1;
    text-align:center;
    color:var(--ivory);
    opacity:0;
    transition:opacity 1.5s ease;
}

.hero-title.shown{opacity:1}

.hero-subtitle{
    font-family:'Cinzel',serif;
    font-weight:700;
    font-size:clamp(0.55rem,0.9vw,0.75rem);
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--smoke);
    margin-top:1.5rem;
    text-align:center;
    opacity:0;
    transition:opacity 1s ease 0.5s;
}

.hero-subtitle.shown{opacity:1}

.scroll-chevron{
    position:absolute;
    bottom:clamp(24px,4vh,40px);
    opacity:0.3;
    animation:chevronPulse 3s ease-in-out infinite;
}

@keyframes chevronPulse{
    0%,100%{opacity:0.2}
    50%{opacity:0.5}
}

/* Split layouts */
.split-layout{
    display:grid;
    width:100%;
    max-width:1200px;
    gap:clamp(24px,3vw,40px);
    align-items:center;
}

.left-heavy{grid-template-columns:65% 35%}
.right-heavy{grid-template-columns:35% 65%}

.content-panel{max-width:60ch}

.gold-border-left{
    border-left:2px solid var(--gold);
    padding-left:clamp(16px,2vw,32px);
}

.section-heading{
    font-family:'Poiret One',sans-serif;
    font-weight:400;
    font-size:clamp(1.8rem,4vw,4rem);
    letter-spacing:0.12em;
    line-height:1.1;
    color:var(--ivory);
    margin-bottom:1.5rem;
}

.body-text{
    color:var(--ivory);
    margin-bottom:1rem;
}

/* Fan arcs */
.deco-panel{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(16px,2vw,32px);
}

.fan-arc{
    width:120px;height:60px;
    border-top-left-radius:120px;
    border-top-right-radius:120px;
    border:1px solid var(--gold);
    border-bottom:none;
    opacity:0;
    transform:scaleY(0);
    transform-origin:bottom;
    transition:opacity 0.8s ease,transform 0.8s cubic-bezier(0.25,0.1,0.25,1);
}

.fan-arc.open{opacity:0.3;transform:scaleY(1)}
.fan-2{width:90px;height:45px;transition-delay:0.3s}
.fan-3{width:60px;height:30px;transition-delay:0.6s}

/* Interstitial */
.interstitial{
    padding:clamp(40px,6vh,80px) clamp(24px,4vw,60px);
    text-align:center;
    background:linear-gradient(90deg,transparent,rgba(201,168,76,0.08),transparent);
}

.interstitial-text{
    font-family:'Cinzel',serif;
    font-weight:700;
    font-size:clamp(0.65rem,0.9vw,0.8rem);
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--smoke);
}

/* Act III: Dialogue */
.act-3{
    min-height:150vh;
    background:var(--anthracite);
}

.seal-bg{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}

.seal-rings{
    width:min(40vw,400px);
    animation:sealRotate 120s linear infinite;
}

@keyframes sealRotate{to{transform:rotate(360deg)}}

.dialogue-layout{
    display:grid;
    grid-template-columns:1fr 1px 1fr;
    gap:clamp(16px,3vw,40px);
    max-width:900px;
    position:relative;
    z-index:2;
}

.dialogue-col{
    display:flex;
    flex-direction:column;
    gap:clamp(24px,4vh,40px);
}

.right-voice{color:var(--smoke)}

.dialogue-line{
    opacity:0;
    transition:opacity 0.6s cubic-bezier(0.25,0.1,0.25,1);
}

.dialogue-line.shown{opacity:1}

.divider-line{
    width:1px;
    height:100%;
    background:var(--gold);
    opacity:0.3;
}

/* Act IV: Terrace */
.act-4{
    background:var(--teal);
}

.cocktail-cards{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.cocktail-card{
    background:var(--anthracite);
    border:1px solid var(--gold);
    padding:clamp(16px,2vw,24px);
    opacity:0;
    transform:translateX(60px);
    transition:opacity 0.8s ease,transform 0.8s cubic-bezier(0.25,0.1,0.25,1);
}

.cocktail-card.shown{
    opacity:1;
    transform:translateX(0);
}

.cocktail-name{
    font-family:'Cinzel',serif;
    font-weight:700;
    font-size:clamp(0.8rem,1.2vw,1rem);
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:0.5rem;
}

.cocktail-desc{
    font-size:clamp(0.85rem,1vw,1rem);
    color:var(--ivory);
}

/* Act V: Private Room */
.act-5{
    min-height:60vh;
    background:var(--obsidian);
}

.private-content{
    max-width:55ch;
    text-align:center;
}

.private-text{
    font-family:'Cinzel',serif;
    font-weight:700;
    font-size:clamp(0.85rem,1.3vw,1.15rem);
    letter-spacing:0.08em;
    line-height:1.6;
    color:var(--ivory);
}

.redacted{
    background:var(--vermillion);
    color:var(--vermillion);
    padding:2px 8px;
    animation:redactFlicker 2s steps(3) infinite;
}

@keyframes redactFlicker{
    0%,100%{opacity:1}
    33%{opacity:0.88}
    66%{opacity:0.95}
}

/* Act VII: Departure */
.act-7{
    min-height:80vh;
    background:linear-gradient(180deg,var(--obsidian) 0%,#000 100%);
}

.departure-content{text-align:center}

.departure-title{
    font-family:'Poiret One',sans-serif;
    font-weight:400;
    font-size:clamp(1.5rem,3vw,3rem);
    letter-spacing:0.12em;
    color:var(--ivory);
    display:block;
    margin-bottom:1rem;
}

.departure-line{
    font-family:'Cinzel',serif;
    font-weight:700;
    font-size:clamp(0.6rem,0.8vw,0.75rem);
    letter-spacing:0.18em;
    color:var(--gold);
}

/* Reveal */
.reveal-act{
    opacity:0;
    transition:opacity 0.8s cubic-bezier(0.25,0.1,0.25,1);
}

.reveal-act.shown{opacity:1}

/* Responsive */
@media(max-width:768px){
    .left-heavy,.right-heavy{
        grid-template-columns:1fr;
    }

    .dialogue-layout{
        grid-template-columns:1fr;
        gap:24px;
    }

    .divider-line{display:none}
    .deco-panel{display:none}
}

@media(prefers-reduced-motion:reduce){
    .fog-cloud{animation:none}
    .scroll-chevron{animation:none;opacity:0.3}
    .seal-rings{animation:none}
    .redacted{animation:none}
    .gold-line{width:clamp(200px,50vw,500px);transition:none}
    .hero-title,.hero-subtitle{opacity:1;transition:none}
    .fan-arc{opacity:0.3;transform:scaleY(1);transition:none}
    .cocktail-card{opacity:1;transform:none;transition:none}
    .dialogue-line{opacity:1;transition:none}
    .reveal-act{opacity:1;transition:none}
}