/* ============================================
   LegalDebug.com v2 — Brutalist Legal Examination
   Fonts: Archivo Black, IBM Plex Serif, Space Grotesk (Google Fonts)
   Palette: #0a0a0f, #1a1a24, #9b1b30, #3d5a80, #c8c8d0, #f0f0f5, #c4841d, #2a2a35
   Style: Brutalist anti-design, broken-grid, redaction-as-interaction
   ============================================ */

/* --- RESET & BASE --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-dark: #0a0a0f;
    --secondary-dark: #1a1a24;
    --crimson: #9b1b30;
    --steel-blue: #3d5a80;
    --cool-silver: #c8c8d0;
    --chalk-white: #f0f0f5;
    --warning-amber: #c4841d;
    --void-gray: #2a2a35;
    --pure-black: #000000;
    --parchment: #e8e0d0;
    --near-black: #1b1a17;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background: var(--primary-dark);
    color: var(--cool-silver);
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-weight: 400;
    line-height: 1.75;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    overflow-x: hidden;
    cursor: default;
}

::selection {
    background: var(--crimson);
    color: var(--chalk-white);
}

/* --- PROGRESS BAR (case progress indicator) --- */
#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--steel-blue);
    z-index: 9999;
    transition: width 0.1s linear;
}

/* --- OPENING VIEWPORT (100vh hero) --- */
.section-opening {
    position: relative;
    width: 100%;
    height: 100vh;
    background: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 8vw;
    overflow: hidden;
}

.hero-text-block {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    z-index: 2;
}

.hero-line {
    font-family: 'Archivo Black', Impact, sans-serif;
    font-weight: 400;
    font-size: clamp(3rem, 12vw, 10rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--chalk-white);
    line-height: 0.95;
    display: block;
}

.hero-line-bottom {
    color: var(--cool-silver);
}

/* The hero redaction bar — 80px, 70vw, off-center left, slides right over 8s */
.redaction-bar-hero {
    width: 70vw;
    height: 80px;
    background: var(--pure-black);
    position: relative;
    left: -3vw;
    margin: 0.2em 0;
    transform: translateX(0);
    animation: heroReveal 8s cubic-bezier(0.25, 0.1, 0.25, 1) 1.5s forwards;
    z-index: 3;
}

@keyframes heroReveal {
    0% { transform: translateX(0); }
    100% { transform: translateX(110%); }
}

.hero-domain {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: clamp(0.8rem, 1.5vw, 1.1rem);
    letter-spacing: 0.06em;
    color: var(--steel-blue);
    margin-top: 1.5rem;
    text-transform: uppercase;
}

.case-number {
    position: absolute;
    bottom: 3vh;
    right: 5vw;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: clamp(0.65rem, 1vw, 0.85rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--void-gray);
}

/* --- WATERMARKS (Latin legal maxims, 4% opacity, rotated 90deg) --- */
.watermark-left,
.watermark-right {
    position: absolute;
    font-family: 'Archivo Black', Impact, sans-serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 4vw, 3.5rem);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.04;
    color: var(--chalk-white);
    white-space: nowrap;
    pointer-events: none;
    writing-mode: vertical-rl;
    z-index: 0;
}

.watermark-left {
    left: 1.5vw;
    top: 50%;
    transform: translateY(-50%);
}

.watermark-right {
    right: 1.5vw;
    top: 50%;
    transform: translateY(-50%);
}

.section-opening .watermark-left {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* --- EXHIBIT DIVIDERS (evidence panels, crimson bg, 15vh) --- */
.exhibit-divider {
    position: relative;
    width: 100%;
    height: 15vh;
    min-height: 120px;
    background: var(--crimson);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8vw;
    border-top: 1px solid var(--chalk-white);
    overflow: hidden;
    opacity: 0;
    max-height: 0;
    transition: opacity 0.6s ease, max-height 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.exhibit-divider.revealed {
    opacity: 1;
    max-height: 20vh;
}

/* Content within dividers fades in 200ms after container expansion */
.exhibit-divider .exhibit-label,
.exhibit-divider .exhibit-fact {
    opacity: 0;
    transition: opacity 0.4s ease 0.2s;
}

.exhibit-divider.revealed .exhibit-label,
.exhibit-divider.revealed .exhibit-fact {
    opacity: 1;
}

.exhibit-label {
    font-family: 'Archivo Black', Impact, sans-serif;
    font-weight: 400;
    font-size: clamp(1.2rem, 3vw, 2.5rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--chalk-white);
    flex-shrink: 0;
}

.exhibit-fact {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    letter-spacing: 0.02em;
    color: var(--parchment);
    text-align: right;
    max-width: 55%;
    line-height: 1.4;
}

/* --- CONTENT SECTIONS (90vh each, hard chromatic cuts) --- */
.content-section {
    position: relative;
    width: 100%;
    min-height: 90vh;
    padding: 10vh 0;
    overflow: hidden;
}

.section-bug {
    background: var(--secondary-dark);
}

.section-cause {
    background: var(--primary-dark);
}

.section-patch {
    background: var(--secondary-dark);
}

.section-loop {
    background: var(--primary-dark);
}

/* --- SECTION GRID (12-col asymmetric broken-grid, z-pattern) --- */
.section-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2vw;
    padding: 0 4vw;
    position: relative;
    z-index: 2;
    align-items: start;
}

/* Z-pattern: left block for sections 1 & 3, right block for sections 2 & 4 */
.section-bug .content-column.col-left {
    grid-column: 2 / 8;
}

.section-bug .annotation-margin {
    grid-column: 9 / 12;
}

.section-cause .annotation-margin-left {
    grid-column: 1 / 4;
}

.section-cause .content-column.col-right {
    grid-column: 5 / 12;
}

.section-patch .content-column.col-left {
    grid-column: 2 / 8;
}

.section-patch .annotation-margin {
    grid-column: 9 / 12;
}

.section-loop .annotation-margin-left {
    grid-column: 1 / 4;
}

.section-loop .content-column.col-right {
    grid-column: 5 / 12;
}

/* --- SECTION HEADINGS (Archivo Black, extreme sizes) --- */
.section-heading {
    font-family: 'Archivo Black', Impact, sans-serif;
    font-weight: 400;
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--chalk-white);
    line-height: 0.95;
    margin-bottom: 2rem;
}

.heading-accent {
    color: var(--steel-blue);
}

/* --- BODY TEXT (IBM Plex Serif, double-spaced legal brief feel) --- */
.body-text p {
    margin-bottom: 1.5rem;
    max-width: 65ch;
}

/* Light section text color override */
.section-light .body-text p {
    color: var(--secondary-dark);
}

/* --- REDACTION BARS (inline, CSS pseudo-elements) --- */
.redacted {
    position: relative;
    display: inline;
    cursor: pointer;
}

.redacted::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -4px;
    right: -4px;
    bottom: -2px;
    background: var(--pure-black);
    mix-blend-mode: normal;
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
    z-index: 1;
}

/* Hover reveal on desktop, class toggle on mobile */
.redacted:hover::after,
.redacted.unredacted::after {
    transform: translateX(110%);
}

/* Permanent redaction — never reveals */
.redacted.permanent {
    cursor: not-allowed;
}

.redacted.permanent::after {
    cursor: not-allowed;
}

.redacted.permanent:hover::after {
    transform: none;
}

/* --- STRUCK-THROUGH TEXT (crimson line-through, repealed/curtailed) --- */
.struck-text {
    text-decoration: line-through;
    text-decoration-color: var(--crimson);
    text-decoration-thickness: 2px;
}

/* --- FLAGGED TEXT (warning amber, left border) --- */
.flagged-text {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(0.75rem, 1.1vw, 0.9rem);
    letter-spacing: 0.04em;
    color: var(--warning-amber);
    border-left: 3px solid var(--warning-amber);
    padding-left: 1rem;
    margin-top: 2rem;
}

/* --- STAMP OVERLAYS (rubber stamp, diagonal, slam animation) --- */
.stamp-overlay {
    position: absolute;
    font-family: 'Archivo Black', Impact, sans-serif;
    font-weight: 400;
    font-size: clamp(6rem, 18vw, 16rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--crimson);
    opacity: 0;
    transform: scale(1.5) rotate(-12deg);
    pointer-events: none;
    z-index: 1;
    top: 15%;
    left: 5%;
    white-space: nowrap;
    transition: opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1),
                transform 0.3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.stamp-overlay.stamped {
    opacity: 0.12;
    transform: scale(1) rotate(-12deg);
}

/* Stamp impact pulse */
.stamp-overlay.stamp-pulse {
    box-shadow: 0 0 0 4px rgba(155, 27, 48, 0.3);
}

/* --- ANNOTATION MARGINS (debugger's commentary, italic style, askew) --- */
.annotation-margin {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    padding-top: 6rem;
}

.annotation-margin.visible {
    opacity: 1;
    transform: translateX(0);
}

.annotation-margin-left {
    transform: translateX(-30px);
}

.annotation-margin-left.visible {
    transform: translateX(0);
}

/* Annotation block — handwritten-feeling, slightly askew angle, amber left border */
.annotation-block {
    border-left: 3px solid var(--warning-amber);
    padding: 1rem 0 1rem 1.2rem;
    transform: rotate(-1.5deg);
}

.annotation-marker {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(0.65rem, 0.9vw, 0.8rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--warning-amber);
    display: block;
    margin-bottom: 0.5rem;
}

/* Space Grotesk italic style for commentary (handwritten-feeling) */
.annotation-block p {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(0.75rem, 1vw, 0.88rem);
    line-height: 1.6;
    color: var(--cool-silver);
    opacity: 0.85;
}

/* --- TORN EDGE DIVIDER (jagged clip-path, simulates torn paper) --- */
.torn-edge-divider {
    width: 100%;
    height: 60px;
    position: relative;
    background: var(--secondary-dark);
    clip-path: polygon(
        0% 0%, 2% 38%, 4% 12%, 7% 52%, 9% 8%, 11% 45%,
        14% 18%, 17% 58%, 19% 5%, 22% 42%, 25% 22%, 27% 55%,
        30% 10%, 33% 48%, 35% 15%, 38% 60%, 41% 8%, 43% 50%,
        46% 20%, 49% 55%, 51% 12%, 54% 48%, 57% 18%, 59% 52%,
        62% 6%, 65% 45%, 67% 22%, 70% 58%, 73% 10%, 75% 42%,
        78% 20%, 81% 55%, 83% 8%, 86% 48%, 89% 15%, 91% 52%,
        94% 12%, 97% 45%, 100% 18%,
        100% 100%, 0% 100%
    );
    z-index: 2;
}

/* --- VERDICT (FOOTER — styled as court ruling, centered) --- */
.section-verdict {
    position: relative;
    width: 100%;
    min-height: 90vh;
    background: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10vh 8vw;
    border-top: 1px solid var(--void-gray);
}

.verdict-content {
    text-align: center;
    max-width: 800px;
}

.case-caption {
    margin-bottom: 4rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.caption-line {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--void-gray);
}

.caption-title {
    font-family: 'Archivo Black', Impact, sans-serif;
    font-weight: 400;
    font-size: clamp(1.8rem, 4.5vw, 3.5rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--chalk-white);
    line-height: 1.1;
    margin: 0.5rem 0;
}

.ruling-body {
    margin-bottom: 3rem;
}

.ruling-text {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    line-height: 1.85;
    color: var(--cool-silver);
    margin-bottom: 1.5rem;
    text-align: center;
}

.final-declaration {
    border-top: 2px solid var(--crimson);
    border-bottom: 2px solid var(--crimson);
    padding: 2rem 0;
    margin-bottom: 3rem;
}

.declaration-label {
    font-family: 'Archivo Black', Impact, sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 2vw, 1.5rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--crimson);
    display: block;
    margin-bottom: 1rem;
}

.declaration-text {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    line-height: 1.75;
    color: var(--chalk-white);
}

.verdict-stamp {
    font-family: 'Archivo Black', Impact, sans-serif;
    font-weight: 400;
    font-size: clamp(3rem, 8vw, 7rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--crimson);
    opacity: 0;
    transform: scale(1.5);
    margin: 2rem 0;
    transition: opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1),
                transform 0.3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.verdict-stamp.stamped {
    opacity: 0.15;
    transform: scale(1);
}

.filing-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 3rem;
}

.filing-info span {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: clamp(0.6rem, 0.9vw, 0.75rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--void-gray);
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 900px) {
    .section-opening {
        padding-left: 5vw;
    }

    .hero-line {
        font-size: clamp(2.2rem, 10vw, 4rem);
    }

    .redaction-bar-hero {
        height: 50px;
        width: 85vw;
    }

    .section-grid {
        display: flex;
        flex-direction: column;
        padding: 0 6vw;
    }

    .content-column.col-left,
    .content-column.col-right {
        order: 1;
    }

    /* Mobile annotations: expand from zero height inline */
    .annotation-margin,
    .annotation-margin-left {
        order: 2;
        transform: translateX(0);
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: opacity 0.5s ease, max-height 0.5s ease;
    }

    .annotation-margin.visible,
    .annotation-margin-left.visible {
        max-height: 500px;
        opacity: 1;
    }

    .annotation-block {
        transform: none;
    }

    .exhibit-divider {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 2rem 6vw;
    }

    .exhibit-fact {
        text-align: left;
        max-width: 100%;
    }

    .stamp-overlay {
        font-size: clamp(3rem, 14vw, 6rem);
    }

    .watermark-left,
    .watermark-right {
        display: none;
    }

    .section-heading {
        font-size: clamp(2rem, 9vw, 3.5rem);
    }
}

@media (max-width: 600px) {
    .hero-line {
        font-size: clamp(1.8rem, 9vw, 3rem);
    }

    .redaction-bar-hero {
        height: 35px;
        width: 90vw;
    }

    .caption-title {
        font-size: clamp(1.4rem, 7vw, 2rem);
    }

    .verdict-stamp {
        font-size: clamp(2rem, 12vw, 4rem);
    }
}