/* ============================================
   diplomatic.boo - Spectral Diplomacy
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    --diplomatic-void: #0C0B0F;
    --consulate-fog: #1A1820;
    --parchment-ash: #D4CFC7;
    --aged-vellum: #8A8679;
    --wax-seal: #8B3A3A;
    --treaty-ink: #3A4F6B;
    --spectral-gold: #C4A35A;
    --embassy-mist: #2A2730;
    --wax-seal-brown: #6B5B4E;

    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Libre Baskerville', serif;
    --font-accent: 'Noto Serif Display', serif;

    --ease-diplomatic: cubic-bezier(0.25, 0.1, 0.25, 1.0);
    --ease-dramatic: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    background-color: var(--diplomatic-void);
    color: var(--parchment-ash);
    font-family: var(--font-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Fog Particle System (CSS-only) --- */
.fog-system {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.fog-patch {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, var(--embassy-mist) 0%, transparent 70%);
    opacity: 0.18;
    will-change: transform;
}

.fog-1 {
    width: 50vw;
    height: 50vw;
    top: -10%;
    left: -15%;
    animation: fog-drift-1 80s linear infinite;
}

.fog-2 {
    width: 40vw;
    height: 40vw;
    top: 30%;
    right: -10%;
    animation: fog-drift-2 100s linear infinite;
}

.fog-3 {
    width: 45vw;
    height: 45vw;
    bottom: 10%;
    left: 20%;
    animation: fog-drift-3 120s linear infinite;
}

.fog-4 {
    width: 35vw;
    height: 35vw;
    top: 50%;
    left: -5%;
    animation: fog-drift-4 90s linear infinite;
}

.fog-5 {
    width: 30vw;
    height: 30vw;
    top: 70%;
    right: 5%;
    animation: fog-drift-5 110s linear infinite;
}

@keyframes fog-drift-1 {
    0% { transform: translate(0, 0); }
    25% { transform: translate(15vw, 8vh); }
    50% { transform: translate(5vw, 18vh); }
    75% { transform: translate(-10vw, 6vh); }
    100% { transform: translate(0, 0); }
}

@keyframes fog-drift-2 {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-12vw, -6vh); }
    50% { transform: translate(-8vw, 12vh); }
    75% { transform: translate(10vw, 4vh); }
    100% { transform: translate(0, 0); }
}

@keyframes fog-drift-3 {
    0% { transform: translate(0, 0); }
    25% { transform: translate(10vw, -10vh); }
    50% { transform: translate(-5vw, -5vh); }
    75% { transform: translate(-15vw, 8vh); }
    100% { transform: translate(0, 0); }
}

@keyframes fog-drift-4 {
    0% { transform: translate(0, 0); }
    33% { transform: translate(20vw, -5vh); }
    66% { transform: translate(8vw, 15vh); }
    100% { transform: translate(0, 0); }
}

@keyframes fog-drift-5 {
    0% { transform: translate(0, 0); }
    33% { transform: translate(-15vw, 10vh); }
    66% { transform: translate(-5vw, -12vh); }
    100% { transform: translate(0, 0); }
}

/* --- Ghost Text Watermarks --- */
.watermark {
    position: fixed;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--consulate-fog);
    opacity: 0.10;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    letter-spacing: 0.05em;
    line-height: 1;
}

.watermark-accord {
    font-size: 35vw;
    top: 60%;
    left: -5%;
    transform: rotate(-8deg);
}

.watermark-protocol {
    font-size: 30vw;
    top: 20%;
    left: 10%;
    transform: rotate(3deg);
}

.watermark-sovereign {
    font-size: 40vw;
    top: 40%;
    left: -10%;
    transform: rotate(-4deg);
}

/* --- Chambers --- */
.chamber {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.chamber-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1200px;
    padding: 0 5vw;
}

/* --- Chamber I: The Anteroom --- */
.chamber-anteroom {
    height: 100vh;
    background-color: var(--diplomatic-void);
}

.anteroom-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 8vw;
}

.anteroom-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(3.5rem, 9vw, 8rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--parchment-ash);
    text-shadow: 0 0 40px rgba(212, 207, 199, 0.3);
    line-height: 0.95;
    display: flex;
}

.anteroom-title .letter {
    opacity: 0;
    display: inline-block;
}

.anteroom-title.animate .letter {
    animation: letter-emerge 0.2s var(--ease-dramatic) forwards;
    animation-delay: calc(0.8s + var(--i) * 0.06s);
}

@keyframes letter-emerge {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.anteroom-subtitle {
    font-family: var(--font-accent);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.5rem, 4vw, 3rem);
    color: var(--wax-seal-brown);
    opacity: 0;
    letter-spacing: 0.08em;
    margin-top: 0.5rem;
    margin-left: 0.5em;
}

.anteroom-title.animate ~ .anteroom-subtitle {
    animation: spectral-drift 3s ease-out forwards;
    animation-delay: 1.5s;
}

@keyframes spectral-drift {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 0.4; transform: translateY(-2px); }
}

/* Wax Seal - Anteroom */
.seal-anteroom {
    position: absolute;
    bottom: 18vh;
    right: 12vw;
}

.seal-anteroom svg {
    opacity: 0;
}

.anteroom-title.animate ~ .seal-anteroom svg,
.chamber-anteroom.initialized .seal-anteroom svg {
    animation: seal-materialize 2s var(--ease-diplomatic) forwards;
    animation-delay: 1.8s;
}

@keyframes seal-materialize {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Wax Seal General Styles */
.wax-seal svg {
    animation: seal-turn 90s linear infinite;
}

.seal-ring {
    fill: none;
    stroke: var(--wax-seal);
    stroke-width: 1;
    opacity: 0.5;
    mix-blend-mode: screen;
}

.seal-ring-outer {
    stroke-width: 1.5;
    stroke-dasharray: 350;
    stroke-dashoffset: 350;
}

.seal-ring-mid {
    stroke-width: 0.75;
    stroke-dasharray: 280;
    stroke-dashoffset: 280;
}

.seal-ring-inner {
    stroke-width: 1;
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
}

.seal-line {
    stroke: var(--wax-seal);
    stroke-width: 0.5;
    opacity: 0.35;
    mix-blend-mode: screen;
}

.seal-monogram {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    fill: var(--wax-seal);
    opacity: 0.5;
    mix-blend-mode: screen;
}

.seal-anteroom .seal-ring-outer,
.chamber-anteroom.initialized .seal-anteroom .seal-ring-outer {
    animation: seal-draw 2s var(--ease-diplomatic) forwards;
    animation-delay: 1.8s;
}

.seal-anteroom .seal-ring-mid,
.chamber-anteroom.initialized .seal-anteroom .seal-ring-mid {
    animation: seal-draw-mid 2s var(--ease-diplomatic) forwards;
    animation-delay: 2.2s;
}

.seal-anteroom .seal-ring-inner,
.chamber-anteroom.initialized .seal-anteroom .seal-ring-inner {
    animation: seal-draw-inner 2s var(--ease-diplomatic) forwards;
    animation-delay: 2.5s;
}

@keyframes seal-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes seal-draw-mid {
    to { stroke-dashoffset: 0; }
}

@keyframes seal-draw-inner {
    to { stroke-dashoffset: 0; }
}

@keyframes seal-turn {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Gold Seal Variants */
.seal-gold {
    stroke: var(--spectral-gold) !important;
    fill: none;
}

text.seal-gold {
    fill: var(--spectral-gold) !important;
    stroke: none !important;
}

.seal-gold.seal-line {
    stroke: var(--spectral-gold) !important;
    opacity: 0.6;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 4vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

.scroll-line {
    width: 1px;
    height: 40px;
    background-color: var(--parchment-ash);
    opacity: 0.3;
    animation: scroll-pulse 2s ease-in-out infinite;
}

@keyframes scroll-pulse {
    0%, 100% { opacity: 0.1; transform: scaleY(0.8); }
    50% { opacity: 0.35; transform: scaleY(1); }
}

/* --- Diagonal Fault Lines --- */
.fault-line {
    position: relative;
    height: 40vh;
    z-index: 2;
    background-color: var(--diplomatic-void);
}

.fault-line-1 {
    clip-path: polygon(0 0, 100% 4vh, 100% 100%, 0 96vh);
    background: linear-gradient(to bottom, var(--diplomatic-void), var(--embassy-mist) 50%, var(--diplomatic-void));
}

.fault-line-2 {
    clip-path: polygon(0 4vh, 100% 0, 100% 96vh, 0 100%);
    background: linear-gradient(to bottom, var(--diplomatic-void), var(--embassy-mist) 50%, var(--diplomatic-void));
}

.fault-line-3 {
    clip-path: polygon(0 0, 100% 4vh, 100% 100%, 0 96vh);
    background: linear-gradient(to bottom, var(--diplomatic-void), var(--embassy-mist) 50%, var(--diplomatic-void));
}

.fault-line-4 {
    clip-path: polygon(0 4vh, 100% 0, 100% 96vh, 0 100%);
    background: linear-gradient(to bottom, var(--diplomatic-void), var(--embassy-mist) 50%, var(--diplomatic-void));
}

/* --- Chamber II: The Credentials --- */
.chamber-credentials {
    min-height: 100vh;
    background-color: var(--diplomatic-void);
    padding: 10vh 0;
}

.watermark-local {
    position: absolute;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--consulate-fog);
    opacity: 0.10;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    letter-spacing: 0.05em;
    line-height: 1;
}

.watermark-credentials {
    font-size: 30vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg);
}

.credentials-content {
    display: flex;
    flex-direction: column;
    gap: 6vh;
}

.credential-block {
    position: relative;
    max-width: 520px;
    padding: 2.5rem 2rem;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s var(--ease-diplomatic), transform 1.2s var(--ease-diplomatic);
}

.credential-block.revealed {
    opacity: 1;
    transform: translateY(0);
}

.credential-1 {
    align-self: flex-start;
    margin-left: 8vw;
}

.credential-2 {
    align-self: center;
    transition-delay: 0.2s;
}

.credential-3 {
    align-self: flex-end;
    margin-right: 8vw;
    transition-delay: 0.4s;
}

.credential-block p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    line-height: 1.75;
    letter-spacing: 0.015em;
    color: var(--aged-vellum);
}

/* --- Corner Ornaments --- */
.corner-ornament {
    position: absolute;
    width: 20px;
    height: 20px;
    transition: all 0.6s var(--ease-diplomatic);
}

.corner-ornament::before,
.corner-ornament::after {
    content: '';
    position: absolute;
    background-color: var(--treaty-ink);
    opacity: 0.5;
}

.corner-ornament::before {
    width: 20px;
    height: 1px;
}

.corner-ornament::after {
    width: 1px;
    height: 20px;
}

.corner-tl { top: 0; left: 0; }
.corner-tl::before { top: 0; left: 0; }
.corner-tl::after { top: 0; left: 0; }

.corner-tr { top: 0; right: 0; }
.corner-tr::before { top: 0; right: 0; }
.corner-tr::after { top: 0; right: 0; }

.corner-bl { bottom: 0; left: 0; }
.corner-bl::before { bottom: 0; left: 0; }
.corner-bl::after { bottom: 0; left: 0; }

.corner-br { bottom: 0; right: 0; }
.corner-br::before { bottom: 0; right: 0; }
.corner-br::after { bottom: 0; right: 0; }

.credential-block:hover .corner-tl { transform: translate(-4px, -4px); }
.credential-block:hover .corner-tr { transform: translate(4px, -4px); }
.credential-block:hover .corner-bl { transform: translate(-4px, 4px); }
.credential-block:hover .corner-br { transform: translate(4px, 4px); }

/* Hover inward animation (as if pressing with seal) */
.credential-block:hover .corner-tl { transform: translate(4px, 4px); }
.credential-block:hover .corner-tr { transform: translate(-4px, 4px); }
.credential-block:hover .corner-bl { transform: translate(4px, -4px); }
.credential-block:hover .corner-br { transform: translate(-4px, -4px); }

/* Gold Corner Ornaments */
.corner-gold::before,
.corner-gold::after {
    background-color: var(--spectral-gold) !important;
    opacity: 0.6;
}

/* --- Chamber III: The Deliberation --- */
.chamber-deliberation {
    min-height: 120vh;
    background-color: var(--diplomatic-void);
    padding: 10vh 0;
    position: relative;
}

.deliberation-content {
    display: flex;
    flex-direction: column;
    gap: 5vh;
    align-items: center;
}

.deliberation-fragment {
    max-width: 480px;
    padding: 1.5rem 1.2rem;
    opacity: 0;
    transition: opacity 1.4s var(--ease-diplomatic), transform 1.4s var(--ease-diplomatic);
}

.deliberation-fragment.revealed {
    opacity: 1;
}

.deliberation-fragment p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    line-height: 1.75;
    letter-spacing: 0.015em;
    color: var(--aged-vellum);
}

.frag-1 { align-self: flex-start; margin-left: 5vw; transform: rotate(-2.5deg) translateY(20px); }
.frag-2 { align-self: flex-end; margin-right: 8vw; transform: rotate(1.8deg) translateY(20px); }
.frag-3 { align-self: flex-start; margin-left: 12vw; transform: rotate(-1.5deg) translateY(20px); }
.frag-4 { align-self: flex-end; margin-right: 5vw; transform: rotate(2.2deg) translateY(20px); }
.frag-5 { align-self: center; margin-left: 3vw; transform: rotate(-0.8deg) translateY(20px); }
.frag-6 { align-self: flex-start; margin-left: 15vw; transform: rotate(1.2deg) translateY(20px); }
.frag-7 { align-self: flex-end; margin-right: 10vw; transform: rotate(-2.8deg) translateY(20px); }
.frag-8 { align-self: center; margin-right: 5vw; transform: rotate(0.5deg) translateY(20px); }

.frag-1.revealed { transform: rotate(-0.5deg) translateY(0); }
.frag-2.revealed { transform: rotate(0.5deg) translateY(0); }
.frag-3.revealed { transform: rotate(-0.3deg) translateY(0); }
.frag-4.revealed { transform: rotate(0.5deg) translateY(0); }
.frag-5.revealed { transform: rotate(-0.2deg) translateY(0); }
.frag-6.revealed { transform: rotate(0.3deg) translateY(0); }
.frag-7.revealed { transform: rotate(-0.5deg) translateY(0); }
.frag-8.revealed { transform: rotate(0.1deg) translateY(0); }

/* Deliberation Seals */
.seal-deliberation-left {
    position: absolute;
    left: 5vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.seal-deliberation-left svg {
    animation: seal-turn 90s linear infinite;
}

.seal-deliberation-right {
    position: absolute;
    right: 5vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.seal-deliberation-right svg {
    animation: seal-turn 90s linear infinite reverse;
}

/* --- Quill Stroke Dividers --- */
.quill-divider {
    width: 100%;
    padding: 2vh 0;
    opacity: 0;
    transition: opacity 0.8s var(--ease-diplomatic);
}

.quill-divider.revealed {
    opacity: 1;
}

.quill-path {
    fill: none;
    stroke: var(--treaty-ink);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    opacity: 0.6;
    transition: stroke-dashoffset 1.2s var(--ease-diplomatic);
}

.quill-divider.revealed .quill-path {
    stroke-dashoffset: 0;
}

.quill-elaborate {
    stroke-width: 1.5;
}

.quill-flourish {
    fill: none;
    stroke: var(--spectral-gold);
    stroke-width: 1;
    opacity: 0.5;
}

.quill-flourish-stroke {
    fill: none;
    stroke: var(--spectral-gold);
    stroke-width: 0.75;
    opacity: 0.5;
}

.quill-mid {
    align-self: center;
    max-width: 800px;
    margin: 3vh auto;
}

.quill-protocol {
    position: absolute;
    bottom: 8vh;
    left: 0;
    right: 0;
    padding: 0 5vw;
}

/* --- Chamber IV: The Protocol --- */
.chamber-protocol {
    min-height: 100vh;
    background-color: var(--diplomatic-void);
    padding: 12vh 0;
    position: relative;
}

.protocol-content {
    display: flex;
    justify-content: center;
}

.protocol-panel {
    position: relative;
    max-width: 600px;
    padding: 3.5rem 2.5rem;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s var(--ease-diplomatic), transform 1.2s var(--ease-diplomatic);
}

.protocol-panel.revealed {
    opacity: 1;
    transform: translateY(0);
}

.protocol-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.5rem, 6vw, 5rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--parchment-ash);
    text-shadow: 0 0 40px rgba(212, 207, 199, 0.3);
    line-height: 0.95;
    margin-bottom: 3rem;
    text-align: center;
}

.protocol-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: var(--aged-vellum);
    margin-bottom: 2rem;
}

.protocol-text:last-child {
    margin-bottom: 0;
}

.protocol-panel:hover .corner-gold.corner-tl { transform: translate(4px, 4px); }
.protocol-panel:hover .corner-gold.corner-tr { transform: translate(-4px, 4px); }
.protocol-panel:hover .corner-gold.corner-bl { transform: translate(4px, -4px); }
.protocol-panel:hover .corner-gold.corner-br { transform: translate(-4px, -4px); }

/* --- Chamber V: The Accord --- */
.chamber-accord {
    min-height: 80vh;
    background-color: var(--diplomatic-void);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.accord-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 3;
}

.accord-statement {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.6rem, 3.5vw, 3rem);
    letter-spacing: 0.06em;
    line-height: 1.4;
    color: var(--parchment-ash);
    text-shadow: 0 0 40px rgba(212, 207, 199, 0.3);
    max-width: 700px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.5s var(--ease-diplomatic), transform 1.5s var(--ease-diplomatic);
}

.accord-statement.revealed {
    opacity: 1;
    transform: translateY(0);
}

.seal-accord {
    margin-top: 4rem;
}

.seal-accord svg {
    animation: seal-turn 90s linear infinite;
}

.seal-accord .seal-ring {
    stroke-dashoffset: 0;
}

.accord-fog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, transparent 40%, var(--embassy-mist) 100%);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    transition: opacity 2s linear;
}

.chamber-accord.fog-rising .accord-fog-overlay {
    opacity: 1;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .fog-patch {
        animation: none !important;
    }

    .wax-seal svg {
        animation: none !important;
    }

    .anteroom-title .letter {
        opacity: 1 !important;
        animation: none !important;
    }

    .anteroom-subtitle {
        opacity: 0.4 !important;
        animation: none !important;
    }

    .credential-block,
    .deliberation-fragment,
    .protocol-panel,
    .accord-statement {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .quill-path {
        stroke-dashoffset: 0 !important;
        transition: none !important;
    }

    .quill-divider {
        opacity: 1 !important;
        transition: none !important;
    }

    .seal-ring {
        stroke-dashoffset: 0 !important;
        animation: none !important;
    }
}

/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
    .credential-1,
    .credential-2,
    .credential-3 {
        margin-left: 5vw;
        margin-right: 5vw;
        align-self: center;
    }

    .deliberation-fragment {
        margin-left: 5vw !important;
        margin-right: 5vw !important;
    }

    .seal-deliberation-left,
    .seal-deliberation-right {
        display: none;
    }

    .seal-anteroom {
        right: 5vw;
        bottom: 15vh;
    }

    .anteroom-content {
        padding-left: 5vw;
    }

    .protocol-panel {
        padding: 2rem 1.5rem;
    }

    .fault-line {
        height: 20vh;
    }
}