/* diplomacy.boo - Anti-Diplomatic Anti-Design */

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

:root{
    --charcoal:#1A1612;
    --parchment:#F2E6D0;
    --sienna:#C45A20;
    --rust:#8B3A1A;
    --brass:#B8963E;
    --ink:#1C1810;
    --graphite:#4A4238;
    --fog:#2E2A24;
    --censor:#0D0B09;
    --alpine:#E8E2D8;
}

body{
    background:var(--charcoal);
    color:var(--parchment);
    font-family:'Zilla Slab',serif;
    font-weight:400;
    font-size:clamp(1rem,1.2vw,1.15rem);
    line-height:1.65;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Topographic background layer (z-0) */
.topo-layer{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    will-change:transform;
}

.topo-svg{
    width:100%;
    height:100%;
}

/* Floating stamp overlay (z-2) */
.stamp-layer{
    position:fixed;
    inset:0;
    z-index:10;
    pointer-events:none;
    overflow:hidden;
}

.stamp{
    position:absolute;
    font-family:'Rokkitt',serif;
    font-weight:700;
    font-size:clamp(0.8rem,1.2vw,1rem);
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--sienna);
    opacity:0.2;
    border:2px solid var(--sienna);
    padding:6px 16px;
}

.stamp-1{
    top:15%;left:-5%;
    transform:rotate(-12deg);
    animation:stampDrift1 40s ease-in-out infinite;
}

.stamp-2{
    top:55%;right:-8%;
    transform:rotate(-8deg);
    animation:stampDrift2 55s ease-in-out infinite;
}

@keyframes stampDrift1{
    0%,100%{transform:rotate(-12deg) translate(0,0)}
    50%{transform:rotate(-12deg) translate(60px,30px)}
}

@keyframes stampDrift2{
    0%,100%{transform:rotate(-8deg) translate(0,0)}
    50%{transform:rotate(-8deg) translate(-40px,-20px)}
}

.seal-float{
    position:absolute;
    width:80px;height:80px;
}

.seal-f1{
    top:35%;left:8%;
    animation:stampDrift1 70s ease-in-out infinite;
}

.seal-f2{
    bottom:20%;right:12%;
    animation:stampDrift2 90s ease-in-out infinite;
}

/* Summit progress markers */
.summit-markers{
    position:fixed;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    z-index:20;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.marker{
    width:16px;height:16px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    transition:transform 0.3s ease;
}

.marker:hover{transform:scale(1.3)}

.marker svg polygon{
    transition:fill 0.6s cubic-bezier(0.16,1,0.3,1),stroke 0.3s ease;
}

.marker.reached svg polygon{
    fill:var(--sienna);
    stroke:var(--sienna);
}

/* Terrain sections */
.terrain{
    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;
}

/* Section 1: Basecamp */
.basecamp{
    background:transparent;
}

.hero-domain{
    font-family:'Rokkitt',serif;
    font-weight:700;
    font-size:clamp(3.5rem,12vw,10rem);
    line-height:1.05;
    letter-spacing:0.02em;
    text-align:center;
    position:relative;
}

.hero-word{
    color:var(--parchment);
    display:inline-block;
}

.hero-dot{
    color:var(--sienna);
    display:inline-block;
}

.hero-domain span{
    display:inline-block;
}

.coordinates{
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:clamp(0.75rem,1vw,0.9rem);
    letter-spacing:0.04em;
    color:var(--brass);
    margin-top:1.5rem;
    opacity:0;
    animation:fadeIn 1.5s ease 2.5s forwards;
}

@keyframes fadeIn{to{opacity:1}}

/* Contour pulse behind hero */
.basecamp::before{
    content:'';
    position:absolute;
    width:60vw;height:60vw;
    border-radius:50%;
    border:1px solid var(--rust);
    opacity:0.08;
    animation:contourPulse 8s cubic-bezier(0.37,0,0.63,1) infinite;
}

@keyframes contourPulse{
    0%,100%{transform:scale(1);opacity:0.08}
    50%{transform:scale(1.05);opacity:0.04}
}

/* Ridge dividers */
.ridge{
    position:relative;
    z-index:2;
    height:120px;
    background:var(--fog);
}

.ridge-1{
    clip-path:polygon(0% 60%,3% 45%,7% 55%,11% 35%,15% 50%,19% 30%,23% 45%,27% 25%,31% 40%,35% 20%,39% 35%,43% 15%,47% 30%,50% 10%,53% 25%,57% 15%,61% 30%,65% 20%,69% 35%,73% 25%,77% 40%,81% 30%,85% 45%,89% 35%,93% 50%,97% 40%,100% 55%,100% 100%,0% 100%);
}

.ridge-2{
    clip-path:polygon(0% 50%,2% 30%,5% 45%,8% 15%,11% 35%,14% 10%,17% 25%,20% 5%,23% 20%,26% 8%,29% 22%,32% 12%,35% 28%,38% 8%,41% 18%,44% 5%,47% 15%,50% 2%,53% 12%,56% 5%,59% 18%,62% 8%,65% 22%,68% 10%,71% 25%,74% 15%,77% 30%,80% 18%,83% 35%,86% 22%,89% 40%,92% 28%,95% 45%,98% 35%,100% 50%,100% 100%,0% 100%);
}

.ridge-3{
    clip-path:polygon(0% 55%,4% 40%,8% 50%,12% 35%,16% 45%,20% 30%,24% 42%,28% 28%,32% 38%,36% 22%,40% 35%,44% 18%,48% 28%,52% 15%,56% 25%,60% 18%,64% 30%,68% 22%,72% 38%,76% 28%,80% 42%,84% 32%,88% 48%,92% 38%,96% 52%,100% 45%,100% 100%,0% 100%);
}

/* Section 2: The Approach - Dossier cards */
.approach{
    min-height:120vh;
    background:transparent;
}

.dossier-field{
    position:relative;
    width:100%;
    max-width:900px;
    min-height:60vh;
}

.dossier{
    position:absolute;
    background:var(--parchment);
    border:2px solid var(--rust);
    padding:clamp(24px,3vw,40px);
    max-width:420px;
    box-shadow:4px 6px 12px rgba(20,15,10,0.3);
    opacity:0;
    transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),transform 0.8s cubic-bezier(0.16,1,0.3,1);
}

.dossier-text{
    font-family:'Zilla Slab',serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.1vw,1.1rem);
    color:var(--ink);
    line-height:1.65;
}

.card-left{
    left:0;top:5%;
    transform:rotate(-2deg) translateX(-80px);
}

.card-left.shown{
    opacity:1;
    transform:rotate(-2deg) translateX(0);
}

.card-top{
    right:5%;top:0;
    transform:rotate(3deg) translateY(-60px);
}

.card-top.shown{
    opacity:1;
    transform:rotate(3deg) translateY(0);
}

.card-center{
    left:15%;top:55%;
    transform:rotate(1deg) scale(0.95);
}

.card-center.shown{
    opacity:1;
    transform:rotate(1deg) scale(1);
}

/* Redaction bars */
.redact{
    display:inline;
    position:relative;
    cursor:pointer;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.85em;
    letter-spacing:0.04em;
}

.redact::after{
    content:'';
    position:absolute;
    inset:0;
    background:var(--censor);
    transition:transform 0.6s cubic-bezier(0.16,1,0.3,1);
    transform-origin:left;
}

.redact:hover::after{
    transform:translateX(120%);
}

.redact-revealed{
    color:var(--sienna);
    background:rgba(196,90,32,0.1);
    padding:0 4px;
}

/* Section 3: The Pass */
.the-pass{
    background:linear-gradient(180deg,transparent 0%,rgba(13,11,9,0.7) 30%,rgba(13,11,9,0.9) 100%);
    gap:clamp(24px,4vh,48px);
}

.cable-block{
    background:rgba(242,230,208,0.08);
    border:1px solid rgba(139,58,26,0.3);
    padding:clamp(20px,2vw,32px);
    max-width:600px;
    width:100%;
    opacity:0;
    transform:translateX(60px);
    transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),transform 0.8s cubic-bezier(0.16,1,0.3,1);
}

.cable-block.shown{
    opacity:1;
    transform:translateX(0);
}

.cable-header{
    font-family:'Rokkitt',serif;
    font-weight:500;
    font-size:clamp(0.75rem,0.9vw,0.85rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--brass);
    margin-bottom:1rem;
    border-bottom:1px solid rgba(184,150,62,0.2);
    padding-bottom:0.5rem;
}

.cable-body{
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:clamp(0.8rem,1vw,0.9rem);
    letter-spacing:0.04em;
    color:var(--parchment);
    line-height:1.7;
    opacity:0.85;
}

/* Section 4: The Summit */
.the-summit{
    background:var(--charcoal);
}

.summit-seal{
    position:relative;
    width:300px;height:300px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.seal-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.seal-ring{
    stroke-dasharray:900;
    stroke-dashoffset:900;
    transition:stroke-dashoffset 4s cubic-bezier(0.16,1,0.3,1);
}

.seal-ring.drawn{stroke-dashoffset:0}

.seal-r2{transition-delay:0.8s}
.seal-r3{transition-delay:1.6s}

.seal-line{
    opacity:0;
    transition:opacity 1s ease 3s;
}

.seal-line.drawn{opacity:0.4}

.accord-text{
    font-family:'Rokkitt',serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    letter-spacing:0.25em;
    color:var(--brass);
    opacity:0;
    transition:opacity 1.5s ease;
    position:relative;
    z-index:2;
}

.accord-text.shown{opacity:1}

/* Section 5: The Descent */
.the-descent{
    min-height:60vh;
    background:transparent;
    gap:1.5rem;
}

.descent-coords{
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:clamp(0.75rem,0.9vw,0.85rem);
    letter-spacing:0.04em;
    color:var(--brass);
    opacity:0.5;
}

.descent-time{
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:clamp(0.7rem,0.8vw,0.8rem);
    letter-spacing:0.04em;
    color:var(--graphite);
}

.descent-domain{
    font-family:'Rokkitt',serif;
    font-weight:700;
    font-size:clamp(1.2rem,2vw,1.8rem);
    letter-spacing:0.02em;
    color:var(--parchment);
    background:none;
    border:none;
    cursor:pointer;
    transition:color 0.3s ease;
}

.descent-domain:hover{color:var(--sienna)}

/* Counter-slide animations */
.counter-slide{
    opacity:0;
}

/* Paper grain texture on dossier cards */
.dossier::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        conic-gradient(from 30deg,transparent 40%,rgba(26,22,18,0.02) 45%,transparent 55%),
        conic-gradient(from 170deg,transparent 42%,rgba(26,22,18,0.015) 47%,transparent 53%);
    pointer-events:none;
    mix-blend-mode:multiply;
}

/* Responsive */
@media(max-width:768px){
    .summit-markers{display:none}

    .dossier-field{
        position:static;
        display:flex;
        flex-direction:column;
        gap:24px;
    }

    .dossier{
        position:static;
        max-width:100%;
        transform:none;
    }

    .card-left.shown,.card-top.shown,.card-center.shown{
        transform:none;
    }

    .stamp-layer{display:none}

    .ridge{height:80px}
}

@media(prefers-reduced-motion:reduce){
    .stamp{animation:none}
    .seal-float{animation:none}
    .basecamp::before{animation:none;opacity:0.06}
    .coordinates{animation:none;opacity:1}
    .seal-ring{stroke-dashoffset:0;transition:none}
    .seal-line{opacity:0.4;transition:none}
    .accord-text{opacity:1;transition:none}
    .dossier,.cable-block{opacity:1;transform:none;transition:none}
    .redact::after{transition:none}
}