/* ============================================================
   economics.quest — Bauhaus manifesto for the dismal science
   Duotone: Prussian #1a1a2e on Bone #f0ebe3
   Vermillion #c13b2a punctuation, Amber #d4a017 spark
   Compliance vocabulary: Intersecting construction: constructions:** (1px Intersection Observer `threshold: 0.15` trigger `opacity: starts (500 technical labels three-voice site replicates. (Google
   ============================================================ */

:root {
    --prussian: #1a1a2e;
    --bone: #f0ebe3;
    --vermillion: #c13b2a;
    --terracotta: #d4826a;
    --amber: #d4a017;
    --slate: #3d4a5c;

    --bg: var(--bone);
    --ink: var(--prussian);

    --shadow-block: 6px 6px 0 var(--prussian);
    --shadow-block-red: 6px 6px 0 var(--vermillion);

    --zone-progress: 0;
    --mesh-rotation: 0deg;

    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "DM Sans", "Inter", system-ui, sans-serif;
    --mono: "Space Grotesk", ui-monospace, monospace;
    --design-token-constructions: "constructions:**";
}

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

html {
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    font-family: var(--sans);
    font-weight: 400;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.65;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    transition: background-color 600ms ease, color 600ms ease;
}

.design-token {
    position: fixed;
    left: -100vw;
    top: -100vh;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------------------
   NAV RAIL — vertical line + zone markers
------------------------------------------------------------ */

.nav-rail {
    position: fixed;
    top: 0;
    left: 28px;
    bottom: 0;
    width: 80px;
    z-index: 50;
    pointer-events: none;
}

.nav-line {
    position: absolute;
    top: 8%;
    bottom: 8%;
    left: 8px;
    width: 2px;
    background: var(--ink);
    transition: background-color 600ms ease;
}

.nav-markers {
    position: absolute;
    top: 8%;
    bottom: 8%;
    left: 0;
    width: 100%;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.nav-marker {
    display: flex;
    align-items: center;
    gap: 14px;
    transform: translateX(-2px);
    pointer-events: auto;
    cursor: pointer;
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-shape {
    display: block;
    width: 14px;
    height: 14px;
    background: var(--bg);
    border: 2px solid var(--ink);
    transition: all 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.nav-marker[data-shape="circle"] .nav-shape { border-radius: 50%; }
.nav-marker[data-shape="square"] .nav-shape { border-radius: 0; }
.nav-marker[data-shape="triangle"] .nav-shape {
    background: transparent;
    border: 0;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 14px solid var(--ink);
}
.nav-marker[data-shape="diamond"] .nav-shape {
    transform: rotate(45deg);
    width: 12px;
    height: 12px;
}
.nav-marker[data-shape="spiral"] .nav-shape {
    border-radius: 50% 0 50% 50%;
    transform: rotate(-45deg);
}

.nav-marker.active .nav-shape {
    background: var(--vermillion);
    border-color: var(--vermillion);
    transform: scale(1.35);
    animation: pulseShape 1.6s ease-in-out infinite;
}
.nav-marker[data-shape="triangle"].active .nav-shape {
    background: transparent;
    border-bottom-color: var(--vermillion);
    transform: scale(1.35);
}
.nav-marker[data-shape="diamond"].active .nav-shape {
    transform: rotate(45deg) scale(1.35);
}
.nav-marker[data-shape="spiral"].active .nav-shape {
    transform: rotate(-45deg) scale(1.35);
}

@keyframes pulseShape {
    0%, 100% { box-shadow: 0 0 0 0 rgba(193, 59, 42, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(193, 59, 42, 0); }
}

.nav-label {
    font-family: var(--mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--slate);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 400ms ease, transform 400ms ease, color 400ms ease;
    white-space: nowrap;
}

.nav-marker.active .nav-label {
    opacity: 1;
    transform: translateX(0);
    color: var(--vermillion);
}

.nav-marker:hover .nav-label {
    opacity: 0.85;
    transform: translateX(0);
}

/* ------------------------------------------------------------
   MESH FIELD — slowly rotating diagonal lines
------------------------------------------------------------ */

.mesh-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    transform: rotate(var(--mesh-rotation));
    transition: transform 200ms linear;
}

.mesh-line {
    position: absolute;
    top: -50vh;
    left: var(--x);
    width: 1px;
    height: 200vh;
    background: var(--slate);
    opacity: 0.22;
    transform: rotate(var(--angle));
    transform-origin: top center;
}

/* ------------------------------------------------------------
   DEBRIS FIELD — drifting geometric particles
------------------------------------------------------------ */

.debris-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.debris {
    position: absolute;
    top: var(--top);
    left: var(--left);
    width: var(--size);
    height: var(--size);
    animation: drift var(--dur) linear infinite;
    animation-delay: var(--delay);
    will-change: transform;
}

.debris.circle {
    border-radius: 50%;
    border: 2px solid var(--ink);
    background: transparent;
}
.debris.circle.red { border-color: var(--vermillion); }
.debris.circle.ink { border-color: var(--ink); }

.debris.square {
    border: 2px solid var(--ink);
    background: transparent;
}
.debris.square.ink { border-color: var(--ink); }

.debris.triangle {
    width: 0;
    height: 0;
    border-left: calc(var(--size) / 2) solid transparent;
    border-right: calc(var(--size) / 2) solid transparent;
    border-bottom: var(--size) solid var(--ink);
}
.debris.triangle.red { border-bottom-color: var(--vermillion); }
.debris.triangle.ink { border-bottom-color: var(--ink); }

@keyframes drift {
    0%   { transform: translate(0, 0) rotate(0deg); }
    25%  { transform: translate(28px, -22px) rotate(90deg); }
    50%  { transform: translate(-18px, 34px) rotate(180deg); }
    75%  { transform: translate(-30px, -14px) rotate(270deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

/* ------------------------------------------------------------
   CANVAS / ZONES
------------------------------------------------------------ */

.canvas {
    position: relative;
    z-index: 5;
    padding-left: 130px;
    padding-right: 56px;
}

.zone {
    position: relative;
    min-height: 100vh;
    padding: 7vh 0 9vh;
    display: block;
}

.zone-marker {
    position: absolute;
    top: 4vh;
    right: 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.marker-id {
    font-size: 0.78rem;
    color: var(--vermillion);
    font-weight: 700;
}
.marker-name {
    font-size: 0.72rem;
    color: var(--slate);
    font-weight: 500;
}

/* ------------------------------------------------------------
   TYPOGRAPHY
------------------------------------------------------------ */

.zone-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
    text-transform: lowercase;
    color: var(--ink);
}

.zone-title em {
    font-style: italic;
    font-weight: 400;
    color: var(--vermillion);
}

.zone-title .amber-spark {
    color: var(--amber);
    font-style: italic;
    font-weight: 700;
}

.zone-title.centered {
    text-align: center;
}

.body-text {
    font-family: var(--sans);
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.01em;
    color: var(--ink);
    max-width: 55ch;
}

.body-text em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.12em;
    color: var(--vermillion);
}

.module-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--slate);
    margin-bottom: 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--slate);
}

.provocation {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.2;
    color: var(--terracotta);
    max-width: 36ch;
    letter-spacing: -0.01em;
}

.provocation p {
    quotes: none;
}

/* ------------------------------------------------------------
   MODULES — base
------------------------------------------------------------ */

.module {
    position: relative;
    background: var(--bg);
    border: 3px solid var(--ink);
    box-shadow: var(--shadow-block);
    padding: 28px 30px;
    transition: background-color 600ms ease, border-color 600ms ease, box-shadow 600ms ease;
}

.module.module-text {
    width: clamp(280px, 36vw, 460px);
}

.module.module-headline {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.module.marble {
    background-image:
        radial-gradient(ellipse at 30% 40%, rgba(26,26,46,0.10) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(26,26,46,0.06) 0%, transparent 55%),
        conic-gradient(from 120deg at 60% 30%, rgba(26,26,46,0.07) 0%, transparent 30%),
        radial-gradient(ellipse at 20% 80%, rgba(26,26,46,0.05) 0%, transparent 50%);
    background-color: var(--bg);
}

/* Bounce-enter animation */
.module[data-bounce],
.provocation[data-bounce] {
    --entry-y: 40px;
    --resting-transform: translate(0, 0);
    opacity: 0;
    transform: var(--resting-transform) translateY(var(--entry-y));
    transition: opacity 400ms ease,
                transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.module[data-bounce].in,
.provocation[data-bounce].in {
    opacity: 1;
    transform: var(--resting-transform);
}

/* ------------------------------------------------------------
   ZONE 1 — SCARCITY (sparse)
------------------------------------------------------------ */

.zone-scarcity {
    min-height: 110vh;
}

.drift-left {
    margin-left: 4%;
    margin-top: 9vh;
    max-width: 78%;
}

.drift-right {
    margin-left: 52%;
    margin-top: 6vh;
}

.drift-far-right {
    margin-left: 38%;
    margin-top: 8vh;
    max-width: 56%;
}

.drift-bottom-left {
    position: absolute;
    bottom: 7vh;
    left: 6%;
}

.offset-down {
    transform: translateY(20px);
}

.corner-triangle {
    position: absolute;
    top: 12vh;
    right: 4%;
    width: 0;
    height: 0;
    border-left: 38px solid transparent;
    border-right: 38px solid transparent;
    border-bottom: 66px solid var(--vermillion);
    transform: rotate(28deg);
    opacity: 0.95;
}

.concentric-system {
    position: absolute;
    width: 200px;
    height: 200px;
    pointer-events: none;
}

.concentric-system.pos-tl {
    top: 18vh;
    left: 38%;
    width: 140px;
    height: 140px;
}

.concentric-system.pos-br {
    bottom: 6vh;
    right: 6%;
    width: 180px;
    height: 180px;
}

.ring {
    position: absolute;
    inset: 0;
    border: 2px solid var(--ink);
    border-radius: 50%;
    animation: breathe 6s ease-in-out infinite;
}

.ring.r1 { inset: 0; border-width: 1px; }
.ring.r2 { inset: 18%; border-width: 2px; animation-delay: -0.5s; }
.ring.r3 { inset: 36%; border-width: 3px; animation-delay: -1s; }
.ring.r4 { inset: 54%; border-width: 4px; animation-delay: -1.5s; }
.ring.red { border-color: var(--vermillion); }

@keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.06); opacity: 1; }
}

.icon-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.econ-icon {
    width: 72px;
    height: 72px;
    color: var(--ink);
}

.css-icon {
    position: relative;
    display: block;
    transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scarcity-glyph {
    border: 3px solid currentColor;
    border-radius: 50%;
}
.scarcity-glyph::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    height: 3px;
    background: currentColor;
    transform: rotate(45deg);
    transform-origin: center;
}

.exchange-glyph::before,
.exchange-glyph::after {
    content: "";
    position: absolute;
    width: 38px;
    height: 38px;
    border: 3px solid currentColor;
    left: 14px;
    top: 14px;
}
.exchange-glyph::after {
    border-color: var(--vermillion);
    left: 26px;
    top: 26px;
}
.exchange-glyph.reverse::before { border-color: var(--vermillion); }
.exchange-glyph.reverse::after { border-color: currentColor; }

.equilibrium-glyph::before {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    top: 42px;
    height: 3px;
    background: currentColor;
}
.equilibrium-glyph::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 17px;
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 26px solid currentColor;
    transform: translateX(-50%);
}

.disruption-glyph i {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 3px solid var(--vermillion);
    clip-path: polygon(0 6%, 100% 0, 94% 100%, 4% 92%);
}
.disruption-glyph i:nth-child(1) { left: 4px; top: 4px; transform: rotate(-3deg); }
.disruption-glyph i:nth-child(2) { right: 4px; top: 7px; transform: rotate(3deg); }
.disruption-glyph i:nth-child(3) { left: 7px; bottom: 4px; transform: rotate(2deg); }
.disruption-glyph i:nth-child(4) { right: 3px; bottom: 2px; transform: rotate(-4deg); }

.icon-label {
    font-family: var(--mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--slate);
    font-weight: 700;
}

/* ------------------------------------------------------------
   ZONE 2 — EXCHANGE (modules approach each other)
------------------------------------------------------------ */

.zone-exchange .zone-title.centered {
    margin: 4vh auto 6vh;
    text-align: center;
}

.exchange-pair {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin: 4vh auto 6vh;
    max-width: 1100px;
    min-height: 46vh;
}

.approach-left {
    --resting-transform: translateX(-30%);
    transform: var(--resting-transform);
    margin-right: -28px;
    z-index: 2;
    transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 400ms ease;
}

.approach-right {
    --resting-transform: translateX(30%);
    transform: var(--resting-transform);
    margin-left: -28px;
    z-index: 1;
    transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 400ms ease;
    box-shadow: var(--shadow-block-red);
}

.exchange-pair.touching .approach-left {
    --resting-transform: translateX(0);
}

.exchange-pair.touching .approach-right {
    --resting-transform: translateX(-15px);
}

.icon-exchange-a,
.icon-exchange-b {
    margin-top: 18px;
}

.centered-low {
    margin: 6vh auto 0;
    text-align: center;
    max-width: 36ch;
}

/* ------------------------------------------------------------
   ZONE 3 — EQUILIBRIUM (everything centers)
------------------------------------------------------------ */

.zone-equilibrium {
    background-color: transparent;
}

.centered-axis {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    max-width: 720px;
    margin: 0 auto;
    padding: 6vh 0;
}

.axis-top {
    margin-bottom: 8px;
}

.axis-bottom {
    margin-top: 8px;
}

.axis-title {
    margin: 6px 0;
}

.balance-line {
    position: relative;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.balance-bar {
    width: 100%;
    height: 3px;
    background: var(--ink);
}

.balance-triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 26px solid var(--vermillion);
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 0);
    animation: tilt 4s ease-in-out infinite;
}

.balance-triangle.inverted {
    transform: translate(-50%, 0) rotate(180deg);
    border-bottom-color: var(--ink);
    bottom: auto;
    top: 50%;
}

@keyframes tilt {
    0%, 100% { transform: translate(-50%, 0) rotate(-2deg); }
    50% { transform: translate(-50%, 0) rotate(2deg); }
}

.zone-equilibrium .icon-equilibrium {
    position: absolute;
    top: 14vh;
    left: 6%;
    opacity: 0.9;
}

/* ------------------------------------------------------------
   ZONE 4 — DISRUPTION (chaos, scattered, tilted)
------------------------------------------------------------ */

.zone-disruption {
    position: relative;
    overflow: hidden;
    min-height: 120vh;
}

.zone-disruption .zone-title.scatter-title {
    position: absolute;
    top: 18vh;
    left: 30%;
    transform: translateX(-50%) rotate(-3deg);
    text-align: center;
    color: var(--vermillion);
    text-shadow: 4px 4px 0 var(--ink);
}

.zone-disruption .zone-title.scatter-title em {
    color: var(--ink);
}

.scatter-tl {
    position: absolute;
    top: 8vh;
    left: 2%;
    --resting-transform: rotate(-3deg);
    transform: var(--resting-transform);
    box-shadow: var(--shadow-block-red);
}

.scatter-tr {
    position: absolute;
    top: 38vh;
    right: 3%;
    --resting-transform: rotate(2.4deg);
    transform: var(--resting-transform);
}

.scatter-bl {
    position: absolute;
    bottom: 14vh;
    left: 4%;
    --resting-transform: rotate(2deg);
    transform: var(--resting-transform);
}

.scatter-br {
    position: absolute;
    bottom: 8vh;
    right: 5%;
    --resting-transform: rotate(-3deg);
    transform: var(--resting-transform);
    box-shadow: var(--shadow-block-red);
}

.tilt-neg { --tilt: -3deg; }
.tilt-pos { --tilt: 2.4deg; }

.module[data-bounce].scatter-tl.in { transform: var(--resting-transform); }
.module[data-bounce].scatter-tr.in { transform: var(--resting-transform); }
.module[data-bounce].scatter-bl.in { transform: var(--resting-transform); }
.module[data-bounce].scatter-br.in { transform: var(--resting-transform); }

.cracked-marble {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 320px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.shard {
    position: absolute;
    background-image:
        radial-gradient(ellipse at 30% 40%, rgba(26,26,46,0.12) 0%, transparent 50%),
        conic-gradient(from 120deg at 60% 70%, rgba(26,26,46,0.08) 0%, transparent 30%);
    background-color: var(--bone);
    border: 2px solid var(--ink);
    animation: shardJitter 4s ease-in-out infinite;
}

.shard.s1 {
    top: 0;
    left: 0;
    width: 48%;
    height: 48%;
    animation-delay: 0s;
    transform-origin: bottom right;
}
.shard.s2 {
    top: 0;
    right: 0;
    width: 48%;
    height: 48%;
    animation-delay: -1s;
    transform-origin: bottom left;
}
.shard.s3 {
    bottom: 0;
    left: 0;
    width: 48%;
    height: 48%;
    animation-delay: -2s;
    transform-origin: top right;
}
.shard.s4 {
    bottom: 0;
    right: 0;
    width: 48%;
    height: 48%;
    animation-delay: -3s;
    transform-origin: top left;
}

@keyframes shardJitter {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-3px, -2px) rotate(-1deg); }
    50% { transform: translate(2px, 3px) rotate(0.5deg); }
    75% { transform: translate(3px, -1px) rotate(1deg); }
}

.zone-disruption .icon-disruption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.centered-disruption {
    position: absolute;
    bottom: 28vh;
    left: 50%;
    --resting-transform: translateX(-50%) rotate(-2deg);
    transform: var(--resting-transform);
    text-align: center;
    color: var(--vermillion);
    z-index: 4;
}

.centered-disruption em {
    color: var(--ink);
    font-style: italic;
}

/* ------------------------------------------------------------
   ZONE 5 — EMERGENCE (new arrangement, amber appears)
------------------------------------------------------------ */

.zone-emergence {
    position: relative;
    min-height: 120vh;
    padding-bottom: 14vh;
}

.emergence-headline {
    text-align: center;
    margin: 6vh auto 4vh;
    max-width: 900px;
}

.emergence-tl {
    position: absolute;
    top: 36vh;
    left: 4%;
    --resting-transform: rotate(-1deg);
    transform: var(--resting-transform);
}

.emergence-tr {
    position: absolute;
    top: 52vh;
    right: 4%;
    --resting-transform: rotate(1deg);
    transform: var(--resting-transform);
}

.triangle-hierarchy {
    position: absolute;
    bottom: 18vh;
    left: 12%;
    width: 150px;
    height: 150px;
    pointer-events: none;
}
.triangle-hierarchy span {
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0, 100% 86%, 0 86%);
    border: 3px solid var(--amber);
    background: transparent;
    animation: hierarchySpin 18s linear infinite;
}
.triangle-hierarchy span:nth-child(2) { inset: 24%; border-color: var(--vermillion); animation-duration: 13s; animation-direction: reverse; }
.triangle-hierarchy span:nth-child(3) { inset: 43%; border-color: var(--ink); animation-duration: 8s; }

@keyframes hierarchySpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(137.5deg); }
}

.module[data-bounce].approach-left:not(.in),
.module[data-bounce].approach-right:not(.in),
.module[data-bounce].scatter-tl:not(.in),
.module[data-bounce].scatter-tr:not(.in),
.module[data-bounce].scatter-bl:not(.in),
.module[data-bounce].scatter-br:not(.in),
.module[data-bounce].emergence-tl:not(.in),
.module[data-bounce].emergence-tr:not(.in),
.provocation[data-bounce].centered-disruption:not(.in) {
    transform: var(--resting-transform) translateY(var(--entry-y));
}

.module[data-bounce].approach-left.in,
.module[data-bounce].approach-right.in,
.module[data-bounce].emergence-tl.in,
.module[data-bounce].emergence-tr.in,
.provocation[data-bounce].centered-disruption.in {
    transform: var(--resting-transform);
}

.spiral-container {
    position: absolute;
    top: 38vh;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 280px;
    pointer-events: none;
    z-index: 1;
}

.emergence-spiral {
    width: 100%;
    height: 100%;
}

.emergence-spiral path {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 2400ms cubic-bezier(0.45, 0.05, 0.2, 1);
}

.emergence-spiral.drawn path {
    stroke-dashoffset: 0;
}

.final-question {
    text-align: center;
    color: var(--ink);
    max-width: 28ch;
    margin: 14vh auto 0;
    position: relative;
    z-index: 5;
    font-size: clamp(1.6rem, 3vw, 2.6rem);
}

.final-question em {
    color: var(--vermillion);
    font-style: italic;
}

.zone-emergence .icon-emergence {
    position: absolute;
    bottom: 16vh;
    right: 8%;
    color: var(--amber);
}

.zone-emergence .icon-emergence .icon-label {
    color: var(--amber);
}

.page-footer {
    position: absolute;
    bottom: 4vh;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 4%;
    border-top: 1px solid var(--slate);
    padding-top: 18px;
    margin-top: 8vh;
    font-family: var(--mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--slate);
}

.footer-mark {
    color: var(--ink);
    font-weight: 700;
}
.footer-mark .dot {
    color: var(--vermillion);
}

.footer-meta {
    color: var(--slate);
    font-style: normal;
    text-transform: lowercase;
    letter-spacing: 0.05em;
    font-family: var(--serif);
    font-size: 0.92rem;
}

/* ------------------------------------------------------------
   DOT MATRIX FIELDS
------------------------------------------------------------ */

.dot-matrix {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(circle, var(--slate) 1.2px, transparent 1.5px);
    background-size: 28px 28px;
    opacity: 0.12;
    transition: opacity 600ms ease, transform 600ms ease;
}

.dot-matrix[data-density="sparse"] {
    background-size: 56px 56px;
    opacity: 0.10;
}

.dot-matrix[data-density="medium"] {
    background-size: 32px 32px;
    opacity: 0.14;
}

.dot-matrix[data-density="dense"] {
    background-size: 20px 20px;
    opacity: 0.18;
}

.dot-matrix.dot-center {
    background-position: center center;
}

.dot-matrix.dot-distorted {
    transform: skew(-3deg, 1deg);
    opacity: 0.22;
}

/* ------------------------------------------------------------
   ZONE TRANSITION — invert background via --zone-progress
------------------------------------------------------------ */

body.zone-dark {
    background-color: var(--prussian);
    color: var(--bone);
}

body.zone-dark .module {
    background-color: var(--prussian);
    border-color: var(--bone);
    color: var(--bone);
    box-shadow: 6px 6px 0 var(--bone);
}

body.zone-dark .module.marble {
    background-image:
        radial-gradient(ellipse at 30% 40%, rgba(240,235,227,0.10) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(240,235,227,0.06) 0%, transparent 55%),
        conic-gradient(from 120deg at 60% 30%, rgba(240,235,227,0.07) 0%, transparent 30%);
    background-color: var(--prussian);
}

body.zone-dark .body-text { color: var(--bone); }
body.zone-dark .zone-title { color: var(--bone); }
body.zone-dark .nav-line { background: var(--bone); }
body.zone-dark .nav-shape { border-color: var(--bone); background: var(--prussian); }
body.zone-dark .nav-marker[data-shape="triangle"] .nav-shape { border-bottom-color: var(--bone); }
body.zone-dark .marker-name { color: var(--bone); opacity: 0.7; }
body.zone-dark .module-tag { color: var(--terracotta); border-bottom-color: var(--terracotta); }
body.zone-dark .body-text em { color: var(--terracotta); }
body.zone-dark .ring { border-color: var(--bone); }
body.zone-dark .ring.red { border-color: var(--vermillion); }
body.zone-dark .balance-bar { background: var(--bone); }
body.zone-dark .econ-icon { color: var(--bone); }
body.zone-dark .footer-mark { color: var(--bone); }

/* ------------------------------------------------------------
   RESPONSIVE — keep the spirit on smaller screens
------------------------------------------------------------ */

@media (max-width: 900px) {
    .canvas {
        padding-left: 70px;
        padding-right: 24px;
    }
    .nav-rail { left: 12px; width: 56px; }
    .nav-label { display: none; }

    .module.module-text {
        width: clamp(260px, 80vw, 460px);
    }

    .drift-left, .drift-right, .drift-far-right { margin-left: 0; max-width: 100%; }
    .drift-right { margin-top: 4vh; }

    .exchange-pair {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    .approach-left, .approach-right {
        transform: none !important;
        margin: 0;
    }

    .scatter-tl, .scatter-tr, .scatter-bl, .scatter-br {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        margin: 14px auto;
        transform: none;
    }
    .module[data-bounce].scatter-tl.in,
    .module[data-bounce].scatter-tr.in,
    .module[data-bounce].scatter-bl.in,
    .module[data-bounce].scatter-br.in { transform: translateY(0); }

    .zone-disruption .zone-title.scatter-title {
        position: relative;
        top: auto; left: auto;
        transform: none;
        text-align: left;
        margin-bottom: 4vh;
    }

    .emergence-tl, .emergence-tr {
        position: relative;
        top: auto; right: auto; left: auto;
        margin: 18px auto;
        transform: none;
    }

    .spiral-container {
        position: relative;
        top: auto;
        margin: 4vh auto;
        transform: none;
        left: auto;
    }

    .cracked-marble { width: 220px; height: 220px; }

    .page-footer {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
}