/* diplomacy.day - Generative Chrome Dreamscape */

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

:root{
    --chrome-black:#0C0E14;
    --gunmetal:#1A1E2A;
    --silver:#C8CED8;
    --platinum:#E8ECF2;
    --gold:#A8935C;
    --teal:#4A7C8A;
    --fog:#5A6577;
}

body{
    background:var(--chrome-black);
    color:var(--silver);
    font-family:'Inter',sans-serif;
    font-weight:300;
    font-size:clamp(1rem,1.4vw,1.25rem);
    line-height:1.75;
    overflow-x:hidden;
}

/* Brushed metal grain overlay */
.grain-filter{
    position:fixed;
    inset:0;
    z-index:100;
    width:100%;height:100%;
    pointer-events:none;
    opacity:0.04;
    mix-blend-mode:overlay;
}

/* Constellation canvas */
#constellation{
    position:fixed;
    inset:0;
    z-index:0;
    width:100%;height:100%;
    pointer-events:none;
}

/* Orbital blob layer */
.orbital-layer{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    overflow:hidden;
}

.blob-canvas{
    width:100%;
    height:100%;
}

/* Cable fragments */
.cable-frag{
    position:absolute;
    font-family:'Space Mono',monospace;
    font-weight:400;
    font-size:0.7rem;
    letter-spacing:0.12em;
    color:var(--fog);
    opacity:0.25;
    white-space:nowrap;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;
}

.cf1{top:12%;left:8%;animation:drift1 35s infinite,flicker 8s step-end infinite 2s}
.cf2{top:28%;right:12%;animation:drift2 42s infinite,flicker 10s step-end infinite 4s}
.cf3{top:45%;left:15%;animation:drift1 50s infinite reverse,flicker 7s step-end infinite 1s}
.cf4{top:62%;right:8%;animation:drift2 38s infinite,flicker 12s step-end infinite 6s}
.cf5{top:75%;left:20%;animation:drift1 45s infinite,flicker 9s step-end infinite 3s}
.cf6{top:18%;right:25%;animation:drift2 55s infinite reverse,flicker 11s step-end infinite 5s}
.cf7{bottom:15%;left:5%;animation:drift1 40s infinite,flicker 6s step-end infinite}
.cf8{bottom:30%;right:18%;animation:drift2 48s infinite,flicker 8s step-end infinite 7s}

@keyframes drift1{
    0%,100%{transform:translate(0,0)}
    50%{transform:translate(40px,20px)}
}

@keyframes drift2{
    0%,100%{transform:translate(0,0)}
    50%{transform:translate(-30px,15px)}
}

@keyframes flicker{
    0%,8%,100%{opacity:0.25}
    4%{opacity:0}
}

/* Chambers */
.chamber{
    position:relative;
    z-index:2;
    min-height:100svh;
    display:grid;
    place-items:center;
    padding:clamp(40px,6vw,80px);
}

.chamber-content{
    max-width:680px;
    text-align:center;
}

/* Chrome gradient thresholds */
.chrome-threshold{
    position:absolute;
    top:0;left:0;right:0;
    height:120px;
    pointer-events:none;
}

.threshold-2::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,var(--chrome-black),var(--gunmetal));
}

.threshold-3::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,var(--silver) 0%,var(--teal) 40%,var(--gold) 70%,var(--silver) 100%);
    opacity:0.08;
}

.threshold-4{
    height:40px;
}

.threshold-4::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,var(--gunmetal),var(--chrome-black));
}

.threshold-5::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,var(--chrome-black),transparent);
}

/* Chrome rings at thresholds */
.chrome-ring{
    position:absolute;
    top:60px;left:50%;
    transform:translateX(-50%) scaleX(0.3);
    width:300px;height:2px;
    border-radius:50%;
    background:var(--silver);
    box-shadow:0 0 30px rgba(200,206,216,0.15);
    opacity:0;
    transition:transform 1s cubic-bezier(0.23,1,0.32,1),opacity 0.8s ease;
}

.chrome-ring.visible{
    transform:translateX(-50%) scaleX(1);
    opacity:1;
}

.ring-pulse{
    animation:ringPulse 3s ease-in-out infinite;
}

@keyframes ringPulse{
    0%,100%{transform:translateX(-50%) scaleX(0.98);opacity:0.15}
    50%{transform:translateX(-50%) scaleX(1.02);opacity:0.35}
}

/* Chamber I: Approach */
.chamber-1{
    background:var(--chrome-black);
}

.hero-domain{
    font-family:'Roboto Slab',serif;
    font-weight:700;
    font-size:clamp(3.5rem,10vw,9rem);
    letter-spacing:0.06em;
    line-height:1.05;
    color:var(--silver);
    text-shadow:1px 1px 0 var(--gold);
    opacity:0;
    animation:fadeIn 2s ease 0.5s forwards;
}

@keyframes fadeIn{to{opacity:1}}

.chamber-body{
    color:#B8C0CC;
    margin-top:2rem;
    opacity:0;
    animation:fadeIn 1.5s ease 2s forwards;
}

/* Chamber II: Posture */
.chamber-2{
    background:var(--gunmetal);
}

.chamber-heading{
    font-family:'Roboto Slab',serif;
    font-weight:700;
    font-size:clamp(2rem,5vw,4.5rem);
    letter-spacing:0.04em;
    line-height:1.2;
    color:var(--silver);
    margin-bottom:2rem;
}

.chamber-2 .chamber-body,.chamber-3 .chamber-body,.chamber-4 .chamber-body,.chamber-5 .chamber-body{
    animation:none;
    opacity:1;
}

/* Scale-hover interaction */
.scale-hover{
    transition:transform 0.4s cubic-bezier(0.23,1,0.32,1),box-shadow 0.4s ease;
    cursor:default;
}

.scale-hover:hover{
    transform:scale(1.03);
    box-shadow:0 0 40px rgba(200,206,216,0.08);
}

/* Chamber III: Exchange */
.chamber-3{
    background:var(--gunmetal);
}

.exchange-layout .offset-left{
    text-align:left;
    padding-left:2rem;
}

.exchange-layout .offset-right{
    text-align:right;
    padding-right:2rem;
}

/* Chamber IV: Tension */
.chamber-4{
    background:var(--chrome-black);
}

.heading-tight{
    letter-spacing:0.01em;
}

.body-tight{
    line-height:1.5;
}

/* Chamber V: Accord */
.chamber-5{
    background:var(--chrome-black);
    background-image:radial-gradient(ellipse at center,rgba(168,147,92,0.06) 0%,transparent 70%);
}

.closing-domain{
    display:block;
    margin-top:4rem;
    font-family:'Roboto Slab',serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    letter-spacing:0.04em;
    color:var(--gold);
}

/* Reveal for chambers 2-5 */
.chamber-reveal{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s ease,transform 0.8s cubic-bezier(0.23,1,0.32,1);
}

.chamber-reveal.shown{
    opacity:1;
    transform:translateY(0);
}

/* Responsive */
@media(max-width:768px){
    .cable-frag{display:none}
    .exchange-layout .offset-left,.exchange-layout .offset-right{
        text-align:center;
        padding:0;
    }
}

@media(prefers-reduced-motion:reduce){
    .cable-frag{animation:none}
    .ring-pulse{animation:none;opacity:0.25;transform:translateX(-50%) scaleX(1)}
    .hero-domain,.chamber-body{animation:none;opacity:1}
    .scale-hover{transition:none}
    .chrome-ring{transition:none;opacity:1;transform:translateX(-50%) scaleX(1)}
}