/* ============================================================
   logical.day — Bauhaus isometric proof landscape
   Palette: #1e1e2a #2c2c34 #4a6fa5 #e8e2d6 #f5f0e8 #c4956a #d4a853 #7ec8c8
   Type:    Space Grotesk / IBM Plex Sans / JetBrains Mono
   ============================================================ */

:root {
    --canvas-light: #f5f0e8;
    --canvas-dark: #1e1e2a;
    --midnight: #2a2a3e;
    --axiom-blue: #4a6fa5;
    --teal-truth: #7ec8c8;
    --golden: #d4a853;
    --warm-stone: #c4956a;
    --charcoal: #2c2c34;
    --cream-text: #e8e2d6;

    --bg: var(--canvas-light);
    --text: var(--charcoal);
    --grid-stroke: var(--axiom-blue);

    --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --font-body: "IBM Plex Sans", "Inter", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
}

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

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    perspective: 1400px;
    transition: background-color 0.8s ease, color 0.8s ease;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    height: 100vh;
}

body.theme-dark {
    --bg: var(--canvas-dark);
    --text: var(--cream-text);
    --grid-stroke: var(--teal-truth);
}

code, .display-title code, .iso-label code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    letter-spacing: 0;
}

/* ----------- Persistent grid substrate ----------- */
.grid-substrate {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.iso-grid-svg {
    position: absolute;
    width: 130%;
    height: 130%;
    left: -15%;
    top: -15%;
}

.grid-fill-light { opacity: 1; transition: opacity 0.8s ease; }
.grid-fill-dark  { opacity: 0; transition: opacity 0.8s ease; }
body.theme-dark .grid-fill-light { opacity: 0; }
body.theme-dark .grid-fill-dark  { opacity: 1; }

/* ----------- Compass navigator ----------- */
.compass {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 0.85rem;
    background: rgba(245, 240, 232, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(74, 111, 165, 0.25);
    border-radius: 4px;
    transform: rotateX(8deg) rotateZ(-2deg);
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.6s ease;
}
body.theme-dark .compass {
    background: rgba(30, 30, 42, 0.55);
    border-color: rgba(126, 200, 200, 0.25);
}
.compass:hover {
    transform: rotateX(13deg) rotateZ(3deg);
}

.compass-dot {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.2rem 0.3rem;
    color: inherit;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.55;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.compass-dot:hover { opacity: 1; transform: translateX(-3px); }
.compass-dot.is-current { opacity: 1; }
.compass-dot.is-current .dot-shape { background: var(--golden); border-color: var(--golden); }

.dot-shape {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border: 1.5px solid rgba(74, 111, 165, 0.6);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
body.theme-dark .dot-shape { border-color: rgba(126, 200, 200, 0.55); }

.dot-shape.circle { border-radius: 50%; }
.dot-shape.cube { transform: rotate(45deg); }
.dot-shape.bridge {
    border-radius: 0;
    height: 4px;
    width: 18px;
    transform: rotate(-18deg);
}
.dot-shape.hex {
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    border: 0;
    background: transparent;
    box-shadow: inset 0 0 0 1.5px rgba(74, 111, 165, 0.6);
}
body.theme-dark .dot-shape.hex { box-shadow: inset 0 0 0 1.5px rgba(126, 200, 200, 0.55); }
.compass-dot.is-current .dot-shape.hex { box-shadow: inset 0 0 0 1.5px var(--golden); background: var(--golden); }

.dot-shape.forest {
    height: 14px;
    width: 14px;
    background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px);
    border: 0;
    color: rgba(74, 111, 165, 0.6);
}
body.theme-dark .dot-shape.forest { color: rgba(126, 200, 200, 0.55); }
.compass-dot.is-current .dot-shape.forest { color: var(--golden); }

.dot-shape.tower {
    width: 12px;
    height: 16px;
    border: 0;
    background:
        linear-gradient(currentColor, currentColor) 0 0 / 100% 4px no-repeat,
        linear-gradient(currentColor, currentColor) 0 6px / 70% 4px no-repeat,
        linear-gradient(currentColor, currentColor) 0 12px / 40% 4px no-repeat;
    color: rgba(74, 111, 165, 0.6);
}
body.theme-dark .dot-shape.tower { color: rgba(126, 200, 200, 0.55); }
.compass-dot.is-current .dot-shape.tower { color: var(--golden); }

.dot-label {
    font-size: 0.62rem;
    opacity: 0.85;
    white-space: nowrap;
}

/* ----------- Stage / panels ----------- */
.proof-stage {
    position: relative;
    z-index: 1;
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.panel {
    position: relative;
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 4rem 5vw;
    overflow: hidden;
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
}

.panel-light { background-color: var(--canvas-light); color: var(--charcoal); }
.panel-dark  { background-color: var(--canvas-dark); color: var(--cream-text); }
.panel-twilight {
    background:
        linear-gradient(180deg, #2a2a3e 0%, #232334 55%, #1e1e2a 100%);
    color: var(--cream-text);
}

.panel-inner {
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
}

.panel-inner.z-pattern {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "head head"
        "stage stage"
        "foot foot";
}
.panel-inner.z-pattern .panel-heading-tl { grid-area: head; }
.panel-inner.z-pattern .iso-stage { grid-area: stage; }
.panel-inner.z-pattern .panel-foot-br { grid-area: foot; justify-self: end; text-align: right; }

.panel-inner-radial { align-items: center; justify-content: center; }
.panel-inner-radial .iso-stage { flex: 1; align-items: center; justify-content: center; }

/* ----------- Headings ----------- */
.panel-heading { max-width: 640px; }
.panel-heading-center { text-align: center; margin-inline: auto; }

.chapter-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--axiom-blue);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid currentColor;
    margin-bottom: 1.2rem;
}
.panel-dark .chapter-tag, .panel-twilight .chapter-tag { color: var(--teal-truth); }

.display-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: 0.01em;
    margin-bottom: 1rem;
}

.panel-blurb {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    max-width: 56ch;
    opacity: 0.88;
}

.panel-foot { font-family: var(--font-mono); font-size: 0.78rem; opacity: 0.75; }
.panel-foot-center { text-align: center; }
.rule-tag em { color: var(--golden); font-style: normal; font-weight: 500; }

/* ----------- Isometric base classes ----------- */
.iso-stage {
    position: relative;
    flex: 1;
    width: 100%;
    transform-style: preserve-3d;
    perspective: 1400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iso-floor {
    position: absolute;
    left: 50%;
    bottom: 12%;
    width: 70vw;
    height: 32vh;
    max-width: 1200px;
    transform: translateX(-50%) rotateX(60deg) rotateZ(-45deg);
    background:
        linear-gradient(45deg, transparent 49%, rgba(74, 111, 165, 0.08) 49%, rgba(74, 111, 165, 0.08) 51%, transparent 51%) 0 0 / 60px 60px,
        linear-gradient(-45deg, transparent 49%, rgba(74, 111, 165, 0.08) 49%, rgba(74, 111, 165, 0.08) 51%, transparent 51%) 0 0 / 60px 60px;
    pointer-events: none;
    opacity: 0.55;
}
.panel-dark .iso-floor, .panel-twilight .iso-floor {
    background:
        linear-gradient(45deg, transparent 49%, rgba(126, 200, 200, 0.10) 49%, rgba(126, 200, 200, 0.10) 51%, transparent 51%) 0 0 / 60px 60px,
        linear-gradient(-45deg, transparent 49%, rgba(126, 200, 200, 0.10) 49%, rgba(126, 200, 200, 0.10) 51%, transparent 51%) 0 0 / 60px 60px;
}

.iso-block {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(60deg) rotateZ(-45deg);
    width: 120px;
    height: 120px;
    filter: drop-shadow(8px 14px 14px rgba(30, 30, 42, 0.18));
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.iso-cube { width: 130px; height: 130px; }
.iso-tall { width: 110px; height: 220px; }
.iso-wide { width: 220px; height: 110px; }

.iso-block .iso-top,
.iso-block .iso-left,
.iso-block .iso-right {
    position: absolute;
    background: var(--block-color, #4a6fa5);
    transition: filter 0.4s ease;
}

.iso-block .iso-top {
    inset: 0;
    filter: brightness(1.12);
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.iso-block .iso-left {
    width: 22px;
    height: 100%;
    left: -22px;
    top: 0;
    transform-origin: right center;
    transform: rotateY(90deg) translateZ(0);
    filter: brightness(0.75);
}
.iso-block .iso-right {
    width: 100%;
    height: 22px;
    left: 0;
    bottom: -22px;
    transform-origin: top center;
    transform: rotateX(-90deg) translateZ(0);
    filter: brightness(0.9);
}

.iso-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--cream-text);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-align: center;
    line-height: 1.45;
    padding: 0.6rem;
    transform: translateZ(1px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    z-index: 2;
    pointer-events: none;
}

/* ----------- Section 1: Axiom Dawn ----------- */
.dawn-light {
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, rgba(212, 168, 83, 0.18) 0%, rgba(212, 168, 83, 0.04) 35%, transparent 65%);
    pointer-events: none;
    z-index: 1;
}
.iso-stage-dawn { position: relative; z-index: 2; }

.axiom-block {
    position: absolute;
}
.axiom-a { left: 18%; top: 30%; }
.axiom-b { right: 18%; bottom: 28%; }
.axiom-c { left: 50%; top: 22%; transform: translateX(-50%) rotateX(60deg) rotateZ(-45deg); }

.axiom-block.is-revealed { animation: axiomPop 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

@keyframes axiomPop {
    0% { opacity: 0; transform: rotateX(60deg) rotateZ(-45deg) translateZ(-80px) scale(0.6); }
    100% { opacity: 1; transform: rotateX(60deg) rotateZ(-45deg) translateZ(0) scale(1); }
}
.axiom-c.is-revealed { animation: axiomPopC 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes axiomPopC {
    0% { opacity: 0; transform: translateX(-50%) rotateX(60deg) rotateZ(-45deg) translateZ(-80px) scale(0.6); }
    100% { opacity: 1; transform: translateX(-50%) rotateX(60deg) rotateZ(-45deg) translateZ(0) scale(1); }
}

.inference-arrows {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.inf-arrow {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.55, 0.1, 0.25, 1);
}
.is-active .inf-arrow,
.panel.is-visible .inf-arrow { stroke-dashoffset: 0; }
.panel.is-visible .inf-arrow:nth-child(1) { transition-delay: 0.4s; }
.panel.is-visible .inf-arrow:nth-child(2) { transition-delay: 0.8s; }
.panel.is-visible .inf-arrow:nth-child(3) { transition-delay: 1.2s; }
.panel.is-visible .inf-arrow:nth-child(4) { transition-delay: 1.6s; }
.panel.is-visible .inf-arrow:nth-child(5) { transition-delay: 2.0s; }

/* ----------- Section 2: Conjunction Plaza ----------- */
.iso-stage-plaza { position: relative; }

.premise {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
}
.premise-tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--axiom-blue);
    margin-top: 1.6rem;
}
.panel-dark .premise-tag { color: var(--teal-truth); }

.premise-a { left: 12%; top: 14%; }
.premise-b { right: 12%; bottom: 14%; }

.conjunction-glyph {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 140px;
    height: 140px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.wedge-line {
    position: absolute;
    height: 3px;
    width: 0;
    background: var(--axiom-blue);
    top: 50%;
    left: 50%;
    transform-origin: left center;
    transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.wedge-left  { transform: translate(-100%, -50%) rotate(-30deg); }
.wedge-right { transform: translate(0, -50%) rotate(-150deg); }
.is-assembling .wedge-line { width: 80px; }

.wedge-symbol {
    font-family: var(--font-display);
    font-size: 5rem;
    color: var(--axiom-blue);
    font-weight: 700;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.6s ease 0.9s, transform 0.6s ease 0.9s;
}
.is-merged .wedge-symbol { opacity: 1; transform: scale(1); }

.merged-block {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
    transition: opacity 0.8s ease 1.2s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.2s;
    pointer-events: none;
}
.is-merged .merged-block { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.is-merged .premise-a { transform: translate(35%, 60%) scale(0.6); opacity: 0.25; }
.is-merged .premise-b { transform: translate(-35%, -60%) scale(0.6); opacity: 0.25; }
.is-merged .wedge-line { opacity: 0; transition: opacity 0.4s ease 1.0s; }

/* ----------- Section 3: Implication Bridge ----------- */
.iso-stage-bridge { position: relative; }

.bridge-construct {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 15%;
    height: 60%;
    transform-style: preserve-3d;
}

.bridge-deck {
    position: absolute;
    left: 0;
    right: 0;
    top: 30%;
    height: 30%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 4%;
    transform: rotateX(15deg);
}

.bridge-block {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.is-visible .bridge-block { opacity: 1; transform: translateY(0); }
.is-visible .bridge-block[data-step="1"] { transition-delay: 0.1s; }
.is-visible .bridge-block[data-step="2"] { transition-delay: 0.3s; }
.is-visible .bridge-block[data-step="3"] { transition-delay: 0.5s; }
.is-visible .bridge-block[data-step="4"] { transition-delay: 0.7s; }
.is-visible .bridge-block[data-step="5"] { transition-delay: 0.9s; }

.bridge-block:nth-child(1) { transform: translateY(80px); }
.bridge-block:nth-child(2) { transform: translateY(40px); }
.bridge-block:nth-child(3) { transform: translateY(0); }
.bridge-block:nth-child(4) { transform: translateY(-40px); }
.bridge-block:nth-child(5) { transform: translateY(-80px); }
.is-visible .bridge-block:nth-child(1) { transform: translateY(80px); }
.is-visible .bridge-block:nth-child(2) { transform: translateY(40px); }
.is-visible .bridge-block:nth-child(3) { transform: translateY(0); }
.is-visible .bridge-block:nth-child(4) { transform: translateY(-40px); }
.is-visible .bridge-block:nth-child(5) { transform: translateY(-80px); }

.bridge-block .iso-block { width: 110px; height: 70px; }

.bridge-label {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--charcoal);
    background: rgba(245, 240, 232, 0.85);
    padding: 0.2rem 0.55rem;
    border-radius: 2px;
    border: 1px solid rgba(74, 111, 165, 0.3);
}

.bridge-supports {
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 6%;
    align-items: flex-end;
}
.support {
    width: 4px;
    height: var(--support-h);
    background: linear-gradient(180deg, var(--warm-stone), rgba(196, 149, 106, 0.2));
    position: relative;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.is-visible .support { opacity: 1; transform: scaleY(1); }
.is-visible .support:nth-child(1) { transition-delay: 0.2s; }
.is-visible .support:nth-child(2) { transition-delay: 0.4s; }
.is-visible .support:nth-child(3) { transition-delay: 0.6s; }
.is-visible .support:nth-child(4) { transition-delay: 0.8s; }
.is-visible .support:nth-child(5) { transition-delay: 1.0s; }

.support-label {
    position: absolute;
    bottom: -1.4rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--axiom-blue);
    white-space: nowrap;
}

.bridge-arrows {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 60%;
    width: 100%;
    pointer-events: none;
}

/* ----------- Section 4: Negation Void ----------- */
.iso-stage-void {
    position: relative;
    flex: 1;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 360px;
    align-items: center;
    gap: 3rem;
}

.void-hex {
    position: relative;
    grid-column: 1;
    width: 100%;
    height: 60vh;
    max-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.void-hex svg {
    width: min(48vh, 380px);
    height: min(48vh, 380px);
    animation: voidBreathe 7s ease-in-out infinite;
}
@keyframes voidBreathe {
    0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 24px rgba(126, 200, 200, 0.25)); }
    50%      { transform: scale(1.04) rotate(2deg); filter: drop-shadow(0 0 36px rgba(126, 200, 200, 0.5)); }
}

.orbit-ring {
    position: absolute;
    grid-column: 1;
    left: 0;
    right: 360px;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    pointer-events: none;
}
.orbit-1 { width: 56vh; height: 56vh; max-width: 460px; max-height: 460px; }
.orbit-2 { width: 70vh; height: 70vh; max-width: 580px; max-height: 580px; }
.orbit-3 { width: 84vh; height: 84vh; max-width: 700px; max-height: 700px; }

.orbit-ring { animation: orbit 30s linear infinite; }
.orbit-2 { animation-duration: 45s; animation-direction: reverse; }
.orbit-3 { animation-duration: 60s; }
@keyframes orbit { to { transform: rotate(360deg); } }

.orbit-prop {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: rotate(var(--angle)) translate(calc(var(--orbit-radius, 50%))) rotate(calc(-1 * var(--angle)));
    padding: 0.5rem 0.85rem;
    border: 1px solid rgba(126, 200, 200, 0.5);
    background: rgba(30, 30, 42, 0.8);
    color: var(--teal-truth);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    pointer-events: auto;
}
.orbit-1 .orbit-prop { --orbit-radius: calc(56vh / 2 - 1rem); }
.orbit-2 .orbit-prop { --orbit-radius: calc(70vh / 2 - 1rem); }
.orbit-3 .orbit-prop { --orbit-radius: calc(84vh / 2 - 1rem); }
.orbit-1 .orbit-prop { --orbit-radius: 220px; }
.orbit-2 .orbit-prop { --orbit-radius: 280px; }
.orbit-3 .orbit-prop { --orbit-radius: 340px; }

.prop-pos { color: var(--teal-truth); border-color: rgba(126, 200, 200, 0.55); }
.prop-neg { color: var(--golden); border-color: rgba(212, 168, 83, 0.55); }

.truth-crystals {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    align-self: stretch;
    justify-content: center;
    padding: 1rem 0;
}
.crystal {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 36px;
}
.crystal-cap {
    flex: 0 0 64px;
    color: var(--cream-text);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-align: right;
    padding-right: 0.4rem;
    border-right: 1px solid rgba(232, 226, 214, 0.18);
}
.band {
    width: 28px;
    height: 100%;
    flex-shrink: 0;
    border: 1px solid rgba(126, 200, 200, 0.3);
}
.band-true  { background: var(--teal-truth); }
.band-false { background: var(--canvas-dark); }

/* ----------- Section 5: Quantifier Forest ----------- */
.iso-stage-forest {
    position: relative;
    width: 100%;
    flex: 1;
    align-items: center;
    justify-content: center;
}

.quantifier-toggle {
    position: absolute;
    top: 1.5rem;
    right: 5vw;
    display: flex;
    gap: 0.5rem;
    z-index: 5;
}
.qt-btn {
    appearance: none;
    border: 1px solid rgba(126, 200, 200, 0.4);
    background: rgba(30, 30, 42, 0.6);
    color: var(--cream-text);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    padding: 0.55rem 1rem;
    cursor: pointer;
    transition: all 0.4s ease;
}
.qt-btn:hover { border-color: var(--golden); }
.qt-btn.is-active { background: var(--golden); color: var(--charcoal); border-color: var(--golden); }

.forest-grid {
    position: relative;
    width: 80vw;
    max-width: 1100px;
    height: 60vh;
    transform: rotateX(58deg) rotateZ(-42deg);
    transform-style: preserve-3d;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 14px;
    margin: 0 auto;
}

.tree {
    position: relative;
    background: var(--axiom-blue);
    border-top: 12px solid #5e84b8;
    box-shadow:
        inset -3px 0 0 rgba(0, 0, 0, 0.18),
        inset 3px 0 0 rgba(255, 255, 255, 0.08),
        0 6px 16px rgba(0, 0, 0, 0.35);
    transition: background 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease, opacity 0.6s ease;
    transform-origin: bottom center;
}
.tree.witness { background: var(--golden); border-top-color: #e6bd6b; }

.forest-grid.mode-forall .tree { transform: scaleY(1); filter: brightness(1); opacity: 0.9; }
.forest-grid.mode-forall .tree.witness { background: var(--axiom-blue); border-top-color: #5e84b8; }

.forest-grid.mode-exists .tree { opacity: 0.25; transform: scaleY(0.7); }
.forest-grid.mode-exists .tree.witness {
    background: var(--golden);
    border-top-color: #e6bd6b;
    transform: scaleY(1.4);
    opacity: 1;
    filter: brightness(1.15) drop-shadow(0 0 24px rgba(212, 168, 83, 0.6));
    z-index: 3;
}

/* ----------- Section 6: QED Twilight ----------- */
.twilight-horizon {
    position: absolute;
    left: 0;
    right: 0;
    top: 56%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(212, 168, 83, 0.4) 25%, rgba(212, 168, 83, 0.6) 50%, rgba(212, 168, 83, 0.4) 75%, transparent 100%);
    box-shadow: 0 0 18px rgba(212, 168, 83, 0.3);
    pointer-events: none;
}

.iso-stage-tower {
    position: relative;
    width: 100%;
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2rem;
}

.proof-tower {
    position: relative;
    height: 60vh;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    transform-style: preserve-3d;
}

.tower-layer {
    opacity: 0;
    transform: translateY(60px) scale(0.85);
    transition: opacity 0.9s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.is-visible .tower-layer { opacity: 1; transform: translateY(0) scale(1); }
.is-visible .tower-l1 { transition-delay: 0.2s; }
.is-visible .tower-l2 { transition-delay: 0.7s; }
.is-visible .tower-l3 { transition-delay: 1.2s; }
.is-visible .tower-l4 { transition-delay: 1.7s; }

.tower-l1 .iso-block { width: 280px; height: 80px; }
.tower-l2 .iso-block { width: 220px; height: 80px; }
.tower-l3 .iso-block { width: 170px; height: 80px; }
.tower-l4 .iso-block { width: 110px; height: 110px; }

.theorem-statement {
    position: relative;
    padding: 2rem 2.5rem;
    border-left: 2px solid rgba(212, 168, 83, 0.5);
    max-width: 460px;
}
.theorem-prefix {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--golden);
    margin-bottom: 1rem;
}
.theorem-text {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.2rem, 2vw, 1.7rem);
    line-height: 1.4;
    margin-bottom: 1.5rem;
}
.theorem-text code { font-size: 1em; color: var(--cream-text); }

.qed-marker {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    color: var(--golden);
    font-size: 0.95rem;
    letter-spacing: 0.15em;
}
.qed-square {
    width: 14px;
    height: 14px;
    background: var(--golden);
    animation: qedPulse 2.4s ease-in-out infinite;
}
@keyframes qedPulse {
    0%, 100% { opacity: 0.6; box-shadow: 0 0 0 0 rgba(212, 168, 83, 0.5); }
    50%      { opacity: 1;   box-shadow: 0 0 0 12px rgba(212, 168, 83, 0); }
}

/* ----------- Visibility utility ----------- */
.panel.is-visible .panel-heading,
.panel.is-visible .panel-foot {
    animation: fadeRise 0.9s ease forwards;
}
.panel-heading, .panel-foot {
    opacity: 0;
    transform: translateY(20px);
}
@keyframes fadeRise {
    to { opacity: 1; transform: translateY(0); }
}

/* ----------- Responsive tightening ----------- */
@media (max-width: 900px) {
    .iso-stage-void { grid-template-columns: 1fr; }
    .truth-crystals { grid-column: 1; flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .crystal { height: 60px; }
    .iso-stage-tower { grid-template-columns: 1fr; }
    .compass { right: 0.8rem; bottom: 0.8rem; padding: 0.6rem; }
    .dot-label { display: none; }
    .axiom-a { left: 8%; top: 20%; }
    .axiom-b { right: 8%; bottom: 18%; }
    .premise-a { left: 6%; top: 8%; }
    .premise-b { right: 6%; bottom: 8%; }
    .forest-grid { width: 92vw; height: 50vh; }
    .tower-l1 .iso-block { width: 220px; }
    .tower-l2 .iso-block { width: 180px; }
    .tower-l3 .iso-block { width: 140px; }
}