:root {
    --obsidian: #08070A;
    --bone: #E9DFC9;
    --red: #B3262E;
    --brass: #B89045;
    --blue: #5C8FB8;
    --slate: #27303A;
    --news: 'Newsreader', serif;
    --mono: 'Azeret Mono', monospace;
    --kr: 'Noto Sans KR', sans-serif;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100vh;
    color: var(--bone);
    background:
        radial-gradient(circle at 70% 12%, rgba(184, 144, 69, 0.18), transparent 25vw),
        radial-gradient(circle at 20% 72%, rgba(92, 143, 184, 0.09), transparent 28vw),
        linear-gradient(180deg, #08070A 0%, #111014 42%, #08070A 100%);
    font-family: var(--news);
    overflow-x: hidden;
}

.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 30;
    opacity: 0.14;
    background-image:
        repeating-radial-gradient(circle at 17% 23%, rgba(233, 223, 201, 0.16) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(93deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 7px);
    mix-blend-mode: soft-light;
}

.lamplight {
    position: fixed;
    width: 38vw;
    height: 38vw;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 223, 201, 0.16), rgba(184, 144, 69, 0.06) 36%, transparent 67%);
    filter: blur(18px);
    pointer-events: none;
    z-index: 2;
    transition: opacity 600ms ease;
}

.deduction-rail {
    position: fixed;
    left: 28vw;
    top: 0;
    height: 100vh;
    width: 9rem;
    z-index: 20;
    pointer-events: none;
}

.rail-line {
    position: absolute;
    left: 2.55rem;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent, var(--brass) 12%, var(--brass) 86%, transparent);
    box-shadow: 0 0 22px rgba(184, 144, 69, 0.38);
}

.rail-line::before,
.rail-line::after {
    content: "";
    position: absolute;
    left: -4px;
    width: 9px;
    height: 9px;
    border: 1px solid var(--brass);
    background: var(--obsidian);
    transform: rotate(45deg);
}

.rail-line::before { top: 12vh; }
.rail-line::after { bottom: 10vh; }

.rail-domain {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;
    font-family: var(--mono);
    letter-spacing: 0.42em;
    color: rgba(233, 223, 201, 0.52);
    font-size: 0.72rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.act-nav {
    position: absolute;
    left: 3.3rem;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: 1.05rem;
    pointer-events: auto;
}

.act-dot {
    display: grid;
    grid-template-columns: 2.2rem auto;
    gap: 0.7rem;
    align-items: center;
    color: rgba(233, 223, 201, 0.36);
    font-family: var(--mono);
    font-size: 0.63rem;
    text-decoration: none;
    letter-spacing: 0.08em;
    transition: color 300ms ease, transform 300ms ease;
}

.act-dot span {
    color: var(--brass);
    opacity: 0.55;
}

.act-dot::before {
    content: "";
    position: absolute;
    left: -0.98rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--slate);
    border: 1px solid rgba(184, 144, 69, 0.7);
    box-shadow: 0 0 0 transparent;
    transition: background 300ms ease, box-shadow 300ms ease;
}

.act-dot.active {
    color: var(--bone);
    transform: translateX(0.22rem);
}

.act-dot.active::before {
    background: var(--blue);
    box-shadow: 0 0 18px rgba(92, 143, 184, 0.7);
}

.tribunal { position: relative; z-index: 5; }

.scene {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: grid;
    align-items: center;
    padding: 8vh 8vw 8vh 36vw;
    border-bottom: 1px solid rgba(184, 144, 69, 0.13);
    isolation: isolate;
}

.scene::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, transparent 0 44%, rgba(233, 223, 201, 0.03) 44.2% 44.8%, transparent 45% 100%),
        repeating-linear-gradient(0deg, transparent 0 72px, rgba(184, 144, 69, 0.05) 73px, transparent 74px);
    opacity: 0.65;
    z-index: -2;
}

.scene.in-view .proposition-slip,
.scene.in-view .exhibit-panel,
.scene.in-view .challenge-text,
.scene.in-view .reduction-copy,
.scene.in-view .verdict-copy,
.scene.in-view .evidence-tag {
    opacity: 1;
    transform: translateY(0) rotate(var(--rot, 0deg));
}

.act-label,
.exhibit-id,
.notation,
.marginal-objection,
.objection-stack,
.case-stamp {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.act-label {
    position: absolute;
    top: 8vh;
    left: 36vw;
    color: var(--brass);
    font-size: 0.72rem;
}

h1, h2, p { margin: 0; }

h1, h2 {
    font-family: var(--news);
    font-weight: 400;
    line-height: 0.92;
}

h1 { font-size: clamp(4.2rem, 10vw, 11rem); letter-spacing: -0.07em; }
h2 { font-size: clamp(3.2rem, 7vw, 8rem); letter-spacing: -0.06em; }
em { font-style: italic; color: var(--bone); }
p { font-size: clamp(1.05rem, 1.7vw, 1.38rem); line-height: 1.55; color: rgba(233, 223, 201, 0.78); }

.exhibit-id {
    display: block;
    color: var(--brass);
    font-size: 0.68rem;
    margin-bottom: 1.25rem;
}

.threshold-door {
    padding-left: 0;
    place-items: center;
}

.court-depth {
    position: absolute;
    inset: 8vh 9vw;
    border: 1px solid rgba(184, 144, 69, 0.22);
    transform: perspective(800px) rotateX(58deg) translateY(18vh);
    box-shadow: inset 0 0 90px rgba(0,0,0,0.8), 0 0 80px rgba(184,144,69,0.08);
}

.door-frame {
    position: relative;
    width: min(36vw, 390px);
    height: 74vh;
    border: 1px solid rgba(184, 144, 69, 0.55);
    box-shadow: 0 0 70px rgba(0,0,0,0.9), inset 0 0 0 8px rgba(39, 48, 58, 0.35);
    background: #050406;
    overflow: hidden;
    z-index: 4;
}

.door-panel {
    position: absolute;
    inset: 0;
    width: 51%;
    background:
        linear-gradient(90deg, #050406, #131019 50%, #050406),
        repeating-linear-gradient(90deg, transparent 0 28px, rgba(184,144,69,0.08) 29px, transparent 30px);
    transition: transform 900ms cubic-bezier(.2,.8,.2,1);
}

.left-panel { left: 0; transform-origin: left center; }
.right-panel { right: 0; left: auto; transform-origin: right center; }
.threshold-door.in-view.opened .left-panel { transform: perspective(900px) rotateY(-31deg) translateX(-13%); }
.threshold-door.in-view.opened .right-panel { transform: perspective(900px) rotateY(31deg) translateX(13%); }

.door-spine {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--brass);
    color: rgba(233, 223, 201, 0.5);
    font-family: var(--mono);
    writing-mode: vertical-rl;
    letter-spacing: 0.38em;
    padding-top: 7vh;
    text-shadow: 0 0 12px rgba(184,144,69,0.55);
}

.door-sigil {
    position: absolute;
    left: 50%; top: 52%;
    transform: translate(-50%, -50%);
    width: 4.8rem; height: 4.8rem;
    border: 1px solid var(--brass);
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--red);
    font-family: var(--mono);
    font-size: 2rem;
    background: rgba(8,7,10,0.82);
}

.threshold-copy {
    position: absolute;
    right: 8vw;
    bottom: 9vh;
    width: min(42rem, 48vw);
    transform: translateY(36px) rotate(-2deg);
}

.exhibit-slip,
.proposition-slip,
.exhibit-panel,
.challenge-text,
.verdict-copy {
    background: linear-gradient(135deg, rgba(233,223,201,0.96), rgba(218,205,178,0.9));
    color: var(--obsidian);
    padding: clamp(1.5rem, 3.8vw, 4rem);
    box-shadow: 0 24px 90px rgba(0,0,0,0.46), inset 0 0 0 1px rgba(8,7,10,0.18);
    clip-path: polygon(0 0, 96% 0, 100% 11%, 100% 100%, 5% 100%, 0 91%);
    opacity: 0;
    transition: opacity 700ms ease, transform 900ms cubic-bezier(.2,.8,.2,1);
}

.exhibit-slip h1,
.proposition-slip h2,
.exhibit-panel h2,
.challenge-text h2,
.verdict-copy h2 { color: var(--obsidian); }

.exhibit-slip em,
.proposition-slip em,
.exhibit-panel em,
.challenge-text em,
.verdict-copy em { color: var(--red); }

.exhibit-slip p,
.proposition-slip p,
.exhibit-panel p,
.challenge-text p,
.verdict-copy p { color: rgba(8,7,10,0.72); max-width: 42rem; }

.main-slip {
    width: min(62rem, 72vw);
    --rot: -1.8deg;
    transform: translateY(60px) rotate(-5deg);
}

.notation {
    margin-top: 2rem;
    color: var(--red);
    font-size: 1.1rem;
    border-top: 1px solid rgba(179,38,46,0.35);
    padding-top: 1rem;
}
.notation span { color: rgba(8,7,10,0.45); font-size: 0.72rem; }

.connector-svg,
.cross-svg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: -1;
}

.draw-path,
.brass-path {
    fill: none;
    stroke-width: 2;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 1400ms ease;
}
.draw-path { stroke: rgba(233,223,201,0.33); }
.brass-path { stroke: rgba(184,144,69,0.72); }
.red-score { stroke: var(--red); stroke-width: 5; filter: drop-shadow(0 0 16px rgba(179,38,46,0.55)); }
.scene.in-view .draw-path,
.scene.in-view .brass-path { stroke-dashoffset: 0; }

.marginal-objection {
    position: absolute;
    right: 7vw;
    top: 22vh;
    color: rgba(233,223,201,0.5);
    border-left: 1px solid var(--red);
    padding-left: 1rem;
    font-size: 0.68rem;
}

.paper-strip {
    position: absolute;
    left: 38vw;
    bottom: 12vh;
    color: rgba(8,7,10,0.72);
    background: var(--bone);
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    padding: 0.75rem 2rem;
    transform: rotate(2.5deg);
    box-shadow: 0 12px 25px rgba(0,0,0,0.35);
}

.engraved-symbol,
.symbol-cloud {
    position: absolute;
    font-family: var(--mono);
    color: rgba(233,223,201,0.08);
    font-size: clamp(9rem, 18vw, 21rem);
    line-height: 1;
    pointer-events: none;
}
.engraved-symbol { right: -2vw; bottom: -3vh; }
.symbol-a { left: 8vw; top: 7vh; }
.symbol-b { right: 10vw; top: 12vh; }

.assumption-stand {
    background: radial-gradient(circle at 75% 45%, rgba(39,48,58,0.78), transparent 36vw), var(--obsidian);
}

.witness-stand {
    position: absolute;
    right: 6vw;
    bottom: 0;
    width: 42vw;
    height: 62vh;
    background: linear-gradient(140deg, rgba(39,48,58,0.85), rgba(8,7,10,0.2));
    clip-path: polygon(22% 0, 100% 18%, 82% 100%, 0 100%);
    border-left: 1px solid rgba(184,144,69,0.35);
    opacity: 0.75;
}

.assumption-panel {
    width: min(48rem, 58vw);
    --rot: 1.6deg;
    transform: translateY(50px) rotate(5deg);
}

.kr-fragment { font-family: var(--kr); }

.evidence-tag {
    position: absolute;
    left: 22vw;
    top: 56vh;
    width: 11rem;
    min-height: 13rem;
    padding: 1.2rem 1rem;
    background: var(--bone);
    color: var(--obsidian);
    font-family: var(--mono);
    text-align: center;
    transform: translateY(45px) rotate(-10deg);
    opacity: 0;
    transition: opacity 700ms ease 180ms, transform 900ms cubic-bezier(.2,.8,.2,1) 180ms;
    box-shadow: 0 20px 55px rgba(0,0,0,0.45);
}
.evidence-tag::before {
    content: "";
    position: absolute;
    top: -2.4rem;
    left: 50%;
    width: 1px;
    height: 2.4rem;
    background: var(--brass);
}
.evidence-tag span { color: var(--brass); font-size: 0.66rem; }
.evidence-tag strong { display: block; font-size: 4rem; color: var(--red); margin: 1rem 0; }
.evidence-tag small { color: rgba(8,7,10,0.55); }

.clause-bracket {
    position: absolute;
    left: 31vw;
    top: 18vh;
    font-family: var(--mono);
    font-size: 24rem;
    color: rgba(184,144,69,0.16);
}

.bench-lines {
    position: absolute;
    right: 0;
    bottom: 12vh;
    display: grid;
    gap: 1.2rem;
    width: 45vw;
    transform: skewY(-9deg);
}
.bench-lines i { height: 1px; background: linear-gradient(90deg, transparent, rgba(184,144,69,0.55), transparent); }

.challenge-cross { background: linear-gradient(180deg, #0b090d, #140d10 48%, #08070A); }
.challenge-text {
    width: min(55rem, 62vw);
    background: linear-gradient(135deg, rgba(39,48,58,0.96), rgba(8,7,10,0.94));
    color: var(--bone);
    border: 1px solid rgba(184,144,69,0.3);
    --rot: -0.8deg;
    transform: translateY(50px) rotate(3deg);
}
.challenge-text h2 { color: var(--bone); }
.challenge-text p { color: rgba(233,223,201,0.72); }

.contradiction-ember {
    position: absolute;
    left: 58vw;
    top: 52vh;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 0 rgba(179,38,46,0.8), 0 0 32px rgba(179,38,46,0.95);
    opacity: 0;
}
.scene.in-view .contradiction-ember { animation: emberPulse 1600ms ease 280ms forwards; }

@keyframes emberPulse {
    0% { opacity: 0; transform: scale(0.4); box-shadow: 0 0 0 0 rgba(179,38,46,0.8); }
    35% { opacity: 1; transform: scale(1.25); box-shadow: 0 0 0 28px rgba(179,38,46,0); }
    70% { opacity: 1; transform: scale(0.75); background: #08070A; box-shadow: 0 0 0 8px rgba(179,38,46,0.15); }
    100% { opacity: 0.9; transform: scale(0.55); background: #08070A; box-shadow: inset 0 0 0 2px rgba(179,38,46,0.25), 0 0 12px rgba(0,0,0,0.8); }
}

.objection-stack {
    position: absolute;
    right: 7vw;
    bottom: 14vh;
    display: grid;
    gap: 0.6rem;
    color: rgba(233,223,201,0.55);
    font-size: 0.62rem;
}
.objection-stack span { border-bottom: 1px solid rgba(179,38,46,0.45); padding-bottom: 0.35rem; }

.oversized-word {
    position: absolute;
    left: 35vw;
    bottom: -3vh;
    font-family: var(--news);
    font-size: 13vw;
    font-style: italic;
    color: rgba(233,223,201,0.045);
    letter-spacing: -0.08em;
}

.reduction-room { background: radial-gradient(circle at 40% 50%, rgba(184,144,69,0.12), transparent 34vw), #08070A; }
.reduction-copy {
    width: min(56rem, 64vw);
    justify-self: end;
    --rot: 0.9deg;
    transform: translateY(60px) rotate(-3deg);
}

.fold-screen {
    position: absolute;
    left: 32vw;
    top: 19vh;
    display: flex;
    perspective: 900px;
    filter: drop-shadow(0 30px 55px rgba(0,0,0,0.55));
}
.fold {
    width: 9vw;
    height: 45vh;
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-size: 5rem;
    color: rgba(8,7,10,0.7);
    background: var(--bone);
    border: 1px solid rgba(8,7,10,0.16);
    transform-origin: left center;
    transition: transform 900ms cubic-bezier(.2,.8,.2,1);
}
.fold-b { background: #d9c9a8; color: var(--red); transform-origin: center; }
.fold-c { transform-origin: right center; }
.scene.in-view .fold-a { transform: rotateY(22deg); }
.scene.in-view .fold-b { transform: rotateY(-12deg); }
.scene.in-view .fold-c { transform: rotateY(-28deg); }

.scorch-mark {
    position: absolute;
    left: 43vw;
    bottom: 18vh;
    width: 6rem;
    height: 2.3rem;
    border-radius: 50%;
    background: radial-gradient(ellipse, #08070A 0 34%, rgba(179,38,46,0.28) 35% 45%, transparent 70%);
    filter: blur(2px);
    opacity: 0;
    transition: opacity 800ms ease 700ms;
}
.scene.in-view .scorch-mark { opacity: 1; }

.cut-marks {
    position: absolute;
    right: 8vw;
    top: 18vh;
    display: grid;
    gap: 2rem;
}
.cut-marks span { width: 13rem; height: 1px; background: var(--brass); transform: rotate(-18deg); opacity: 0.5; }

.verdict-seal {
    place-items: center;
    padding-left: 32vw;
    background:
        radial-gradient(circle at 55% 45%, rgba(179,38,46,0.16), transparent 25vw),
        radial-gradient(circle at 55% 45%, rgba(184,144,69,0.13), transparent 36vw),
        #08070A;
}

.seal-assembly {
    position: relative;
    width: min(32vw, 24rem);
    height: min(32vw, 24rem);
    margin-bottom: 2rem;
}

.seal-piece,
.seal-core {
    position: absolute;
    display: grid;
    place-items: center;
    font-family: var(--mono);
    border-radius: 50%;
    border: 1px solid rgba(184,144,69,0.65);
    background: radial-gradient(circle, rgba(179,38,46,0.92), rgba(98,14,20,0.95));
    color: var(--bone);
    box-shadow: inset 0 0 30px rgba(8,7,10,0.45), 0 18px 60px rgba(0,0,0,0.55);
}
.seal-core { inset: 24%; font-size: 4rem; z-index: 4; transform: scale(0.2); opacity: 0; transition: transform 900ms ease, opacity 700ms ease; }
.seal-piece { width: 42%; height: 42%; font-size: 2.1rem; opacity: 0; transition: transform 900ms cubic-bezier(.2,.8,.2,1), opacity 700ms ease; }
.piece-top { left: 29%; top: 0; transform: translateY(-9rem) rotate(-40deg); }
.piece-left { left: 0; bottom: 8%; transform: translateX(-9rem) rotate(35deg); }
.piece-right { right: 0; bottom: 8%; transform: translateX(9rem) rotate(-35deg); }
.scene.in-view .seal-piece,
.scene.in-view .seal-core { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }

.verdict-copy {
    width: min(46rem, 58vw);
    text-align: center;
    transform: translateY(40px) rotate(0deg);
    background: transparent;
    color: var(--bone);
    box-shadow: none;
    clip-path: none;
}
.verdict-copy h2 { color: var(--bone); }
.verdict-copy p { color: rgba(233,223,201,0.76); margin-inline: auto; }
.resolved-line { font-family: var(--mono); color: var(--blue) !important; margin: 1.2rem 0; }
.case-stamp { margin-top: 2rem; color: var(--brass); font-size: 0.9rem; }

.final-screen {
    position: absolute;
    top: 18vh;
    width: 20vw;
    height: 64vh;
    border: 1px solid rgba(184,144,69,0.28);
    background: linear-gradient(120deg, rgba(233,223,201,0.05), rgba(39,48,58,0.18));
    opacity: 0.5;
}
.screen-left { left: 34vw; transform: skewY(8deg); }
.screen-right { right: 5vw; transform: skewY(-8deg); }

@media (max-width: 820px) {
    .deduction-rail { left: 1rem; width: 5rem; }
    .rail-domain, .act-dot { display: none; }
    .rail-line { left: 1rem; }
    .scene { padding: 7rem 1.2rem 5rem 5rem; }
    .act-label { left: 5rem; }
    .threshold-door { padding-left: 5rem; }
    .door-frame { width: 58vw; height: 62vh; }
    .threshold-copy, .main-slip, .assumption-panel, .challenge-text, .reduction-copy, .verdict-copy { width: 100%; right: auto; }
    .threshold-copy { position: relative; bottom: auto; margin-top: 2rem; }
    h1 { font-size: 4rem; }
    h2 { font-size: 3rem; }
    .fold-screen, .witness-stand, .paper-strip, .clause-bracket, .final-screen { display: none; }
    .verdict-seal { padding-left: 5rem; }
    .seal-assembly { width: 16rem; height: 16rem; }
}