/* ==========================================================================
   diplomatic.wiki - Frutiger Aero Diplomatic Interface
   Colors: #0A1628, #1B3A5C, #F0F6FF, #C9952B, #00D68F, #5BBCD6, #E03C31, #6B7D94, #1C2A3D, #D8E4F0
   Fonts: Playfair Display, Libre Baskerville, Source Serif 4, Inter
   ========================================================================== */

/* --- Reset & Base --- */

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: #0A1628;
    color: #F0F6FF;
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Navigation --- */

#nav-bar {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 48px;
    background: rgba(10, 22, 40, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@supports (backdrop-filter: blur(1px)) {
    #nav-bar {
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        background: rgba(10, 22, 40, 0.5);
    }
}

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}

.nav-logo {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 18px;
    color: #F0F6FF;
    letter-spacing: -0.01em;
}

.nav-links {
    display: flex;
    gap: 28px;
}

.nav-link {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    font-variant: small-caps;
    letter-spacing: 0.08em;
    color: #6B7D94;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #C9952B;
}

.nav-globe {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.nav-globe:hover {
    opacity: 1;
}

/* --- Circuit Watermark Background --- */

.circuit-watermark {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.04;
    background-image:
        linear-gradient(90deg, #5BBCD6 1px, transparent 1px),
        linear-gradient(0deg, #5BBCD6 1px, transparent 1px);
    background-size: 80px 80px;
}

/* --- Bento Sections --- */

.bento-section {
    min-height: 100vh;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 20px 40px;
}

.bento-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 20px;
    width: 100%;
}

/* --- Bento Module Base --- */

.bento-module {
    position: relative;
    background: rgba(240, 248, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    padding: 28px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Entrance animation initial state */
    opacity: 0;
    transform: scale(0.95) translateY(20px);
}

@supports (backdrop-filter: blur(1px)) {
    .bento-module {
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
    }
}

.bento-module.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Module hover glass sweep */

.module-glass-sweep {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
    pointer-events: none;
    transition: left 0.4s ease;
    z-index: 10;
}

.bento-module:hover .module-glass-sweep {
    left: 100%;
}

/* Circuit trace hover border */
.bento-module::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    border: 1px solid transparent;
    pointer-events: none;
    transition: border-color 0.3s ease;
}

.bento-module:hover::after {
    border-color: rgba(201, 149, 43, 0.3);
}

/* --- Hero Grid --- */

.hero-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    min-height: 70vh;
}

.hero-grid .module-primary {
    grid-column: 1 / 9;
    grid-row: 1 / 2;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-grid .module-secondary {
    grid-column: 9 / 13;
    grid-row: 1 / 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-grid .module-tertiary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-grid #hero-past {
    grid-column: 1 / 5;
    grid-row: 2 / 3;
}

.hero-grid #hero-present {
    grid-column: 5 / 9;
    grid-row: 2 / 3;
}

.hero-grid #hero-future {
    grid-column: 9 / 13;
    grid-row: 2 / 3;
}

/* --- Protocol Grid --- */

.protocol-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
}

.protocol-grid .module-primary {
    grid-column: 1 / 9;
    grid-row: 1 / 3;
}

.protocol-grid .module-secondary {
    grid-column: 9 / 13;
    grid-row: 1 / 2;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.protocol-grid #protocol-circuit-1 {
    grid-column: 9 / 11;
    grid-row: 2 / 3;
}

.protocol-grid #protocol-circuit-2 {
    grid-column: 11 / 13;
    grid-row: 2 / 3;
}

.protocol-grid #protocol-meta {
    grid-column: 9 / 13;
    grid-row: 3 / 4;
}

/* --- Communication Grid --- */

.communication-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
}

.communication-grid .module-primary {
    grid-column: 1 / 8;
    grid-row: 1 / 3;
    min-height: 400px;
}

.communication-grid .module-secondary {
    grid-column: 8 / 13;
    grid-row: 1 / 2;
}

.communication-grid #comm-data-stream {
    grid-column: 8 / 11;
    grid-row: 2 / 3;
    min-height: 120px;
}

.communication-grid #comm-stat {
    grid-column: 11 / 13;
    grid-row: 2 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* --- Treaty Grid --- */

.treaty-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
}

.treaty-grid .module-primary {
    grid-column: 1 / 7;
    grid-row: 1 / 3;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.treaty-grid .module-secondary {
    grid-column: 7 / 13;
    grid-row: 1 / 2;
}

.treaty-grid #treaty-location-1 {
    grid-column: 7 / 9;
    grid-row: 2 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.treaty-grid #treaty-location-2 {
    grid-column: 9 / 11;
    grid-row: 2 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.treaty-grid #treaty-location-3 {
    grid-column: 11 / 13;
    grid-row: 2 / 3;
}

/* --- Future Grid --- */

.future-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
}

.future-grid .module-primary {
    grid-column: 1 / 9;
    grid-row: 1 / 3;
    min-height: 500px;
    position: relative;
}

.future-grid .module-secondary {
    grid-column: 9 / 13;
    grid-row: 1 / 2;
    min-height: 300px;
}

.future-grid #future-stat-1 {
    grid-column: 9 / 11;
    grid-row: 2 / 3;
}

.future-grid #future-stat-2 {
    grid-column: 11 / 13;
    grid-row: 2 / 3;
}

.future-grid #future-cta {
    grid-column: 9 / 13;
    grid-row: 3 / 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* --- Typography --- */

.site-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 72px;
    letter-spacing: -0.02em;
    color: #F0F6FF;
    line-height: 1.1;
    margin-bottom: 16px;
}

.title-dot {
    color: #C9952B;
}

.site-subtitle {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.65;
    color: #D8E4F0;
    margin-bottom: 20px;
}

.section-heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 42px;
    letter-spacing: -0.02em;
    color: #F0F6FF;
    margin-bottom: 20px;
    line-height: 1.15;
}

.module-heading {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 24px;
    letter-spacing: 0.01em;
    color: #D8E4F0;
    margin-bottom: 16px;
}

.body-text {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.65;
    color: #D8E4F0;
}

.body-text p {
    margin-bottom: 16px;
}

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

/* Light section body text color: #1C2A3D on light surfaces */
.light-section .body-text {
    color: #1C2A3D;
}

.light-section .section-heading {
    color: #0A1628;
}

.tertiary-label {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    font-variant: small-caps;
    letter-spacing: 0.08em;
    color: #6B7D94;
    margin-top: 8px;
}

.module-quote {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    line-height: 1.6;
    color: #D8E4F0;
    margin-bottom: 8px;
}

.quote-attribution {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.05em;
    color: #6B7D94;
}

/* --- Meta Data --- */

.meta-data {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meta-label {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 11px;
    font-variant: small-caps;
    letter-spacing: 0.08em;
    color: #6B7D94;
    margin-top: 8px;
}

.meta-label:first-child {
    margin-top: 0;
}

.meta-value {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #F0F6FF;
}

/* --- Globe --- */

.globe-container {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.globe-svg {
    width: 100%;
    height: auto;
}

.globe-group {
    animation: globe-rotate 30s linear infinite;
    transform-origin: center;
}

@keyframes globe-rotate {
    0% { transform: translate(200px, 200px) rotate(0deg); }
    100% { transform: translate(200px, 200px) rotate(360deg); }
}

.diplomatic-route {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: route-draw 3s ease-in-out forwards;
}

.route-1 { animation-delay: 0.5s; }
.route-2 { animation-delay: 1s; }
.route-3 { animation-delay: 1.5s; }

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

.city-node {
    animation: node-pulse 2s ease-in-out infinite;
}

@keyframes node-pulse {
    0%, 100% { r: 4; opacity: 1; }
    50% { r: 6; opacity: 0.6; }
}

/* --- Isometric Icons --- */

.iso-icon-container {
    width: 100%;
    max-width: 120px;
    margin: 0 auto;
}

.iso-icon-container.small-iso {
    max-width: 80px;
}

.iso-icon {
    width: 100%;
    height: auto;
}

.quantum-ring-1 {
    animation: ring-orbit-1 6s linear infinite;
    transform-origin: center;
}

.quantum-ring-2 {
    animation: ring-orbit-2 8s linear infinite;
    transform-origin: center;
}

@keyframes ring-orbit-1 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes ring-orbit-2 {
    0% { transform: rotate(60deg); }
    100% { transform: rotate(420deg); }
}

/* --- Isometric Scenes --- */

.iso-scene {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.iso-pouch {
    width: 100%;
    max-width: 250px;
    height: auto;
}

/* --- Circuit Elements --- */

.circuit-divider {
    margin-top: 20px;
}

.circuit-line {
    width: 100%;
    height: 20px;
}

.circuit-trace-path {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    filter: drop-shadow(0 0 4px rgba(201, 149, 43, 0.4));
}

.circuit-trace-path.drawn {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.5s ease-in-out;
}

.circuit-node {
    filter: drop-shadow(0 0 4px rgba(201, 149, 43, 0.4));
}

.section-circuit-divider {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 0 20px;
}

.full-circuit-trace {
    width: 100%;
    height: 30px;
}

.circuit-trace-animated {
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    filter: drop-shadow(0 0 4px rgba(201, 149, 43, 0.4));
}

.circuit-trace-animated.drawn {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.5s ease-in-out;
}

.circuit-pad {
    filter: drop-shadow(0 0 4px rgba(201, 149, 43, 0.4));
    opacity: 0;
    transition: opacity 0.5s ease 1.5s;
}

.circuit-trace-animated.drawn ~ .circuit-pad {
    opacity: 1;
}

/* --- Circuit Pulse Animation --- */

.circuit-pulse-container {
    width: 100%;
    height: 60px;
}

.circuit-pulse-svg {
    width: 100%;
    height: 100%;
}

.pulse-trace {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
}

.pulse-trace.drawn {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s ease-in-out;
}

.pulse-dot {
    animation: pulse-travel 3s linear infinite;
}

@keyframes pulse-travel {
    0% { cx: 0; cy: 30; opacity: 1; }
    20% { cx: 40; cy: 30; }
    30% { cx: 50; cy: 10; }
    45% { cx: 90; cy: 10; }
    55% { cx: 100; cy: 30; }
    70% { cx: 140; cy: 30; }
    80% { cx: 150; cy: 50; }
    100% { cx: 200; cy: 50; opacity: 0.3; }
}

/* --- Embassy Flow Scene --- */

.embassy-flow-scene {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.embassy-flow-svg {
    width: 100%;
    height: auto;
    max-height: 400px;
}

.comm-trace {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
}

.comm-trace.drawn {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 2s ease-in-out;
}

.trace-pulse {
    opacity: 0;
}

.trace-pulse.active {
    opacity: 1;
}

.pulse-1 {
    animation: trace-travel-1 4s linear infinite;
}

.pulse-2 {
    animation: trace-travel-2 5s linear infinite;
    animation-delay: 1s;
}

.pulse-3 {
    animation: trace-travel-3 4.5s linear infinite;
    animation-delay: 0.5s;
}

@keyframes trace-travel-1 {
    0% { cx: 150; cy: 200; opacity: 1; }
    100% { cx: 450; cy: 190; opacity: 0.3; }
}

@keyframes trace-travel-2 {
    0% { cx: 150; cy: 230; opacity: 1; }
    100% { cx: 450; cy: 220; opacity: 0.3; }
}

@keyframes trace-travel-3 {
    0% { cx: 150; cy: 210; opacity: 1; }
    100% { cx: 450; cy: 210; opacity: 0.3; }
}

/* --- Data Stream --- */

.data-stream {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.6;
    color: #6B7D94;
    overflow: hidden;
    height: 100%;
    min-height: 100px;
}

.data-stream-line {
    white-space: nowrap;
    overflow: hidden;
}

.data-stream-line .highlight {
    color: #00D68F;
}

/* --- Treaty Scene --- */

.treaty-iso-scene {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.treaty-doc-svg {
    width: 100%;
    max-width: 400px;
    height: auto;
}

.treaty-seal {
    animation: seal-rotate 20s linear infinite;
    transform-origin: 0px -30px;
}

@keyframes seal-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.treaty-counter {
    font-variant-numeric: tabular-nums;
}

/* --- Future Section --- */

#particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    pointer-events: none;
}

.future-overlay-text {
    position: relative;
    z-index: 2;
    padding: 40px;
}

.future-overlay-text .section-heading {
    margin-bottom: 24px;
}

.future-overlay-text .body-text {
    margin-bottom: 16px;
}

/* Dense circuit */

.dense-circuit {
    width: 100%;
    overflow: hidden;
}

.dense-circuit-svg {
    width: 100%;
    height: auto;
}

.dense-circuit-svg path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
}

.dense-circuit-svg.drawn path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 2s ease-in-out;
}

/* --- Connection lines between modules (animated glow) --- */

.connection-trace {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, #00D68F, transparent);
    animation: connection-glow 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes connection-glow {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.5; }
}

/* --- Hero Particles --- */

.hero-ambient-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* --- Section Circuit Dividers Gold Accent Reveal --- */

.section-circuit-divider {
    opacity: 0;
    transition: opacity 0.8s ease 0.4s;
}

.section-circuit-divider.visible {
    opacity: 1;
}

/* --- Footer --- */

#site-footer {
    position: relative;
    z-index: 1;
    padding: 40px 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-inner {
    max-width: 600px;
    margin: 0 auto;
}

.footer-logo {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 20px;
    color: #F0F6FF;
    display: block;
    margin-bottom: 8px;
}

.footer-tagline {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.05em;
    color: #6B7D94;
    display: block;
    margin-bottom: 16px;
}

.footer-circuit {
    max-width: 300px;
    margin: 0 auto;
}

.footer-trace {
    width: 100%;
    height: 10px;
}

/* --- Responsive --- */

@media (max-width: 900px) {
    .hero-grid,
    .protocol-grid,
    .communication-grid,
    .treaty-grid,
    .future-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .hero-grid .module-primary,
    .hero-grid .module-secondary,
    .hero-grid .module-tertiary,
    .protocol-grid .module-primary,
    .protocol-grid .module-secondary,
    .protocol-grid #protocol-circuit-1,
    .protocol-grid #protocol-circuit-2,
    .protocol-grid #protocol-meta,
    .communication-grid .module-primary,
    .communication-grid .module-secondary,
    .communication-grid #comm-data-stream,
    .communication-grid #comm-stat,
    .treaty-grid .module-primary,
    .treaty-grid .module-secondary,
    .treaty-grid #treaty-location-1,
    .treaty-grid #treaty-location-2,
    .treaty-grid #treaty-location-3,
    .future-grid .module-primary,
    .future-grid .module-secondary,
    .future-grid #future-stat-1,
    .future-grid #future-stat-2,
    .future-grid #future-cta {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .site-title {
        font-size: 44px;
    }

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

    .bento-section {
        padding: 40px 12px 20px;
    }

    .nav-links {
        gap: 14px;
    }

    .nav-link {
        font-size: 11px;
    }
}

@media (max-width: 600px) {
    .site-title {
        font-size: 32px;
    }

    .section-heading {
        font-size: 24px;
    }

    .module-heading {
        font-size: 20px;
    }

    .bento-module {
        padding: 20px;
    }

    .nav-links {
        display: none;
    }

    .hero-grid .module-primary {
        min-height: 280px;
    }
}

/* --- Pouch Circuit Animation --- */

.pouch-circuit {
    stroke-dasharray: 100;
    animation: pouch-pulse 3s ease-in-out infinite;
}

@keyframes pouch-pulse {
    0%, 100% { stroke-dashoffset: 0; opacity: 0.6; }
    50% { stroke-dashoffset: 50; opacity: 0.3; }
}

/* --- Scrollbar styling --- */

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #0A1628;
}

::-webkit-scrollbar-thumb {
    background: #1B3A5C;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #5BBCD6;
}