/* =====================================================================
   martialaw.quest  -- The Conservatory Tribunal
   Style sheet: split-screen marble + duotone botanical glitch
   ===================================================================== */

:root {
    /* Palette (DESIGN.md hex values) */
    --primary-dark: #1B3A2A;        /* deep judicial green */
    --primary-light: #F0EDE8;       /* warm marble white */
    --secondary-dark: #2A4A38;      /* forest tribunal green */
    --secondary-light: #E0D8CE;     /* weathered limestone */
    --accent-botanical: #7A8B4A;    /* oxidized bronze-green */
    --accent-warm: #B8976A;         /* tarnished gold */
    --glitch-cyan: #00D4AA;         /* interference cyan */
    --glitch-magenta: #D400AA;      /* interference magenta */
    --marble-vein: #8A8578;         /* warm gray olive */
    --bronze-line: #6B7B3A;         /* split-line bronze */

    /* Typography */
    --font-display: "Playfair Display", "Lora", Georgia, serif;
    --font-text: "Cormorant Garamond", "Lora", Georgia, serif;
    --font-mono: "Space Mono", "Inter", ui-monospace, Menlo, monospace;

    /* Glitch driving variables (animated by JS) */
    --glitch-offset-x: 0px;
    --glitch-slice-y: 30%;
    --glitch-slice-h: 8%;
    --glitch-chroma: 0px;
    --glitch-intensity: 0;          /* 0..1 */
    --split-bend: 0px;              /* horizontal cursor follow on split line */

    /* Split ratio per chamber (set inline via data-ratio + JS) */
    --split-ratio: 1fr 1fr;
}

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

html, body {
    width: 100%;
    height: 100%;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-family: var(--font-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    overflow-x: hidden;
    cursor: default;
    /* Marble base texture: layered subtle gradients with veining */
    background:
        radial-gradient(1200px 800px at 20% 30%, rgba(138, 133, 120, 0.07), transparent 60%),
        radial-gradient(900px 700px at 80% 70%, rgba(184, 151, 106, 0.06), transparent 60%),
        linear-gradient(17deg, rgba(138, 133, 120, 0.04) 0%, transparent 30%, rgba(138, 133, 120, 0.03) 60%, transparent 100%),
        linear-gradient(143deg, transparent 0%, rgba(122, 139, 74, 0.03) 50%, transparent 100%),
        linear-gradient(278deg, rgba(184, 151, 106, 0.04) 0%, transparent 40%, rgba(138, 133, 120, 0.03) 100%),
        var(--primary-light);
}

.svg-defs { position: absolute; width: 0; height: 0; }

/* Hide scrollbar visual but keep snap behavior */
.tribunal {
    scroll-snap-type: y mandatory;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
.tribunal::-webkit-scrollbar { width: 0; height: 0; }
.tribunal { scrollbar-width: none; }

/* =====================================================================
   Progress rail (Roman numerals, far left edge)
   ===================================================================== */
.progress-rail {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 64px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.progress-rail ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 22px 0;
    border-left: 1px solid rgba(122, 139, 74, 0.4);
    margin-left: 28px;
    padding-left: 14px;
    pointer-events: auto;
}

.rail-item {
    font-family: var(--font-text);
    font-style: italic;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.15em;
    color: var(--marble-vein);
    cursor: pointer;
    position: relative;
    transition: color 600ms ease, transform 600ms ease, letter-spacing 600ms ease;
    user-select: none;
}

.rail-item::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 50%;
    width: 8px;
    height: 1px;
    background: var(--accent-botanical);
    opacity: 0.4;
    transition: width 500ms ease, background 500ms ease, opacity 500ms ease;
}

.rail-item.is-active {
    color: var(--primary-dark);
    transform: translateX(2px);
}
.rail-item.is-active::before {
    width: 22px;
    opacity: 1;
    background: var(--accent-warm);
}

.rail-item span { display: inline-block; padding-left: 4px; }

/* =====================================================================
   Glitch overlay (full-screen, ambient + scroll-driven)
   ===================================================================== */
.glitch-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 70;
    mix-blend-mode: screen;
}

.scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 1px,
        rgba(0, 0, 0, 0.03) 1px,
        rgba(0, 0, 0, 0.03) 2px
    );
    opacity: 0.6;
    mix-blend-mode: multiply;
}

.chroma-flash {
    position: absolute;
    inset: 0;
    box-shadow:
        inset calc(var(--glitch-chroma) * 1) 0 0 rgba(0, 212, 170, calc(var(--glitch-intensity) * 0.18)),
        inset calc(var(--glitch-chroma) * -1) 0 0 rgba(212, 0, 170, calc(var(--glitch-intensity) * 0.18));
    transition: box-shadow 90ms linear;
}

.glitch-slice {
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--glitch-slice-h);
    top: var(--glitch-slice-y);
    transform: translateX(var(--glitch-offset-x));
    background:
        linear-gradient(to right, rgba(0,212,170,0.07), rgba(212,0,170,0.06)),
        repeating-linear-gradient(to bottom, rgba(255,255,255,0.0) 0 1px, rgba(0,0,0,0.04) 1px 2px);
    opacity: 0;
    transition: opacity 90ms linear, transform 80ms linear;
    mix-blend-mode: difference;
}
.glitch-slice.is-firing { opacity: calc(0.55 + var(--glitch-intensity) * 0.45); }

.slice-a { --offset: 1; }
.slice-b { --offset: 2; }
.slice-c { --offset: 3; }

/* =====================================================================
   Tribunal -- chambers
   ===================================================================== */
.tribunal {
    position: relative;
}

.chamber {
    position: relative;
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-columns: var(--split-ratio);
    overflow: hidden;
    scroll-snap-align: start;
    transition: grid-template-columns 800ms cubic-bezier(0.65, 0.05, 0.36, 1);
}

/* Initial ratios (overridden by JS via inline custom property) */
.chamber--atrium    { --split-ratio: 30fr 70fr; }
.chamber--one       { --split-ratio: 50fr 50fr; }
.chamber--two       { --split-ratio: 60fr 40fr; }
.chamber--three     { --split-ratio: 40fr 60fr; }
.chamber--verdict   { --split-ratio: 1fr; grid-template-columns: 1fr; }

/* ---------- Panels ---------- */
.panel {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.panel--lex {
    background:
        radial-gradient(800px 600px at 20% 25%, rgba(138, 133, 120, 0.08), transparent 60%),
        radial-gradient(900px 700px at 80% 80%, rgba(184, 151, 106, 0.05), transparent 65%),
        linear-gradient(17deg, rgba(138, 133, 120, 0.04) 0%, transparent 40%, rgba(138, 133, 120, 0.03) 80%),
        linear-gradient(143deg, transparent 0%, rgba(122, 139, 74, 0.025) 60%, transparent 100%),
        linear-gradient(278deg, rgba(184, 151, 106, 0.05) 0%, transparent 50%),
        var(--primary-light);
    color: var(--primary-dark);
    padding: clamp(40px, 6vw, 96px) clamp(40px, 6vw, 110px);
    display: flex;
    align-items: center;
    z-index: 2;
}

.panel--flora {
    background:
        radial-gradient(900px 700px at 70% 30%, rgba(43, 74, 56, 0.95), rgba(27, 58, 42, 1) 70%),
        var(--primary-dark);
    color: var(--primary-light);
    padding: clamp(40px, 5vw, 90px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    overflow: hidden;
}

/* Marble grain overlay on lex panels */
.panel--lex::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            173deg,
            transparent 0 24px,
            rgba(138, 133, 120, 0.025) 24px 25px,
            transparent 25px 60px,
            rgba(138, 133, 120, 0.018) 60px 61px
        ),
        repeating-linear-gradient(
            87deg,
            transparent 0 80px,
            rgba(184, 151, 106, 0.02) 80px 81px
        );
    opacity: 0.85;
}

/* Conservatory texture on flora panels */
.panel--flora::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0 2px,
            rgba(0, 0, 0, 0.18) 2px 3px
        ),
        radial-gradient(700px 500px at 30% 70%, rgba(122, 139, 74, 0.18), transparent 70%),
        radial-gradient(500px 400px at 80% 20%, rgba(0, 212, 170, 0.05), transparent 70%);
    mix-blend-mode: multiply;
}

.panel--flora::after {
    /* extra noise / scanline shimmer */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            to right,
            transparent 0 60px,
            rgba(0, 212, 170, 0.025) 60px 61px,
            transparent 61px 130px
        );
    opacity: calc(0.4 + var(--glitch-intensity) * 0.6);
    transition: opacity 200ms linear;
}

/* ---------- Lex inner column ---------- */
.lex-inner {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.meta-line {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent-botanical);
    margin-bottom: 36px;
}

.meta-line .mono { color: var(--marble-vein); }

/* ---------- Atrium proclamation ---------- */
.proclamation {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(64px, 11vw, 140px);
    line-height: 0.92;
    letter-spacing: -0.03em;
    color: var(--primary-dark);
    margin-bottom: 36px;
}

.proclamation .word {
    display: block;
    position: relative;
}

.proclamation .word--accent {
    color: var(--accent-botanical);
    font-style: italic;
    font-weight: 700;
    transform: translateX(0.05em);
}

.proclamation .word--accent::after {
    content: "";
    display: block;
    width: 38%;
    height: 2px;
    background: var(--accent-warm);
    margin-top: 6px;
    opacity: 0.75;
}

.sub-decree {
    font-family: var(--font-text);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(16px, 1.2vw, 20px);
    line-height: 1.55;
    color: var(--secondary-dark);
    margin-bottom: 30px;
    letter-spacing: 0.01em;
}

.caption-line {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--accent-botanical);
    margin-top: 24px;
}

/* ---------- Chamber heads (II..IV) ---------- */
.chamber-head { margin-bottom: 28px; }

.numeral-tag {
    font-family: var(--font-text);
    font-style: italic;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--accent-botanical);
    margin-bottom: 18px;
}

.numeral-tag.light { color: var(--glitch-cyan); }

.chamber-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(40px, 5.6vw, 78px);
    line-height: 0.96;
    letter-spacing: -0.025em;
    color: var(--primary-dark);
}

/* ---------- Acanthus divider ---------- */
.acanthus-divider {
    width: 200px;
    height: 40px;
    margin: 26px 0 30px 0;
    color: var(--accent-botanical);
}
.acanthus-divider svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    opacity: 0.85;
    filter: drop-shadow(1px 0 0 rgba(0, 212, 170, calc(var(--glitch-intensity) * 0.6)))
            drop-shadow(-1px 0 0 rgba(212, 0, 170, calc(var(--glitch-intensity) * 0.6)));
}

/* ---------- Legal text ---------- */
.legal-text {
    font-family: var(--font-text);
    font-weight: 400;
    font-size: clamp(16px, 1.15vw, 19px);
    line-height: 1.65;
    color: var(--primary-dark);
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.legal-text p {
    margin: 0;
    text-indent: 1em;
}
.legal-text p.has-dropcap { text-indent: 0; }
.legal-text p + p { margin-top: 0; }

.dropcap {
    float: left;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 4.6em;
    line-height: 0.85;
    color: var(--accent-warm);
    margin: 0.05em 0.12em -0.1em 0;
    background: linear-gradient(140deg, var(--accent-warm) 0%, var(--marble-vein) 50%, var(--accent-warm) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0 0 transparent;
}

/* ---------- Rule lines (legal-document horizontal rules) ---------- */
.rule-line {
    width: 100%;
    height: 1px;
    background: var(--accent-warm);
    opacity: 0.55;
    margin: 36px 0 18px 0;
    position: relative;
}
.rule-line.rule-light {
    background: var(--glitch-cyan);
    opacity: 0.5;
}
.rule-line.rule-glitch::after {
    content: "";
    position: absolute;
    top: -2px;
    left: 33%;
    width: 33%;
    height: 4px;
    background: var(--accent-warm);
    transform: translateY(calc(var(--glitch-intensity) * 3px));
    opacity: 0.5;
    transition: transform 80ms linear;
}

/* ---------- Signature line ---------- */
.signature {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--marble-vein);
    margin-top: 6px;
}

/* =====================================================================
   Flora panel content (botanical layered duotone glitch)
   ===================================================================== */
.flora-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.botanical {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: transform 120ms linear, opacity 200ms linear;
}

.botanical svg {
    width: 70%;
    height: 80%;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Three-layer chromatic aberration via stacked SVG copies */
.bot-layer-base svg {
    stroke: var(--accent-botanical);
    opacity: 0.95;
    filter: drop-shadow(0 0 14px rgba(122, 139, 74, 0.18));
}
.bot-layer-cyan svg {
    stroke: var(--glitch-cyan);
    opacity: calc(0.45 + var(--glitch-intensity) * 0.4);
    transform: translate(calc(var(--glitch-chroma, 2px) * -1.2), 0);
    mix-blend-mode: screen;
}
.bot-layer-magenta svg {
    stroke: var(--glitch-magenta);
    opacity: calc(0.4 + var(--glitch-intensity) * 0.4);
    transform: translate(calc(var(--glitch-chroma, 2px) * 1.2), 0);
    mix-blend-mode: screen;
}

.botanical:hover { /* increased glitch on hover handled in JS via class */ }

/* Specific layouts per chamber */
.bot-monstera svg { width: 70%; height: 90%; }
.bot-column svg  { width: 56%; height: 95%; }
.bot-fern svg    { width: 50%; height: 95%; }
.bot-ivy svg     { width: 90%; height: 60%; }

/* Atrium flora -- giant monstera */
.panel--atrium-flora .bot-monstera svg { width: 80%; height: 95%; }

.panel--two-flora .bot-fern { transform: translateX(0); }
.panel--two-flora .bot-fern svg { width: 60%; }

/* Numeral mark (large transparent Roman numeral) */
.numeral-mark {
    position: absolute;
    top: 12%;
    right: 10%;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(80px, 16vw, 220px);
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgba(240, 237, 232, 0.06);
    -webkit-text-stroke: 1px rgba(240, 237, 232, 0.18);
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

.flora-tag {
    position: absolute;
    bottom: 30px;
    left: 30px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--glitch-cyan);
    z-index: 3;
    text-shadow:
        1px 0 0 rgba(212, 0, 170, calc(var(--glitch-intensity) * 0.8)),
        -1px 0 0 rgba(0, 212, 170, calc(var(--glitch-intensity) * 0.8));
}

/* =====================================================================
   Split line (between panels)
   ===================================================================== */
.split-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--bronze-line);
    z-index: 5;
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.3, 1);
    transform: translateX(var(--split-bend));
    box-shadow:
        2px 0 0 rgba(212, 0, 170, calc(var(--glitch-intensity) * 0.6)),
        -2px 0 0 rgba(0, 212, 170, calc(var(--glitch-intensity) * 0.6));
}

.chamber--atrium .split-line   { left: 30%; }
.chamber--one .split-line      { left: 50%; }
.chamber--two .split-line      { left: 60%; }
.chamber--three .split-line    { left: 40%; }

/* fluting flanking the split-line */
.split-line::before,
.split-line::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    pointer-events: none;
}
.split-line::before {
    left: -6px;
    background: linear-gradient(to right,
        transparent,
        rgba(184, 151, 106, 0.18) 50%,
        transparent);
}
.split-line::after {
    right: -6px;
    background: linear-gradient(to left,
        transparent,
        rgba(184, 151, 106, 0.18) 50%,
        transparent);
}

/* ambient vertical displacement: animate via CSS keyframes on the line */
@keyframes splitJitter {
    0%, 100%   { transform: translate(var(--split-bend), 0) skewY(0deg); }
    47%        { transform: translate(var(--split-bend), 0) skewY(0deg); }
    50%        { transform: translate(calc(var(--split-bend) + 3px), -2px) skewY(0.3deg); }
    52%        { transform: translate(var(--split-bend), 0) skewY(0deg); }
    78%        { transform: translate(var(--split-bend), 0) skewY(0deg); }
    80%        { transform: translate(calc(var(--split-bend) - 2px), 1px) skewY(-0.2deg); }
    82%        { transform: translate(var(--split-bend), 0) skewY(0deg); }
}

.split-line { animation: splitJitter 3s steps(1, end) infinite; }

.split-line--bent {
    background: linear-gradient(to bottom,
        var(--bronze-line) 0%,
        var(--bronze-line) 30%,
        var(--accent-botanical) 50%,
        var(--bronze-line) 70%,
        var(--bronze-line) 100%);
}

/* =====================================================================
   Chamber IV ("bleed") -- vines crossing into Lex
   ===================================================================== */
.chamber--three .panel--flora .flora-stage--bleed {
    overflow: visible;
}

.bot-ivy {
    position: absolute;
    left: -20%;
    width: 130%;
    height: 30%;
    pointer-events: none;
}
.bot-ivy--top { top: 10%; }
.bot-ivy--mid { top: 38%; }
.bot-ivy--bot { top: 66%; }

.bot-ivy svg {
    width: 100%;
    height: 100%;
}

.chamber--three .flora-stage {
    overflow: visible;
}

/* let the topmost ivy bleed into lex panel */
.chamber--three .panel--flora {
    overflow: visible;
}
.chamber--three .panel--flora .bot-ivy {
    left: -45%;
    width: 170%;
}

/* Trunk in the back of chamber IV */
.bot-trunk-bg {
    position: absolute;
    inset: auto;
    right: -10%;
    top: 8%;
    width: 70%;
    height: 70%;
    opacity: 0.35;
}
.bot-trunk-bg svg {
    width: 100%;
    height: 100%;
    stroke: var(--accent-botanical);
    opacity: 0.85;
}

/* =====================================================================
   Verdict (V) -- merged
   ===================================================================== */
.chamber--verdict {
    background: var(--primary-dark);
    color: var(--primary-light);
}

.verdict-merge {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.verdict-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.verdict-bg--marble {
    background:
        radial-gradient(900px 700px at 30% 30%, rgba(240, 237, 232, 0.16), transparent 70%),
        radial-gradient(700px 600px at 70% 70%, rgba(184, 151, 106, 0.08), transparent 70%),
        linear-gradient(143deg, rgba(240, 237, 232, 0.06), transparent 60%);
}

.verdict-bg--flora {
    mix-blend-mode: screen;
}

.verdict-trunk {
    position: absolute !important;
    left: 50%;
    top: 50%;
    width: 90vmin !important;
    height: 90vmin !important;
    transform: translate(-50%, -50%);
    opacity: 0.18;
    inset: auto;
}
.verdict-trunk svg { width: 100%; height: 100%; stroke: var(--accent-botanical); }

.verdict-monstera {
    position: absolute !important;
    right: -10%;
    bottom: -8%;
    width: 65% !important;
    height: 90% !important;
    opacity: 0.5;
    inset: auto;
}
.verdict-monstera svg { width: 100%; height: 100%; }

.verdict-content {
    position: relative;
    z-index: 4;
    text-align: center;
    max-width: 1000px;
    padding: 0 40px;
}

.verdict-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(48px, 8vw, 110px);
    line-height: 0.94;
    letter-spacing: -0.03em;
    color: var(--primary-light);
    margin: 24px 0 24px 0;
}

.verdict-title .vline {
    display: block;
    position: relative;
}

.verdict-title .vline--accent {
    color: var(--glitch-cyan);
    font-style: italic;
    text-shadow:
        2px 0 0 rgba(212, 0, 170, calc(0.4 + var(--glitch-intensity) * 0.6)),
        -2px 0 0 rgba(0, 212, 170, calc(0.4 + var(--glitch-intensity) * 0.6));
}

.verdict-sub {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.4em;
    color: var(--accent-warm);
    margin-top: 18px;
}

.verdict-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(closest-side at 50% 50%, transparent 50%, rgba(0,0,0,0.55) 100%),
        repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,0.06) 2px 3px);
}

/* =====================================================================
   Botanical ambient animation
   ===================================================================== */
@keyframes leafSway {
    0%, 100% { transform: rotate(-0.6deg); }
    50%      { transform: rotate(0.9deg); }
}
@keyframes vineGrow {
    0%   { stroke-dashoffset: 1200; }
    100% { stroke-dashoffset: 0; }
}
@keyframes rootPulse {
    0%, 100% { opacity: 0.9; }
    50%      { opacity: 0.65; }
}

.bot-layer-base svg g > path,
.bot-layer-base svg g > line,
.bot-layer-base svg g > circle,
.bot-layer-base svg g > rect {
    stroke-dasharray: 1200;
    animation: vineGrow 28s linear infinite;
}

.bot-monstera.bot-layer-base { animation: leafSway 7s ease-in-out infinite; }
.bot-fern.bot-layer-base     { animation: leafSway 8s ease-in-out infinite; }
.bot-ivy.bot-layer-base      { animation: rootPulse 4.5s ease-in-out infinite; }

/* slightly different speeds for cyan/magenta layers so chromatic ghosts drift */
.bot-monstera.bot-layer-cyan    { animation: leafSway 7.4s ease-in-out infinite; }
.bot-monstera.bot-layer-magenta { animation: leafSway 7.8s ease-in-out infinite reverse; }
.bot-fern.bot-layer-cyan        { animation: leafSway 8.6s ease-in-out infinite reverse; }
.bot-fern.bot-layer-magenta     { animation: leafSway 8.2s ease-in-out infinite; }

/* =====================================================================
   Glitch flash (full-screen 500ms burst on chamber transitions)
   ===================================================================== */
.glitch-burst .glitch-overlay { animation: burstFlash 500ms ease-out; }

@keyframes burstFlash {
    0%   { filter: hue-rotate(0deg); }
    20%  { filter: hue-rotate(35deg) saturate(1.4); }
    50%  { filter: hue-rotate(-25deg) saturate(1.2); }
    100% { filter: hue-rotate(0deg); }
}

.glitch-burst .panel--flora { animation: floraBurst 500ms ease-out; }

@keyframes floraBurst {
    0%   { transform: translateX(0); filter: hue-rotate(0deg); }
    25%  { transform: translateX(-6px); filter: hue-rotate(40deg); }
    55%  { transform: translateX(5px); filter: hue-rotate(-30deg); }
    100% { transform: translateX(0); filter: hue-rotate(0deg); }
}

/* =====================================================================
   Responsive collapse: stack panels under 820px
   ===================================================================== */
@media (max-width: 820px) {
    .chamber {
        grid-template-columns: 1fr !important;
        grid-template-rows: 50vh 50vh;
        height: auto;
    }
    .chamber--atrium    { grid-template-rows: 40vh 60vh; }
    .chamber--one,
    .chamber--two,
    .chamber--three     { grid-template-rows: 55vh 45vh; }

    .panel { height: 100%; }

    .split-line { display: none; }

    .progress-rail { display: none; }

    .lex-inner { max-width: 100%; }
    .panel--lex { padding: 36px 26px; }
    .panel--flora { padding: 30px; }

    .proclamation { font-size: clamp(48px, 12vw, 80px); }
    .chamber-title { font-size: clamp(34px, 8vw, 56px); }
    .verdict-title { font-size: clamp(40px, 10vw, 72px); }
    .legal-text { font-size: 16px; }
    .numeral-mark { font-size: clamp(64px, 22vw, 140px); }
}

/* =====================================================================
   Small touches: chamber visibility-driven entrance
   ===================================================================== */
.chamber:not(.is-visible) .lex-inner > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 700ms ease, transform 700ms ease;
}

.chamber.is-visible .lex-inner > * {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 700ms ease, transform 700ms ease;
}

.chamber.is-visible .lex-inner > *:nth-child(1) { transition-delay: 100ms; }
.chamber.is-visible .lex-inner > *:nth-child(2) { transition-delay: 220ms; }
.chamber.is-visible .lex-inner > *:nth-child(3) { transition-delay: 340ms; }
.chamber.is-visible .lex-inner > *:nth-child(4) { transition-delay: 460ms; }
.chamber.is-visible .lex-inner > *:nth-child(5) { transition-delay: 580ms; }
.chamber.is-visible .lex-inner > *:nth-child(6) { transition-delay: 700ms; }
.chamber.is-visible .lex-inner > *:nth-child(7) { transition-delay: 820ms; }

.chamber:not(.is-visible) .flora-stage > * {
    opacity: 0;
    transition: opacity 900ms ease;
}
.chamber.is-visible .flora-stage > * {
    opacity: 1;
    transition: opacity 900ms ease;
}
.chamber.is-visible .flora-stage .bot-layer-cyan { opacity: calc(0.45 + var(--glitch-intensity) * 0.4); }
.chamber.is-visible .flora-stage .bot-layer-magenta { opacity: calc(0.4 + var(--glitch-intensity) * 0.4); }

/* Hover glitch boost on botanicals */
.flora-stage:hover { --glitch-intensity: 1; }

/* =====================================================================
   Cursor follow split-line bend uses --split-bend on root
   (set by JS via document.documentElement.style)
   ===================================================================== */