:root {
  --black-velvet: #080609;
  --oxblood-objection: #8E1F2F;
  --chalk-ivory: #F3EAD6;
  --witness-green: #2F6F5E;
  --dust-gray: #8C8580;
  --proof-blue: #6EA8FF;
  --brass-verdict: #C49A45;
  --display: "Cormorant Garamond", serif;
  --kr: "Noto Serif KR", serif;
  --copy: "Chivo", sans-serif;
  --premise: "Newsreader", serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--chalk-ivory);
  background: var(--black-velvet);
  font-family: var(--copy);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  background:
    radial-gradient(circle at 47% 20%, rgba(110, 168, 255, .12), transparent 28%),
    repeating-linear-gradient(90deg, rgba(243, 234, 214, .025) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 50% 120%, rgba(196, 154, 69, .12), transparent 36%);
  mix-blend-mode: screen;
}

.argument-stage { position: relative; background: var(--black-velvet); }

.stage-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .35;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(243, 234, 214, .08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 65%, rgba(140, 133, 128, .07) 0 1px, transparent 1.5px);
  background-size: 42px 39px, 31px 35px;
}

.act {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 8vh 7vw 7vh 12vw;
  border-bottom: 1px solid rgba(196, 154, 69, .22);
  background:
    linear-gradient(90deg, rgba(142, 31, 47, .18), transparent 15%, transparent 84%, rgba(47, 111, 94, .16)),
    radial-gradient(ellipse at 37% 50%, rgba(47, 111, 94, .14), transparent 28%),
    var(--black-velvet);
}

.act::before, .act::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14vw;
  z-index: -1;
  background: repeating-linear-gradient(90deg, rgba(142,31,47,.34), rgba(142,31,47,.34) 8px, rgba(8,6,9,.82) 8px, rgba(8,6,9,.82) 22px);
  filter: blur(.2px);
  box-shadow: inset -18px 0 38px rgba(0,0,0,.65);
}

.act::before { left: -4vw; transform: skewX(-4deg); }
.act::after { right: -4vw; transform: skewX(4deg); }

.act-tabs {
  position: fixed;
  top: 50%;
  left: 1.2rem;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.act-tab {
  width: 8.4rem;
  padding: .55rem .7rem;
  color: var(--dust-gray);
  text-decoration: none;
  font: 700 .64rem/1 var(--copy);
  letter-spacing: .11em;
  text-transform: uppercase;
  background: linear-gradient(90deg, rgba(196,154,69,.23), rgba(8,6,9,.62));
  border-left: 3px solid var(--brass-verdict);
  clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
  transition: transform .35s ease, color .35s ease, background .35s ease;
}

.act-tab span { font-family: var(--display); color: var(--brass-verdict); margin-right: .5rem; }
.act-tab.is-current { color: var(--chalk-ivory); background: linear-gradient(90deg, rgba(196,154,69,.55), rgba(8,6,9,.78)); transform: translateX(.4rem); }

.proof-spotlight {
  position: absolute;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(110,168,255,.33), rgba(110,168,255,.12) 36%, transparent 68%);
  filter: blur(2px);
  mix-blend-mode: screen;
}

.opening-beam { width: 52vw; height: 62vh; left: 25%; top: 18%; transform: rotate(-8deg); animation: beamWake 3s ease both; }

.balcony-name {
  position: absolute;
  top: 5vh;
  left: 50%;
  transform: translateX(-50%);
  padding: .55rem 2rem;
  color: var(--brass-verdict);
  border-top: 1px solid var(--brass-verdict);
  border-bottom: 1px solid var(--brass-verdict);
  font: 700 .78rem/1 var(--copy);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.balcony-name em { color: var(--chalk-ivory); font-family: var(--kr); font-style: normal; letter-spacing: .04em; margin-left: 1rem; }

.bracket-curtain {
  position: absolute;
  top: -9vh;
  font-family: var(--display);
  font-size: clamp(22rem, 48vw, 44rem);
  line-height: .8;
  color: var(--oxblood-objection);
  text-shadow: 0 0 34px rgba(142,31,47,.6);
  z-index: 4;
  animation-duration: 2.6s;
  animation-timing-function: cubic-bezier(.65,0,.2,1);
  animation-fill-mode: both;
}

.left-bracket { left: 21vw; animation-name: partLeft; }
.right-bracket { right: 18vw; animation-name: partRight; }

.operator-reveal {
  position: absolute;
  inset: 15vh 0 auto;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(12rem, 31vw, 28rem);
  color: rgba(243,234,214,.08);
  z-index: 0;
}

.premise-card, .witness-card {
  background: linear-gradient(135deg, rgba(243,234,214,.98), rgba(243,234,214,.84));
  color: var(--black-velvet);
  border: 1px solid rgba(196,154,69,.65);
  box-shadow: 0 22px 50px rgba(0,0,0,.55), inset 0 0 28px rgba(196,154,69,.1);
  font-family: var(--premise);
}

.main-premise {
  position: relative;
  z-index: 5;
  width: min(660px, 58vw);
  margin: 29vh 0 0 23vw;
  padding: 2.2rem 2.3rem;
  transform: rotate(-2deg);
}

.dangling::before, .dangling::after, .witness-card::before {
  content: "";
  position: absolute;
  top: -20vh;
  width: 1px;
  height: 20vh;
  background: var(--proof-blue);
  opacity: .65;
}

.dangling::before { left: 18%; }
.dangling::after { right: 21%; }

.evidence-tag {
  display: inline-block;
  padding: .35rem .6rem;
  margin-bottom: 1rem;
  border: 1px solid var(--oxblood-objection);
  color: var(--oxblood-objection);
  font: 700 .66rem/1 var(--copy);
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(243,234,214,.65);
  animation: tagPulse 2.8s ease-in-out infinite;
}

h1, h2 { font-family: var(--display); margin: 0; font-weight: 600; letter-spacing: -.035em; }
h1 { font-size: clamp(4rem, 8vw, 9rem); line-height: .82; }
h2 { font-size: clamp(3.4rem, 7vw, 7.5rem); line-height: .84; }
p { font-size: clamp(1rem, 1.45vw, 1.4rem); line-height: 1.55; }

.margin-note {
  position: absolute;
  right: 10vw;
  bottom: 16vh;
  width: 18rem;
  color: var(--dust-gray);
  font: 600 1rem/1.6 var(--kr);
  border-left: 1px solid var(--brass-verdict);
  padding-left: 1rem;
}

.chalk-diagram {
  position: absolute;
  left: 9vw;
  bottom: 12vh;
  display: grid;
  gap: .4rem;
  color: rgba(243,234,214,.45);
  font: 300 1.15rem/1 var(--premise);
  transform: rotate(-8deg);
}
.chalk-diagram strong { color: var(--proof-blue); font-weight: 400; }

.scene-label {
  position: absolute;
  top: 8vh;
  left: 13vw;
  z-index: 3;
  color: var(--dust-gray);
  font: 700 .76rem/1 var(--copy);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.scene-label span { color: var(--brass-verdict); margin-right: .8rem; font-family: var(--display); font-size: 1.25rem; }

.witness-rail {
  position: absolute;
  left: 37%;
  top: 0;
  bottom: 0;
  width: 10px;
  background: linear-gradient(var(--brass-verdict), var(--witness-green), var(--brass-verdict));
  box-shadow: 0 0 30px rgba(196,154,69,.34);
}

.witness-card {
  position: absolute;
  z-index: 4;
  padding: 1.7rem;
  width: min(440px, 34vw);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.witness-card::before { left: 50%; }
.witness-card.is-inspected { transform: rotate(0deg) scale(1.04); box-shadow: 0 34px 70px rgba(0,0,0,.7), 0 0 45px rgba(110,168,255,.28); }
.card-one { left: 20vw; top: 25vh; transform: rotate(6deg); }
.card-two { right: 10vw; bottom: 14vh; transform: rotate(-5deg); }
.statement { font-size: clamp(1.2rem, 1.8vw, 1.8rem); }

.movable-spotlight { width: 28rem; height: 28rem; left: var(--spot-x, 46%); top: var(--spot-y, 38%); transform: translate(-50%, -50%); transition: width .25s ease, height .25s ease; z-index: 2; }

.objection-card {
  position: absolute;
  right: 12vw;
  top: 25vh;
  padding: 1rem 1.1rem;
  color: var(--chalk-ivory);
  background: var(--oxblood-objection);
  border: 1px solid var(--chalk-ivory);
  transform: rotate(7deg);
  box-shadow: 0 18px 30px rgba(0,0,0,.5);
}
.objection-card b { display: block; font-family: var(--display); font-size: 2rem; }

.inference-svg { position: absolute; inset: 10vh 5vw; width: 90vw; height: 78vh; z-index: 1; overflow: visible; }
.proof-line { fill: none; stroke: var(--proof-blue); stroke-width: 2; stroke-dasharray: 1200; stroke-dashoffset: 1200; filter: drop-shadow(0 0 8px rgba(110,168,255,.9)); }
.proof-line.secondary { stroke: rgba(243,234,214,.48); stroke-width: 1; }
.act.is-visible .proof-line { animation: drawPath 2.5s ease forwards; }
.act.is-visible .proof-line.secondary { animation-delay: .45s; }

.trapdoor-scene { perspective: 1100px; }
.fallacy-trapdoor {
  position: absolute;
  left: 24vw;
  top: 28vh;
  width: min(640px, 52vw);
  height: 18rem;
  transform-style: preserve-3d;
}
.trapdoor-top, .trapdoor-under {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: .8rem;
  text-align: center;
  border: 2px solid var(--brass-verdict);
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 4rem);
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
  transform-origin: left center;
}
.trapdoor-top { background: repeating-linear-gradient(90deg, #151011, #151011 30px, #211516 30px, #211516 60px); color: var(--chalk-ivory); }
.trapdoor-under { background: var(--oxblood-objection); color: var(--chalk-ivory); transform: rotateY(-105deg); font: 700 1rem/1.4 var(--copy); letter-spacing: .12em; text-transform: uppercase; }
.fallacy-trapdoor.is-open .trapdoor-top { transform: rotateY(72deg); }
.fallacy-trapdoor.is-open .trapdoor-under { transform: rotateY(0); }

.shadow-box {
  position: absolute;
  right: 9vw;
  top: 34vh;
  width: 25rem;
  padding: 2rem;
  color: var(--chalk-ivory);
  background: rgba(8,6,9,.72);
  border: 1px solid rgba(140,133,128,.45);
}
.gavel-mark {
  position: absolute;
  left: 16vw;
  bottom: 18vh;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: 2px solid var(--brass-verdict);
  color: var(--brass-verdict);
  background: rgba(8,6,9,.8);
  font: 600 2.8rem/1 var(--display);
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(196,154,69,.45);
  animation: gavelPulse 2s ease infinite;
}
.broken-fragments { position: absolute; left: 36vw; bottom: 10vh; display: flex; gap: 1rem; color: var(--oxblood-objection); font: 700 .85rem/1 var(--copy); text-transform: uppercase; letter-spacing: .15em; }
.broken-fragments span { border-top: 1px solid var(--oxblood-objection); transform: rotate(var(--r, -4deg)); }
.broken-fragments span:nth-child(2) { --r: 6deg; }
.broken-fragments span:nth-child(3) { --r: -9deg; }

.syllogism-balcony {
  position: absolute;
  left: 18vw;
  right: 8vw;
  top: 10vh;
  padding-top: 1.4rem;
  color: var(--chalk-ivory);
}
.brass-rail { display: block; height: 6px; background: linear-gradient(90deg, transparent, var(--brass-verdict), transparent); margin-bottom: 1rem; }
.syllogism-balcony p { color: var(--dust-gray); }
.rope-system { position: absolute; inset: 0; }
.rope { position: absolute; top: 0; width: 1px; height: 65vh; background: var(--proof-blue); transform-origin: top; opacity: .62; }
.rope-a { left: 32vw; transform: rotate(8deg); }
.rope-b { left: 53vw; transform: rotate(-4deg); }
.rope-c { left: 70vw; transform: rotate(5deg); }
.balcony-card { position: absolute; width: 18rem; min-height: 8rem; padding: 1rem; font-size: 1.15rem; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.balcony-card.a { left: 23vw; bottom: 20vh; transform: translateY(30px) rotate(-8deg); }
.balcony-card.b { left: 46vw; bottom: 31vh; transform: translateY(-20px) rotate(5deg); }
.balcony-card.c { left: 65vw; bottom: 17vh; transform: translateY(45px) rotate(-2deg); border-color: var(--proof-blue); }
.act.is-visible .balcony-card { transform: translateY(0) rotate(0deg); }
.mask-pair { position: absolute; left: 9vw; bottom: 13vh; display: flex; gap: 1.5rem; }
.mask-pair span { display: grid; place-items: center; width: 8rem; height: 5rem; border-radius: 50% 50% 45% 45%; border: 1px solid var(--brass-verdict); color: var(--brass-verdict); font: 600 4rem/1 var(--display); background: rgba(243,234,214,.04); }

.verdict-scene { display: grid; place-items: center; }
.fly-tower { position: absolute; top: 0; left: 50%; width: 2px; height: 24vh; background: var(--brass-verdict); box-shadow: -22px 0 0 rgba(196,154,69,.38), 22px 0 0 rgba(196,154,69,.38); }
.verdict-ribbon {
  position: relative;
  z-index: 4;
  width: min(920px, 68vw);
  padding: 1.2rem 2rem 1.6rem;
  text-align: center;
  color: var(--black-velvet);
  background: linear-gradient(90deg, var(--brass-verdict), var(--chalk-ivory) 18%, var(--chalk-ivory) 82%, var(--brass-verdict));
  box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 65px rgba(110,168,255,.22);
  transform: translateY(-42vh);
  transition: transform 1.2s cubic-bezier(.2,.9,.2,1);
}
.act.is-visible .verdict-ribbon, .verdict-ribbon.is-lowered { transform: translateY(0); }
.verdict-ribbon span { display: block; margin-bottom: .55rem; font: 700 .75rem/1 var(--copy); color: var(--oxblood-objection); letter-spacing: .24em; }
.verdict-ribbon strong { font: 600 clamp(2.2rem, 5vw, 5.2rem)/.9 var(--display); }
.verdict-room-copy { position: absolute; left: 12vw; bottom: 11vh; width: 28rem; color: var(--dust-gray); }
.newsreader-copy { font-family: var(--premise); }
.final-operator { position: absolute; right: 10vw; bottom: 7vh; color: rgba(110,168,255,.22); font: 600 18rem/.7 var(--display); }

@keyframes partLeft { from { transform: translateX(0); } to { transform: translateX(-33vw); } }
@keyframes partRight { from { transform: translateX(0); } to { transform: translateX(33vw); } }
@keyframes beamWake { from { opacity: 0; transform: rotate(-8deg) scale(.5); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
@keyframes tagPulse { 0%,100% { box-shadow: inset 0 0 0 0 rgba(142,31,47,.2); } 50% { box-shadow: inset 0 0 0 2px rgba(142,31,47,.22); } }
@keyframes drawPath { to { stroke-dashoffset: 0; } }
@keyframes gavelPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(196,154,69,.34); } 50% { box-shadow: 0 0 0 16px rgba(196,154,69,0); } }

@media (max-width: 760px) {
  .act { padding: 8vh 6vw 8vh 18vw; }
  .act-tabs { left: .35rem; }
  .act-tab { width: 3.8rem; font-size: 0; padding: .55rem; }
  .act-tab span { font-size: .8rem; margin: 0; }
  .main-premise, .witness-card, .shadow-box, .verdict-room-copy { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; margin: 22vh 0 0; }
  .card-two { margin-top: 2rem; }
  .fallacy-trapdoor { left: 18vw; width: 74vw; }
  .broken-fragments, .mask-pair, .chalk-diagram, .margin-note { display: none; }
  .verdict-ribbon { width: 78vw; }
}