/* ===========================================================
   cbdc.bar — hand-drawn blueprint for tomorrow's currency
   Retro-futuristic · z-pattern spine · organic blobs
   =========================================================== */

:root {
    --void-indigo: #0d0b2e;
    --twilight-navy: #1a1742;
    --neon-amber: #ffb74d;
    --plasma-coral: #ff6b8a;
    --hologram-teal: #4de8c8;
    --faded-parchment: #e8dcc8;
    --iron-graphite: #3d3a5c;

    --font-head: 'Share Tech Mono', 'Courier New', monospace;
    --font-body: 'Cutive Mono', 'Courier New', monospace;
    --font-hand: 'Caveat', cursive;
}

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

html, body {
    background-color: var(--void-indigo);
    color: var(--faded-parchment);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.8;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    position: relative;
    min-height: 100vh;
}

/* ============== CROSSHATCH TEXTURE OVERLAY ============== */
.crosshatch-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
        repeating-linear-gradient(45deg,
            rgba(61, 58, 92, 0.22) 0px,
            rgba(61, 58, 92, 0.22) 1px,
            transparent 1px,
            transparent 6px),
        repeating-linear-gradient(135deg,
            rgba(61, 58, 92, 0.22) 0px,
            rgba(61, 58, 92, 0.22) 1px,
            transparent 1px,
            transparent 6px);
    background-size: 32px 32px;
    opacity: 0.45;
    mix-blend-mode: screen;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse at 20% 15%, rgba(255, 183, 77, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 85%, rgba(77, 232, 200, 0.06) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 50%, rgba(26, 23, 66, 0.6) 0%, transparent 70%);
}

/* ============== Z-SPINE SVG ============== */
.z-spine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

#zPath {
    stroke-dasharray: var(--path-len, 10000);
    stroke-dashoffset: var(--path-len, 10000);
    transition: stroke-dashoffset 0.1s linear;
    opacity: 0.9;
}

/* ============== COMPASS ROSE ============== */
.compass-rose {
    position: fixed;
    top: 28px;
    right: 28px;
    width: 88px;
    height: 88px;
    z-index: 50;
    cursor: pointer;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 0 6px rgba(255, 183, 77, 0.15));
}

.compass-rose:hover { transform: rotate(15deg); }
.compass-rose svg { width: 100%; height: 100%; display: block; }

.compass-rose .arm { cursor: pointer; transition: stroke 0.3s ease, fill 0.3s ease; }
.compass-rose .arm.active { stroke: var(--neon-amber); fill: rgba(255, 183, 77, 0.15); }
.compass-rose .arm:hover { stroke: var(--plasma-coral); }

#compassNeedle { transition: transform 0.6s cubic-bezier(.4,.2,.2,1); }

.compass-label {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-hand);
    color: var(--faded-parchment);
    opacity: 0.6;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* ============== SCROLL ANNOTATION ============== */
.scroll-annotation {
    position: fixed;
    bottom: 24px;
    left: 28px;
    z-index: 50;
    font-family: var(--font-hand);
    color: var(--faded-parchment);
    opacity: 0.55;
    font-size: 1.05rem;
}
.scroll-annotation em {
    color: var(--neon-amber);
    font-style: normal;
    font-weight: 700;
}

/* ============== MAIN / CHAPTERS ============== */
main { position: relative; z-index: 10; }

.chapter {
    position: relative;
    min-height: 100vh;
    padding: 80px 7vw;
    display: grid;
    overflow: hidden;
}

.chapter-number {
    position: absolute;
    top: 28px;
    left: 7vw;
    font-family: var(--font-hand);
    color: var(--plasma-coral);
    font-size: 1.05rem;
    opacity: 0.85;
    letter-spacing: 0.04em;
}

.caveat { font-family: var(--font-hand); color: var(--plasma-coral); font-weight: 400; }

/* ============== CHAPTER 1 — Z-pattern nodes ============== */
.chapter-1 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "brand headline"
        "hero hero"
        "context prompt";
    gap: 30px 40px;
    align-items: center;
    padding-top: 110px;
    padding-bottom: 60px;
}

.node { opacity: 0; transform: translateY(20px); transition: opacity 0.9s ease, transform 0.9s ease; }
.node.revealed { opacity: 1; transform: translateY(0); }

.node-tl { grid-area: brand; align-self: start; }
.node-tr { grid-area: headline; justify-self: end; text-align: right; align-self: start; }
.node-center { grid-area: hero; justify-self: center; align-self: center; max-width: 560px; }
.node-bl { grid-area: context; align-self: end; max-width: 380px; }
.node-br { grid-area: prompt; justify-self: end; align-self: end; }

.brand-mark { position: relative; }
.brand-svg { width: 260px; height: 78px; display: block; }
.brand-note {
    position: absolute;
    top: 62px;
    left: 62px;
    font-size: 0.95rem;
    opacity: 0.7;
    color: var(--faded-parchment);
}

.headline {
    font-family: var(--font-head);
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--neon-amber);
    line-height: 0.95;
    text-shadow: 0 0 2px rgba(255, 183, 77, 0.4);
    position: relative;
}
.headline .line-1 { display: block; color: var(--faded-parchment); font-size: 0.55em; opacity: 0.85; letter-spacing: 0.12em; margin-bottom: 0.2em; }
.headline .line-2 { display: block; }
.headline-note {
    display: block;
    font-size: 1rem;
    margin-top: 0.4em;
    opacity: 0.8;
    color: var(--plasma-coral);
}

.hero-illustration { width: 100%; max-width: 560px; }
.hero-illustration svg { width: 100%; height: auto; display: block; }

.context-text p { font-size: 1.1rem; line-height: 1.8; color: var(--faded-parchment); }
.context-text p:first-child { margin-bottom: 0.5em; }
.context-text em { color: var(--neon-amber); font-style: italic; }

.nav-prompt {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--neon-amber);
    text-decoration: none;
    font-family: var(--font-head);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    padding: 10px 18px;
    border: 1px dashed rgba(255, 183, 77, 0.4);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.nav-prompt:hover { background: rgba(255, 183, 77, 0.08); border-color: var(--neon-amber); transform: translateX(4px); }
.nav-prompt svg { width: 38px; height: 18px; }

/* ============== SVG PATH DRAW ANIMATION ============== */
.draw-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawPath 1.8s ease-out forwards;
    animation-delay: var(--delay, 0s);
    animation-play-state: paused;
}
.draw-path-slow {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: drawPath 3.2s ease-out forwards;
    animation-delay: var(--delay, 0s);
    animation-play-state: paused;
}
.revealed .draw-path,
.revealed .draw-path-slow,
section.in-view .draw-path,
section.in-view .draw-path-slow { animation-play-state: running; }

@keyframes drawPath { to { stroke-dashoffset: 0; } }

.particle {
    opacity: 0;
    animation: particleFloat 2s ease-out forwards;
    animation-delay: calc(1s + var(--d, 0s));
    animation-play-state: paused;
}
section.in-view .particle { animation-play-state: running; }

@keyframes particleFloat {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    30% { opacity: 1; }
    100% { opacity: 0.8; transform: translate(var(--tx, 10px), var(--ty, -10px)) scale(1); }
}

.symbol-fade {
    opacity: 0;
    animation: symbolFade 1.2s ease-out forwards;
    animation-delay: var(--d, 0s);
    animation-play-state: paused;
}
section.in-view .symbol-fade { animation-play-state: running; }
@keyframes symbolFade { to { opacity: 1; } }

/* ============== CHAPTER 2 — Triptych ============== */
.chapter-2 {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 40px;
    align-content: start;
    padding-top: 120px;
}

.section-title {
    font-family: var(--font-head);
    font-size: clamp(2rem, 5vw, 4rem);
    color: var(--neon-amber);
    letter-spacing: 0.06em;
    text-shadow: 0 0 2px rgba(255, 183, 77, 0.4);
    text-align: center;
    line-height: 1.1;
    margin-bottom: 10px;
}
.section-title span { color: var(--faded-parchment); opacity: 0.75; display: block; font-size: 0.6em; letter-spacing: 0.15em; margin-top: 0.2em; }

.triptych {
    display: grid;
    grid-template-columns: 30fr 40fr 30fr;
    gap: 24px;
    align-items: stretch;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

.panel {
    background: rgba(26, 23, 66, 0.55);
    border: 1px solid rgba(61, 58, 92, 0.7);
    padding: 24px;
    position: relative;
    transform: rotate(-0.6deg);
    transition: transform 0.6s ease, border-color 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.panel-a { transform: rotate(-0.8deg); }
.panel-b { transform: rotate(0.3deg); }
.panel-c { transform: rotate(0.8deg); }

.panel:hover { transform: rotate(0deg) translateY(-4px); border-color: var(--hologram-teal); }

.panel-frame {
    width: 100%;
    aspect-ratio: 200 / 280;
    background: rgba(13, 11, 46, 0.6);
    position: relative;
    overflow: hidden;
}
.panel-frame svg { width: 100%; height: 100%; display: block; }

.panel-title {
    font-family: var(--font-head);
    color: var(--neon-amber);
    font-size: 1.35rem;
    letter-spacing: 0.05em;
    text-shadow: 0 0 2px rgba(255, 183, 77, 0.35);
}
.panel-body {
    font-size: 1rem;
    color: var(--faded-parchment);
    opacity: 0.9;
    line-height: 1.75;
}

.panel-mark {
    position: absolute;
    top: 12px;
    right: 20px;
    font-size: 1.6rem;
    color: var(--neon-amber);
    opacity: 0.85;
}

/* ============== CHAPTER 3 — Organic blob ============== */
.chapter-3 {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 30px;
    align-content: center;
    padding-top: 120px;
}

.blob-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blob-shape {
    position: relative;
    width: 100%;
    max-width: 1100px;
    aspect-ratio: 16 / 10;
    background: var(--twilight-navy);
    clip-path: polygon(
        15% 6%, 42% 2%, 68% 8%, 88% 18%,
        96% 42%, 92% 68%, 82% 88%, 58% 96%,
        32% 94%, 12% 84%, 4% 58%, 6% 32%
    );
    filter: drop-shadow(0 0 1px var(--hologram-teal)) drop-shadow(0 0 12px rgba(77, 232, 200, 0.25));
    animation: blobMorph 8s ease-in-out infinite alternate;
    position: relative;
    overflow: hidden;
}

@keyframes blobMorph {
    0% {
        clip-path: polygon(
            15% 6%, 42% 2%, 68% 8%, 88% 18%,
            96% 42%, 92% 68%, 82% 88%, 58% 96%,
            32% 94%, 12% 84%, 4% 58%, 6% 32%
        );
    }
    50% {
        clip-path: polygon(
            18% 4%, 48% 6%, 72% 4%, 92% 22%,
            94% 46%, 96% 72%, 78% 92%, 54% 94%,
            28% 96%, 8% 80%, 6% 54%, 4% 28%
        );
    }
    100% {
        clip-path: polygon(
            12% 10%, 38% 4%, 64% 10%, 86% 16%,
            98% 38%, 88% 64%, 84% 86%, 62% 98%,
            36% 92%, 14% 88%, 2% 62%, 8% 36%
        );
    }
}

.blob-inner {
    position: absolute;
    inset: 0;
    padding: 80px 90px;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    align-items: center;
    background-image:
        repeating-linear-gradient(45deg,
            rgba(61, 58, 92, 0.35) 0px,
            rgba(61, 58, 92, 0.35) 1px,
            transparent 1px,
            transparent 8px),
        repeating-linear-gradient(135deg,
            rgba(61, 58, 92, 0.35) 0px,
            rgba(61, 58, 92, 0.35) 1px,
            transparent 1px,
            transparent 8px);
}

.blob-illustration { width: 100%; height: auto; display: block; }

.blob-caption p {
    color: var(--faded-parchment);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1em;
}
.blob-caption em { color: var(--neon-amber); font-style: italic; }
.blob-caption .caveat {
    display: block;
    margin-top: 1em;
    color: var(--plasma-coral);
    font-size: 1.05rem;
    opacity: 0.9;
}

/* ============== CHAPTER 4 — Invitation ============== */
.chapter-4 {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 40px;
    align-content: center;
    text-align: center;
    padding-top: 120px;
    position: relative;
}

.domain-letters {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 0;
}

.letters-svg { width: 100%; height: auto; display: block; }

.dot-flare {
    filter: drop-shadow(0 0 6px var(--neon-amber)) drop-shadow(0 0 18px rgba(255, 107, 138, 0.6));
    animation: dotDrift 6s ease-in-out infinite alternate;
    transform-origin: center;
}

@keyframes dotDrift {
    0% { transform: translate(0, 0) scale(1); opacity: 0.95; }
    50% { transform: translate(8px, -4px) scale(1.15); opacity: 1; }
    100% { transform: translate(-6px, 3px) scale(0.95); opacity: 0.85; }
}

.anno-text { opacity: 0; animation: fadeIn 1s ease forwards; animation-delay: 3s; animation-play-state: paused; }
section.in-view .anno-text { animation-play-state: running; }
@keyframes fadeIn { to { opacity: 0.9; } }

.invitation-text {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
.invitation-text p {
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--faded-parchment);
    margin-bottom: 1.4em;
}
.invitation-text em { color: var(--neon-amber); font-style: italic; }

.invitation-meta {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    margin-top: 1.6em;
}
.invitation-meta .caveat { font-size: 1.1rem; opacity: 0.85; }
.invitation-meta .colophon { color: var(--hologram-teal); font-size: 0.95rem; opacity: 0.7; letter-spacing: 0.08em; }

.lens-flare-fixed {
    position: absolute;
    top: 45%;
    left: 42%;
    width: 280px;
    height: 280px;
    pointer-events: none;
    background:
        radial-gradient(circle, rgba(255, 183, 77, 0.35) 0%, rgba(255, 107, 138, 0.18) 30%, transparent 60%);
    filter: blur(2px);
    animation: fixedFlarePulse 8s ease-in-out infinite alternate;
    mix-blend-mode: screen;
    z-index: 1;
}

@keyframes fixedFlarePulse {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.2); opacity: 1; }
}

/* ============== LENS FLARE (transitional) ============== */
.lens-flare {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    z-index: 40;
    mix-blend-mode: screen;
    transition: opacity 0.6s ease, transform 0.4s ease-out;
}

.lens-flare.active {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 1;
    animation: flareDissolve 700ms ease-out forwards;
}

@keyframes flareDissolve {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    40% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

.flare-core {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle,
        rgba(255, 183, 77, 0.85) 0%,
        rgba(255, 107, 138, 0.35) 40%,
        transparent 70%);
    filter: blur(1px);
}

.flare-hex {
    position: absolute;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(77, 232, 200, 0.7) 0%, transparent 70%);
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    opacity: 0.6;
}
.hex-1 { top: 30%; left: 20%; transform: translate(-50%, -50%); width: 50px; height: 50px; }
.hex-2 { top: 60%; left: 80%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: radial-gradient(circle, rgba(255, 107, 138, 0.7) 0%, transparent 70%); }
.hex-3 { top: 75%; left: 35%; transform: translate(-50%, -50%); width: 70px; height: 70px; }

/* ============== RESPONSIVE ============== */
@media (max-width: 900px) {
    .chapter-1 {
        grid-template-columns: 1fr;
        grid-template-areas:
            "brand"
            "headline"
            "hero"
            "context"
            "prompt";
    }
    .node-tr { justify-self: start; text-align: left; }
    .node-br { justify-self: start; }

    .triptych {
        grid-template-columns: 1fr;
    }

    .blob-inner {
        grid-template-columns: 1fr;
        padding: 60px 60px;
        gap: 20px;
    }

    .compass-rose { width: 64px; height: 64px; top: 14px; right: 14px; }
    .compass-label { font-size: 0.7rem; top: 66px; }

    .chapter { padding: 80px 5vw; }
}

@media (max-width: 560px) {
    .headline { font-size: clamp(2.4rem, 12vw, 4rem); }
    .blob-inner { padding: 40px 30px; }
    .domain-letters { padding: 10px 0; }
}