/* =========================================================================
   courthouse.app — "haunted law library after midnight"
   Split-screen + glitching divider + particle dust motes + noise texture
   No frameworks; named (Google Fonts) families use local availability plus
   standard fallbacks. Tags have a slight rotation (`transform: rotate(-1.5deg)).
   ========================================================================= */

:root {
    --deep-chamber: #1a0f0a;
    --frost-void: #0d1117;
    --parchment: #f5e6d0;
    --glacier: #e8f0f8;
    --frost-accent: #7eb8d4;
    --glitch-red: #ff3344;
    --glitch-cyan: #33ffee;
    --seal-gold: #c9a84c;
    --frost-glass: rgba(200, 220, 240, 0.07);
    --frost-glass-soft: rgba(200, 220, 240, 0.04);

    --warm-border: rgba(201, 168, 76, 0.35);
    --cool-border: rgba(126, 184, 212, 0.28);

    --font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
    --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Courier New", monospace;
}

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

html, body {
    height: 100%;
    overflow: hidden;
    background: #1a0f0a;
    color: #f5e6d0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: rgba(255, 51, 68, 0.25);
    color: #e8f0f8;
}

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

/* -------------------------------------------------------------------------
   Particle canvas (behind everything)
   ------------------------------------------------------------------------- */
#particle-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.95;
}

/* -------------------------------------------------------------------------
   Noise texture overlay (above particles, below content)
   ------------------------------------------------------------------------- */
.noise-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.06;
    mix-blend-mode: overlay;
    background-color: transparent;
    /* Use inline SVG noise as background */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.8'/></svg>");
    background-size: 300px 300px;
    animation: noise-shift 2.2s steps(6) infinite;
}

@keyframes noise-shift {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-6px, 4px); }
    40%  { transform: translate(4px, -7px); }
    60%  { transform: translate(-3px, -2px); }
    80%  { transform: translate(6px, 5px); }
    100% { transform: translate(0, 0); }
}

/* -------------------------------------------------------------------------
   The living, glitching divider
   ------------------------------------------------------------------------- */
.divider {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100vh;
    z-index: 20;
    pointer-events: none;
    transition: left 180ms ease-out;
}

.divider__ghost {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.divider__ghost--core {
    background: #7eb8d4;
    box-shadow:
        0 0 12px rgba(126, 184, 212, 0.45),
        0 0 28px rgba(126, 184, 212, 0.18);
    opacity: 0.95;
}

.divider__ghost--red,
.divider__ghost--cyan {
    opacity: 0;
    transition: opacity 80ms steps(2);
}

.divider__ghost--red {
    background: #ff3344;
    box-shadow: 0 0 6px rgba(255, 51, 68, 0.7);
}

.divider__ghost--cyan {
    background: #33ffee;
    box-shadow: 0 0 6px rgba(51, 255, 238, 0.7);
}

/* Activated during a glitch event */
.divider.is-glitching {
    animation: divider-jitter 360ms steps(6) 1;
}

.divider.is-glitching .divider__ghost--red {
    opacity: 0.9;
    transform: translateX(-4px);
    animation: ghost-red 360ms steps(6) 1;
}

.divider.is-glitching .divider__ghost--cyan {
    opacity: 0.9;
    transform: translateX(4px);
    animation: ghost-cyan 360ms steps(6) 1;
}

@keyframes divider-jitter {
    0%   { transform: translateX(-50%) translateY(0); }
    20%  { transform: translateX(calc(-50% + 3px)) translateY(-2px); }
    40%  { transform: translateX(calc(-50% - 4px)) translateY(1px); }
    60%  { transform: translateX(calc(-50% + 2px)) translateY(-1px); }
    80%  { transform: translateX(calc(-50% - 2px)) translateY(2px); }
    100% { transform: translateX(-50%) translateY(0); }
}

@keyframes ghost-red {
    0%, 100% { transform: translateX(-4px); }
    25%      { transform: translateX(-7px); }
    50%      { transform: translateX(-2px); }
    75%      { transform: translateX(-6px); }
}

@keyframes ghost-cyan {
    0%, 100% { transform: translateX(4px); }
    25%      { transform: translateX(7px); }
    50%      { transform: translateX(2px); }
    75%      { transform: translateX(6px); }
}

/* The "tear" — a brief widening that reveals noise-texture underneath */
.divider__tear {
    position: absolute;
    left: -16px;
    top: 40%;
    width: 34px;
    height: 0;
    background: transparent;
    overflow: hidden;
    opacity: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 60px 60px;
    mix-blend-mode: screen;
    transition: opacity 120ms steps(2);
}

.divider.is-torn .divider__tear {
    opacity: 0.6;
    animation: tear-open 500ms steps(6) 1;
}

@keyframes tear-open {
    0%   { height: 0;    top: 45%; }
    30%  { height: 80px; top: 38%; }
    60%  { height: 140px; top: 32%; }
    100% { height: 0;    top: 45%; }
}

/* When the divider "calms" near the verdict section */
.divider.is-calm .divider__ghost--core {
    box-shadow:
        0 0 18px rgba(245, 230, 208, 0.35),
        0 0 40px rgba(245, 230, 208, 0.12);
    background: rgba(245, 230, 208, 0.75);
}

/* -------------------------------------------------------------------------
   Scanline flash (triggered on section transitions)
   ------------------------------------------------------------------------- */
.scan-flash {
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    opacity: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 51, 68, 0.04) 2px,
        rgba(255, 51, 68, 0.04) 4px
    );
}

.scan-flash.is-flashing {
    animation: scan-flash 220ms steps(4) 1;
}

@keyframes scan-flash {
    0%   { opacity: 0; }
    30%  { opacity: 1; }
    60%  { opacity: 0.4; }
    100% { opacity: 0; }
}

/* -------------------------------------------------------------------------
   The split-screen architecture
   ------------------------------------------------------------------------- */
.docket-body {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100vw;
    height: 100vh;
    z-index: 5;
    /* The divider sits on top at z-index 20 */
}

.split {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y proximity;
    padding: clamp(2rem, 5vw, 4.5rem) clamp(1.6rem, 4vw, 3.6rem);
    scrollbar-width: thin;
}

.split::-webkit-scrollbar {
    width: 6px;
}
.split::-webkit-scrollbar-track { background: transparent; }
.split::-webkit-scrollbar-thumb {
    background: rgba(126, 184, 212, 0.15);
    border-radius: 3px;
}

.split--left {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(201, 168, 76, 0.07), transparent 60%),
        radial-gradient(ellipse at 10% 90%, rgba(255, 51, 68, 0.04), transparent 55%),
        linear-gradient(180deg, #1a0f0a 0%, #140b07 100%);
    color: #f5e6d0;
    border-right: 1px solid rgba(201, 168, 76, 0.08);
}

.split--right {
    background:
        radial-gradient(ellipse at 75% 25%, rgba(126, 184, 212, 0.09), transparent 60%),
        radial-gradient(ellipse at 95% 85%, rgba(51, 255, 238, 0.04), transparent 55%),
        linear-gradient(180deg, #0d1117 0%, #070a10 100%);
    color: #e8f0f8;
    border-left: 1px solid rgba(126, 184, 212, 0.08);
}

/* -------------------------------------------------------------------------
   Seal watermarks
   ------------------------------------------------------------------------- */
.seal {
    position: absolute;
    width: clamp(280px, 42vw, 520px);
    height: clamp(280px, 42vw, 520px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.05;
    animation: seal-spin 120s linear infinite;
}

.seal--left {
    top: 22%;
    left: 6%;
}

.seal--right {
    top: 58%;
    right: 8%;
    animation-direction: reverse;
    animation-duration: 160s;
}

.seal svg {
    width: 100%;
    height: 100%;
}

@keyframes seal-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------
   Panels (sections within each split)
   ------------------------------------------------------------------------- */
.panel {
    position: relative;
    z-index: 2;
    margin-bottom: clamp(3rem, 8vh, 6rem);
    padding: clamp(1.8rem, 3vw, 2.6rem);
    min-height: 70vh;
    scroll-snap-align: start;
    border: 1px solid transparent;
    border-radius: 2px;
    background: var(--frost-glass-soft);
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);

    opacity: 0;
    transform: translateX(0) translateY(24px);
    transition:
        opacity 650ms cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.panel--left {
    border-color: var(--warm-border);
    transform: translateX(-24px) translateY(0);
    background:
        linear-gradient(180deg, rgba(245, 230, 208, 0.03), rgba(245, 230, 208, 0.01)),
        var(--frost-glass-soft);
}

.panel--right {
    border-color: var(--cool-border);
    transform: translateX(24px) translateY(0);
    background:
        linear-gradient(180deg, rgba(200, 220, 240, 0.04), rgba(200, 220, 240, 0.015)),
        var(--frost-glass-soft);
}

.panel.is-visible {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

.panel--hero {
    min-height: 92vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
}

.panel-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.8rem);
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: #f5e6d0;
    margin-bottom: 1rem;
    position: relative;
}

.panel-heading--cool {
    color: #e8f0f8;
}

.panel-lede {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    line-height: 1.55;
    color: #f5e6d0;
    max-width: 42ch;
    margin-bottom: 1rem;
}

.panel-lede--cool {
    color: #e8f0f8;
}

.panel-body {
    font-size: clamp(1rem, 1.1vw, 1.15rem);
    line-height: 1.75;
    color: #f5e6d0;
    margin-bottom: 1.1rem;
    max-width: 52ch;
}

.panel-body--cool {
    color: #e8f0f8;
}

.panel-body em {
    color: #c9a84c;
    font-style: italic;
}

.panel-body--cool em {
    color: #7eb8d4;
}

.panel-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.6;
    padding: 1.2rem 1.4rem;
    border-left: 2px solid #c9a84c;
    background: rgba(201, 168, 76, 0.04);
    color: #f5e6d0;
    margin: 1.4rem 0;
    position: relative;
}

.panel-quote--cool {
    border-left-color: #7eb8d4;
    background: rgba(126, 184, 212, 0.05);
    color: #e8f0f8;
}

.panel-meta {
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 1.1vw, 0.82rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(245, 230, 208, 0.55);
    margin-top: 1.4rem;
}

.panel-meta--cool {
    color: rgba(126, 184, 212, 0.7);
}

.tick {
    color: #c9a84c;
    font-size: 0.7em;
    margin-right: 0.2em;
}

.panel-meta--cool .tick {
    color: #7eb8d4;
}

.footnote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    line-height: 1.55;
    padding-top: 1rem;
    margin-top: 1.4rem;
    border-top: 1px dashed rgba(201, 168, 76, 0.2);
    color: rgba(245, 230, 208, 0.7);
    position: relative;
    padding-left: 2rem;
}

.footnote--cool {
    border-top-color: rgba(126, 184, 212, 0.2);
    color: rgba(232, 240, 248, 0.75);
}

.footnote__num {
    position: absolute;
    left: 0;
    top: 1rem;
    font-family: var(--font-mono);
    font-size: 0.8em;
    color: #c9a84c;
    letter-spacing: 0.1em;
}

.footnote--cool .footnote__num {
    color: #7eb8d4;
}

/* -------------------------------------------------------------------------
   Hero — domain name (left) + constellation (right)
   ------------------------------------------------------------------------- */
.hero-title-wrap {
    position: relative;
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    line-height: 0.95;
    letter-spacing: 0.04em;
    color: #f5e6d0;
    position: relative;
    display: inline-block;
    text-shadow:
        0 0 1px rgba(245, 230, 208, 0.4),
        0 0 18px rgba(201, 168, 76, 0.08);
}

.hero-sub {
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(126, 184, 212, 0.7);
    margin-top: 0.8rem;
}

.counter-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4.4rem);
    letter-spacing: 0.06em;
    color: #e8f0f8;
    text-shadow: 0 0 18px rgba(126, 184, 212, 0.2);
    margin-top: 1.6rem;
}

/* Scales of justice constellation */
.scales {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 1.4rem auto;
    opacity: 0.85;
    position: relative;
    animation: scales-drift 6s ease-in-out infinite alternate;
}

.scales svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.scales__beam,
.scales__post,
.scales__stem,
.scales__base {
    stroke: #7eb8d4;
    stroke-width: 1.4;
    fill: none;
    stroke-linecap: round;
    opacity: 0.55;
}

.scales__pan line,
.scales__pan path {
    stroke: #7eb8d4;
    stroke-width: 1.2;
    fill: none;
    stroke-linecap: round;
    opacity: 0.65;
}

.scales__pan--left {
    transform-origin: 70px 110px;
    animation: pan-tilt-left 7s ease-in-out infinite alternate;
}

.scales__pan--right {
    transform-origin: 330px 110px;
    animation: pan-tilt-right 7s ease-in-out infinite alternate;
}

.scales__stars circle {
    fill: #e8f0f8;
    filter: drop-shadow(0 0 6px rgba(232, 240, 248, 0.8));
    animation: star-twinkle 3.2s ease-in-out infinite alternate;
}

.scales__stars circle:nth-child(2n) { animation-duration: 2.4s; animation-delay: 0.6s; }
.scales__stars circle:nth-child(3n) { animation-duration: 4.1s; animation-delay: 1.1s; }

@keyframes scales-drift {
    from { transform: translateY(-3px); }
    to   { transform: translateY(3px); }
}

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

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

@keyframes star-twinkle {
    0%   { opacity: 0.35; transform: scale(0.8); }
    100% { opacity: 1;    transform: scale(1.2); }
}

.scales.is-glitching .scales__stars circle {
    animation: star-scatter 420ms steps(6) 1;
}

@keyframes star-scatter {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(6px, -4px); }
    50%  { transform: translate(-8px, 5px); }
    75%  { transform: translate(3px, 2px); }
    100% { transform: translate(0, 0); }
}

/* -------------------------------------------------------------------------
   Exhibit tags (evidence labels)
   ------------------------------------------------------------------------- */
.exhibit-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: clamp(0.68rem, 1vw, 0.78rem);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.35rem 0.75rem 0.55rem 0.75rem;
    border: 1px solid #c9a84c;
    color: #c9a84c;
    background: rgba(201, 168, 76, 0.04);
    transform: rotate(-1.5deg);
    margin-bottom: 1.4rem;
    position: relative;
    /* Torn edge on bottom */
    clip-path: polygon(
        0 0, 100% 0, 100% 88%,
        96% 100%, 90% 92%, 82% 100%,
        74% 90%, 66% 100%, 58% 92%,
        50% 100%, 42% 91%, 34% 100%,
        26% 92%, 18% 100%, 10% 91%,
        4% 100%, 0 90%
    );
}

.exhibit-tag--warm {
    border-color: #c9a84c;
    color: #c9a84c;
}

.exhibit-tag--cool {
    border-color: #7eb8d4;
    color: #7eb8d4;
    background: rgba(126, 184, 212, 0.05);
}

.exhibit-tag--gold {
    border-color: #c9a84c;
    color: #c9a84c;
    background: rgba(201, 168, 76, 0.06);
    transform: rotate(-0.8deg);
}

/* -------------------------------------------------------------------------
   The Evidence Wall (full width, breaks split)
   ------------------------------------------------------------------------- */
.evidence-wall {
    position: absolute;
    top: 100vh;
    left: 0;
    width: 100%;
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(201, 168, 76, 0.05), transparent 60%),
        radial-gradient(ellipse at 20% 80%, rgba(255, 51, 68, 0.04), transparent 60%),
        radial-gradient(ellipse at 80% 80%, rgba(51, 255, 238, 0.04), transparent 60%),
        linear-gradient(180deg, #130a06 0%, #0a0608 50%, #070a10 100%);
    padding: clamp(4rem, 10vh, 8rem) clamp(1.6rem, 5vw, 5rem);
    overflow: hidden;
    z-index: 5;
    /* Hidden from initial viewport — revealed when both columns scroll past */
    display: none;
}

.evidence-wall::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 300px 300px;
    opacity: 0.08;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.evidence-wall__inner {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.evidence-wall__tag {
    margin-bottom: 1.8rem;
}

.evidence-wall__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: 0.06em;
    color: #f5e6d0;
    margin-bottom: 1rem;
    line-height: 1.1;
    text-shadow: 0 0 20px rgba(201, 168, 76, 0.15);
}

.evidence-wall__sub {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    line-height: 1.55;
    max-width: 55ch;
    color: rgba(232, 240, 248, 0.8);
    margin-bottom: 3.5rem;
}

.exhibits {
    position: relative;
    min-height: clamp(760px, 92vh, 980px);
}

.exhibit {
    position: absolute;
    width: min(34vw, 420px);
    min-width: 260px;
    padding: 1.8rem 1.6rem 1.6rem 1.6rem;
    background: rgba(20, 14, 10, 0.55);
    border: 1px solid rgba(201, 168, 76, 0.2);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    color: #f5e6d0;
    /* Torn edges via clip-path */
    clip-path: polygon(
        0 2%, 4% 0, 12% 1%, 22% 0, 34% 2%, 46% 0, 58% 1%, 70% 0, 82% 2%, 92% 0, 100% 1%,
        100% 98%, 96% 100%, 88% 99%, 78% 100%, 68% 98%, 58% 100%, 48% 99%, 38% 100%, 28% 98%, 16% 100%, 8% 99%, 0 100%
    );
    animation: exhibit-drift 12s ease-in-out infinite alternate;
    overflow: hidden;
}

.exhibit[data-drift="1"] { left: 1%; top: 3%; }
.exhibit[data-drift="2"] { left: 36%; top: 0; }
.exhibit[data-drift="3"] { right: 1%; top: 12%; }
.exhibit[data-drift="4"] { left: 10%; top: 46%; }
.exhibit[data-drift="5"] { left: 43%; top: 39%; }
.exhibit[data-drift="6"] { right: 4%; top: 58%; }

.exhibit[data-drift="1"] { animation-delay: -0s;   animation-duration: 14s; }
.exhibit[data-drift="2"] { animation-delay: -2.5s; animation-duration: 11s; }
.exhibit[data-drift="3"] { animation-delay: -4.5s; animation-duration: 15s; }
.exhibit[data-drift="4"] { animation-delay: -7s;   animation-duration: 13s; }
.exhibit[data-drift="5"] { animation-delay: -9s;   animation-duration: 12s; }
.exhibit[data-drift="6"] { animation-delay: -11s;  animation-duration: 16s; }

@keyframes exhibit-drift {
    0%   { transform: translateY(-8px) rotate(-0.4deg); }
    50%  { transform: translateY(6px)  rotate(0.3deg); }
    100% { transform: translateY(-4px) rotate(-0.2deg); }
}

.exhibit__label {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    color: #c9a84c;
    border: 1px solid rgba(201, 168, 76, 0.4);
    padding: 0.25rem 0.55rem;
    background: rgba(201, 168, 76, 0.05);
    margin-bottom: 1rem;
    transform: rotate(-1deg);
}

.exhibit__static {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 140px 140px;
    opacity: 0.08;
    mix-blend-mode: overlay;
    pointer-events: none;
    animation: static-flicker 1.6s steps(5) infinite;
}

@keyframes static-flicker {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-4px, 3px); }
    40%  { transform: translate(3px, -5px); }
    60%  { transform: translate(-2px, -1px); }
    80%  { transform: translate(5px, 4px); }
    100% { transform: translate(0, 0); }
}

.exhibit__text {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(0.95rem, 1.3vw, 1.08rem);
    line-height: 1.55;
    color: #f5e6d0;
    position: relative;
    z-index: 2;
    quotes: none;
}

.exhibit__cite {
    display: block;
    margin-top: 1rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: rgba(126, 184, 212, 0.7);
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

.exhibit:hover {
    transform: translateY(-4px) rotate(0.2deg);
    border-color: rgba(126, 184, 212, 0.45);
    transition: border-color 200ms, transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.exhibit:hover .exhibit__text {
    text-shadow:
        -1.5px 0 0 rgba(255, 51, 68, 0.6),
        1.5px 0 0 rgba(51, 255, 238, 0.6);
}

/* -------------------------------------------------------------------------
   The Verdict (closing, split returns, divider calms)
   ------------------------------------------------------------------------- */
.verdict {
    position: absolute;
    top: 200vh;
    left: 0;
    width: 100%;
    min-height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(90deg,
            rgba(26, 15, 10, 0.96) 0%,
            rgba(13, 17, 23, 0.96) 100%),
        radial-gradient(ellipse at 50% 50%, rgba(245, 230, 208, 0.08), transparent 55%);
    padding: clamp(3rem, 6vh, 5rem) clamp(1.4rem, 4vw, 4rem);
    overflow: hidden;
    z-index: 5;
}

.verdict::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: rgba(245, 230, 208, 0.15);
    box-shadow: 0 0 20px rgba(245, 230, 208, 0.15);
}

.verdict__halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70vw;
    height: 70vw;
    max-width: 800px;
    max-height: 800px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        rgba(232, 240, 248, 0.08) 0%,
        rgba(201, 168, 76, 0.04) 30%,
        transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    animation: halo-pulse 7s ease-in-out infinite alternate;
}

@keyframes halo-pulse {
    0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

.verdict__inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
}

.verdict__tag {
    margin-bottom: 2rem;
}

.verdict__preamble {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    color: rgba(232, 240, 248, 0.7);
    margin-bottom: 1.8rem;
    letter-spacing: 0.02em;
}

.verdict__statement {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 5.5vw, 4.8rem);
    line-height: 1.1;
    letter-spacing: 0.04em;
    color: rgba(245, 246, 250, 0.92);
    text-shadow:
        0 0 1px rgba(245, 246, 250, 0.5),
        0 0 22px rgba(232, 240, 248, 0.18),
        0 0 42px rgba(201, 168, 76, 0.1);
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    margin-bottom: 2rem;
    filter: blur(0.3px);
}

.verdict__statement span {
    display: block;
}

.verdict__statement span:nth-child(2) {
    color: #c9a84c;
    font-style: italic;
    font-weight: 400;
    font-size: 0.8em;
    letter-spacing: 0.08em;
}

.verdict__coda {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    color: rgba(232, 240, 248, 0.6);
    max-width: 55ch;
    margin: 0 auto;
    line-height: 1.6;
}

/* -------------------------------------------------------------------------
   Colophon
   ------------------------------------------------------------------------- */
.colophon {
    position: absolute;
    top: 300vh;
    left: 0;
    width: 100%;
    padding: 2rem 1.5rem;
    background: #080505;
    text-align: center;
    border-top: 1px solid rgba(201, 168, 76, 0.12);
    display: none;
    z-index: 5;
}

.colophon__row {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(126, 184, 212, 0.55);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
}

/* -------------------------------------------------------------------------
   Glitch text effect (chromatic aberration on hover / data-glitch-text)
   ------------------------------------------------------------------------- */
[data-glitch-text] {
    position: relative;
    cursor: default;
    transition: text-shadow 120ms steps(2);
}

[data-glitch-text]:hover,
[data-glitch-text].is-glitching {
    text-shadow:
        -2px 0 0 #ff3344,
        2px 0 0 #33ffee,
        0 0 18px rgba(126, 184, 212, 0.25);
    animation: glitch-wobble 300ms steps(5) 1;
}

@keyframes glitch-wobble {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-2px, 1px); }
    40%  { transform: translate(2px, -2px); }
    60%  { transform: translate(-1px, 1px); }
    80%  { transform: translate(1px, 0); }
    100% { transform: translate(0, 0); }
}

.panel:hover .panel-heading,
.panel:hover .hero-title,
.panel:hover .counter-title {
    text-shadow:
        -1.5px 0 0 rgba(255, 51, 68, 0.55),
        1.5px 0 0 rgba(51, 255, 238, 0.55),
        0 0 16px rgba(126, 184, 212, 0.2);
    transition: text-shadow 160ms steps(2);
}

/* -------------------------------------------------------------------------
   Scrollable body mode (activates when user has scrolled past hero panels)
   We use a trick: the docket-body is 100vh fixed, Evidence Wall and Verdict
   are placed after it at absolute positions. We switch between "split mode"
   and "scroll mode" when the right column OR left column completes scrolling.
   ------------------------------------------------------------------------- */

body.is-scroll-mode {
    overflow-y: auto;
}

body.is-scroll-mode .docket-body {
    position: relative;
    height: auto;
    min-height: 100vh;
}

body.is-scroll-mode .split {
    overflow: visible;
    height: auto;
}

body.is-scroll-mode .evidence-wall,
body.is-scroll-mode .verdict,
body.is-scroll-mode .colophon {
    display: flex;
    position: relative;
    top: auto;
}

body.is-scroll-mode .evidence-wall {
    display: block;
}

body.is-scroll-mode .colophon {
    display: block;
}

body.is-scroll-mode .divider {
    height: 100vh;
    position: fixed;
    top: 0;
}

/* -------------------------------------------------------------------------
   Responsive — collapse to single column below 768px
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    html, body {
        overflow-y: auto;
        overflow-x: hidden;
        height: auto;
    }

    .docket-body {
        display: block;
        height: auto;
        width: 100%;
    }

    .split {
        overflow: visible;
        height: auto;
        padding: 2rem 1.2rem;
        border-right: none;
        border-left: none;
    }

    .split--left {
        border-bottom: 1px solid rgba(201, 168, 76, 0.15);
    }

    /* Divider becomes horizontal glitch line between sections */
    .divider {
        display: none;
    }

    .panel {
        min-height: auto;
        margin-bottom: 2.5rem;
        padding: 1.4rem;
    }

    .panel--hero {
        min-height: 60vh;
    }

    .evidence-wall,
    .verdict,
    .colophon {
        display: block !important;
        position: relative !important;
        top: auto !important;
    }

    .verdict {
        display: flex !important;
    }

    .seal {
        width: 300px;
        height: 300px;
        opacity: 0.04;
    }

    .exhibits {
        min-height: auto;
    }

    .exhibit {
        position: relative;
        width: 100%;
        min-width: 0;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        margin-bottom: 1.4rem;
    }

    .hero-title {
        font-size: clamp(2.2rem, 12vw, 3.8rem);
    }
}

/* Reduced motion (kept minimal — not ARIA, just courtesy) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}