:root {
  --chamber-black: #080A12;
  --proposition-blue: #2D6BFF;
  --opposition-vermilion: #FF4B36;
  --evidence-ivory: #F2E9D8;
  --brass-gavel: #C99A3E;
  --chalk-lavender: #B9A7FF;
  --display: Fraunces, Georgia, 'Times New Roman', serif;
  --condensed: 'IBM Plex Sans Condensed', 'Arial Narrow', 'Inter', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--evidence-ivory);
  background: var(--chamber-black);
  font-family: var(--serif);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at calc(18% + (var(--scroll-ratio, 0) * 10%)) 12%, rgba(45, 107, 255, .33), transparent 22%),
    radial-gradient(circle at calc(82% - (var(--scroll-ratio, 0) * 8%)) 14%, rgba(255, 75, 54, .28), transparent 20%),
    linear-gradient(115deg, transparent 0 44%, rgba(201, 154, 62, .10) 44.2% 44.6%, transparent 44.8% 100%);
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at calc(var(--cursor-x, .5) * 100%) calc(var(--cursor-y, .5) * 100%), rgba(242, 233, 216, .08), transparent 16%),
    radial-gradient(circle at 18% 12%, rgba(45, 107, 255, .33), transparent 22%),
    radial-gradient(circle at 82% 14%, rgba(255, 75, 54, .28), transparent 20%),
    repeating-linear-gradient(126deg, transparent 0 42px, rgba(242, 233, 216, .025) 42px 43px, transparent 43px 104px);
  mix-blend-mode: screen;
  z-index: 1;
}

.floor-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .25;
  z-index: 1;
  background-image:
    repeating-linear-gradient(0deg, rgba(242,233,216,.035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(242,233,216,.025) 0 1px, transparent 1px 7px);
}

main, .scene { position: relative; z-index: 2; }

.scene {
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(42px, 7vw, 92px);
  border-bottom: 1px solid rgba(242, 233, 216, .11);
}

.scene::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(242, 233, 216, .045);
  pointer-events: none;
  transform: skewY(-1deg);
  z-index: -1;
}

.order-rail {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: 18px;
  padding: 14px 10px;
  border: 1px solid rgba(201, 154, 62, .42);
  background: rgba(8, 10, 18, .65);
  backdrop-filter: blur(10px);
}

.rail-mark {
  width: 12px;
  height: 26px;
  display: block;
  position: relative;
  border: 1px solid rgba(242, 233, 216, .28);
  text-decoration: none;
}

.rail-mark span {
  position: absolute;
  inset: 4px;
  background: rgba(242, 233, 216, .22);
  transition: background .35s ease, box-shadow .35s ease;
}

.rail-mark:nth-child(1).active span, .rail-mark:nth-child(2).active span { background: var(--proposition-blue); box-shadow: 0 0 18px var(--proposition-blue); }
.rail-mark:nth-child(3).active span { background: var(--opposition-vermilion); box-shadow: 0 0 18px var(--opposition-vermilion); }
.rail-mark:nth-child(4).active span { background: var(--brass-gavel); box-shadow: 0 0 18px var(--brass-gavel); }

.rail-mark::before {
  content: attr(data-act);
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  color: var(--evidence-ivory);
  font: 700 11px/1 var(--condensed);
  letter-spacing: .16em;
  opacity: 0;
  transition: opacity .25s ease;
}

.rail-mark:hover::before, .rail-mark.active::before { opacity: .78; }

.procedural, .speaker-label, .formula, .evidence-tag, .objection-chip, .closing-note, .seal-final {
  font-family: var(--condensed);
  text-transform: uppercase;
  letter-spacing: .16em;
}

.procedural { color: var(--brass-gavel); font-weight: 700; font-size: clamp(.72rem, 1.2vw, .94rem); }

h1, h2, h3 { margin: 0; }

h1, h2 { font-family: var(--display); font-weight: 900; line-height: .9; letter-spacing: -.055em; }

h1 { font-size: clamp(4.2rem, 15vw, 15.5rem); text-shadow: 0 22px 40px rgba(0,0,0,.55); }
h2 { font-size: clamp(3rem, 8vw, 8.6rem); max-width: 980px; }
h3 { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 3.4rem); line-height: 1; }

.motion-scene { display: grid; place-items: center; text-align: center; }

.motion-card { position: relative; z-index: 5; transform: rotate(-1.5deg); }
.motion-card::before, .motion-card::after {
  content: "RESOLVED";
  position: absolute;
  top: -28px;
  font: 700 .72rem var(--mono);
  letter-spacing: .22em;
  color: rgba(242,233,216,.36);
  border: 1px solid rgba(201,154,62,.32);
  padding: 7px 10px;
}
.motion-card::before { left: 2vw; transform: rotate(8deg); }
.motion-card::after { right: 3vw; content: "ENTERED"; transform: rotate(-7deg); }
.title-dot { color: var(--brass-gavel); text-shadow: 0 0 18px var(--brass-gavel); }
.motion-sub { margin: 24px auto 0; max-width: 680px; font-size: clamp(1.05rem, 2vw, 1.5rem); color: rgba(242,233,216,.86); }

.lamp { position: absolute; top: -10vh; width: 38vw; height: 54vh; filter: blur(18px); opacity: .76; }
.lamp-prop { left: 0; background: radial-gradient(ellipse at top, rgba(45,107,255,.72), transparent 65%); transform: rotate(18deg); }
.lamp-opp { right: 0; background: radial-gradient(ellipse at top, rgba(255,75,54,.64), transparent 65%); transform: rotate(-18deg); }

.lectern { position: absolute; bottom: 12vh; width: 32vw; height: 30vh; border-top: 2px solid rgba(242,233,216,.18); background: linear-gradient(135deg, rgba(242,233,216,.06), transparent); }
.lectern-left { left: -12vw; transform: skewY(-18deg) rotate(-8deg); border-right: 1px solid rgba(45,107,255,.45); }
.lectern-right { right: -12vw; transform: skewY(18deg) rotate(8deg); border-left: 1px solid rgba(255,75,54,.45); }

.floor-tape { position: absolute; height: 2px; width: 90vw; background: rgba(201,154,62,.38); transform-origin: center; }
.tape-one { bottom: 22vh; left: 4vw; transform: rotate(-16deg); }
.tape-two { bottom: 34vh; right: -10vw; transform: rotate(21deg); background: rgba(185,167,255,.28); }

.causal-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.draw-path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.25s cubic-bezier(.4,0,.1,1); }
.in-view .draw-path, .draw-path.live { stroke-dashoffset: 0; }
.dot-origin { fill: var(--brass-gavel); filter: drop-shadow(0 0 10px rgba(201,154,62,.9)); opacity: 0; transition: opacity .4s ease .2s; }
.in-view .dot-origin { opacity: 1; }
.blue-path { stroke: var(--proposition-blue); filter: drop-shadow(0 0 8px rgba(45,107,255,.75)); }
.red-path { stroke: var(--opposition-vermilion); filter: drop-shadow(0 0 8px rgba(255,75,54,.75)); }
.brass-path { stroke: var(--brass-gavel); }
.lavender-path { stroke: var(--chalk-lavender); }
.delayed { transition-delay: .45s; }
.interrupt { stroke-width: 5; transition-delay: .15s; }

.hero-tag {
  position: absolute;
  right: 11vw;
  bottom: 22vh;
  color: var(--chamber-black);
  background: var(--evidence-ivory);
  padding: 10px 16px;
  transform: rotate(-8deg);
  box-shadow: 0 18px 30px rgba(0,0,0,.34);
}

.club-seal, .seal-final {
  border: 1px solid var(--brass-gavel);
  color: var(--brass-gavel);
  display: grid;
  place-items: center;
}
.club-seal { position: absolute; left: 50%; bottom: 11vh; width: 58px; height: 58px; border-radius: 50%; font-family: var(--display); font-size: 2rem; opacity: .75; }

.arena-plane { position: absolute; inset: auto; z-index: -1; }
.proposition-plane { left: -18vw; top: 10vh; width: 70vw; height: 100vh; transform: rotate(-14deg); background: linear-gradient(105deg, rgba(45,107,255,.25), rgba(45,107,255,.03) 58%, transparent); border-right: 1px solid rgba(45,107,255,.5); }
.opposition-plane { right: -18vw; top: 4vh; width: 76vw; height: 105vh; transform: rotate(14deg); background: linear-gradient(255deg, rgba(255,75,54,.25), rgba(255,75,54,.035) 58%, transparent); border-left: 1px solid rgba(255,75,54,.5); }
.ivory-folder { right: 10vw; bottom: 8vh; width: 34vw; height: 52vh; transform: rotate(11deg); background: rgba(242,233,216,.08); border: 1px solid rgba(242,233,216,.22); }

.claim-scene, .crossfire-scene, .consequence-scene { display: grid; align-items: center; }
.left-header { align-self: start; margin-top: 4vh; }
.right-header { justify-self: end; text-align: right; margin-right: 5vw; }
.center-header { text-align: center; justify-self: center; margin-top: 2vh; }
.center-header h2 { max-width: 1120px; }

.claim-board {
  width: min(660px, 72vw);
  margin-top: 2vh;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid rgba(45,107,255,.65);
  background: linear-gradient(135deg, rgba(8,10,18,.86), rgba(45,107,255,.16));
  box-shadow: inset 0 0 0 1px rgba(242,233,216,.06), 0 30px 70px rgba(0,0,0,.45);
  transform: rotate(-3deg);
}

.claim-board::before {
  content: "[ premise accepted for argument ]";
  position: absolute;
  left: 24px;
  bottom: -34px;
  font: 700 12px var(--mono);
  color: var(--chalk-lavender);
}

blockquote { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 5vw, 5.8rem); line-height: .95; letter-spacing: -.04em; }
.speaker-label { color: var(--chalk-lavender); font-weight: 800; font-size: .78rem; }
.formula { margin-top: 24px; font-family: var(--mono); color: var(--evidence-ivory); text-transform: none; letter-spacing: .04em; }
.speaker-light { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--proposition-blue); box-shadow: 0 0 18px var(--proposition-blue); }
.active-speaker { animation: activeBorder 2.4s ease-in-out infinite; }

.scorekeeper-card {
  position: absolute;
  z-index: 7;
  padding: 16px 18px;
  min-width: 132px;
  color: var(--chamber-black);
  background: var(--evidence-ivory);
  border: 2px solid var(--brass-gavel);
  font: 700 .75rem var(--condensed);
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 22px 45px rgba(0,0,0,.36);
}
.scorekeeper-card b { display: block; margin-top: 8px; font-family: var(--display); font-size: 1.55rem; letter-spacing: -.02em; color: var(--opposition-vermilion); }
.score-left { left: 9vw; bottom: 13vh; transform: rotate(7deg); }
.score-right { right: 11vw; bottom: 11vh; transform: rotate(-9deg); }

.domino-row { position: absolute; left: 44vw; top: 52vh; display: flex; gap: 14px; transform: rotate(-13deg); z-index: 6; }
.domino-row span { width: 24px; height: 76px; background: var(--evidence-ivory); border: 2px solid var(--chamber-black); box-shadow: 0 16px 20px rgba(0,0,0,.35); transform-origin: bottom center; transition: transform .5s ease; position: relative; }
.in-view .domino-row span:nth-child(1) { transform: rotate(0deg); }
.in-view .domino-row span:nth-child(2) { transform: rotate(13deg); transition-delay: .12s; }
.in-view .domino-row span:nth-child(3) { transform: rotate(25deg); transition-delay: .24s; }
.in-view .domino-row span:nth-child(4) { transform: rotate(38deg); transition-delay: .36s; }
.in-view .domino-row span:nth-child(5) { transform: rotate(50deg); transition-delay: .48s; }
.in-view .domino-row span:nth-child(6) { transform: rotate(62deg); transition-delay: .60s; }
.domino-row span::after { content: attr(data-note); position: absolute; top: -24px; left: -18px; font: 700 10px var(--mono); color: var(--brass-gavel); }

.folder {
  position: absolute;
  right: 12vw;
  bottom: 15vh;
  width: 230px;
  height: 150px;
  border: 1px solid rgba(242,233,216,.55);
  background: transparent;
  color: var(--chamber-black);
  padding: 0;
  cursor: pointer;
  perspective: 900px;
  transform: rotate(8deg);
}
.folder span { position: absolute; inset: 0; padding: 22px; display: grid; place-items: center; backface-visibility: hidden; transition: transform .55s ease; background: rgba(242,233,216,.90); font-family: var(--condensed); letter-spacing: .12em; text-transform: uppercase; }
.folder::before { content: ""; position: absolute; left: 18px; top: -18px; width: 86px; height: 18px; background: rgba(242,233,216,.92); border: 1px solid rgba(242,233,216,.55); border-bottom: 0; }
.folder-back { transform: rotateY(180deg); color: var(--evidence-ivory); background: rgba(45,107,255,.92) !important; font-family: var(--serif) !important; text-transform: none !important; letter-spacing: 0 !important; }
.folder.flipped .folder-front { transform: rotateY(180deg); }
.folder.flipped .folder-back { transform: rotateY(360deg); }

.transcript-wall { position: relative; display: grid; gap: 28px; width: min(1020px, 84vw); margin: 0 auto; }
.quote-card { width: min(520px, 80vw); padding: 28px; background: rgba(8,10,18,.72); border: 1px solid rgba(242,233,216,.20); box-shadow: 0 24px 55px rgba(0,0,0,.35); transition: transform .35s ease, border-color .35s ease; }
.quote-card p:not(.speaker-label) { font-size: 1.1rem; color: rgba(242,233,216,.78); }
.prop-quote { justify-self: start; border-left: 6px solid var(--proposition-blue); transform: rotate(-2deg); }
.opp-quote { justify-self: end; border-right: 6px solid var(--opposition-vermilion); transform: rotate(2deg); }
.lavender-quote { justify-self: center; border-top: 6px solid var(--chalk-lavender); transform: rotate(-1deg); }
.quote-card.hot { transform: translateY(-10px) rotate(0deg) scale(1.02); border-color: var(--brass-gavel); }
.argument-hot .interrupt { stroke-dashoffset: 0; stroke-width: 7; }
.argument-hot .objection-chip { animation: interruptionFlash .72s ease both; }

.objection-chip { position: absolute; right: 18vw; top: 24vh; padding: 10px 14px; color: var(--evidence-ivory); background: var(--opposition-vermilion); transform: rotate(11deg); box-shadow: 0 0 24px rgba(255,75,54,.45); }
.objection-chip::after { content: ""; position: absolute; left: -58px; top: 50%; width: 48px; height: 2px; background: var(--opposition-vermilion); transform: rotate(-18deg); box-shadow: 0 0 16px rgba(255,75,54,.75); }
.bracket { position: absolute; font-family: var(--display); font-size: clamp(9rem, 20vw, 18rem); color: rgba(242,233,216,.10); top: 30vh; }
.bracket-left { left: 7vw; }
.bracket-right { right: 7vw; }

.consequence-board {
  position: relative;
  width: min(980px, 86vw);
  height: min(560px, 58vh);
  margin: 4vh auto 0;
  border: 1px solid rgba(201,154,62,.54);
  background:
    linear-gradient(90deg, rgba(242,233,216,.04) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(0deg, rgba(242,233,216,.04) 1px, transparent 1px) 0 0 / 52px 52px,
    rgba(8,10,18,.76);
  box-shadow: inset 0 0 80px rgba(201,154,62,.08), 0 30px 80px rgba(0,0,0,.42);
}
.board-stamp { position: absolute; left: 24px; top: 22px; color: rgba(201,154,62,.72); font: 700 .72rem var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.verdict-fragment { position: absolute; padding: 12px 18px; font: 800 1rem var(--condensed); letter-spacing: .14em; text-transform: uppercase; background: rgba(8,10,18,.9); }
.blue-fragment { left: 7%; top: 18%; color: var(--proposition-blue); border: 1px solid var(--proposition-blue); }
.red-fragment { right: 7%; top: 20%; color: var(--opposition-vermilion); border: 1px solid var(--opposition-vermilion); }
.ivory-fragment { left: 40%; bottom: 13%; color: var(--evidence-ivory); border: 1px solid var(--evidence-ivory); }
.lavender-fragment { left: 28%; bottom: 17%; color: var(--chalk-lavender); border: 1px solid var(--chalk-lavender); font-size: 2.2rem; padding: 2px 18px; }
.board-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.seal-final { position: absolute; right: 28px; bottom: 26px; width: 150px; height: 46px; font-size: .74rem; }
.closing-note { max-width: 720px; margin: 26px auto 0; text-align: center; color: rgba(242,233,216,.72); line-height: 1.7; }

@keyframes activeBorder {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(242,233,216,.06), 0 0 0 rgba(45,107,255,0), 0 30px 70px rgba(0,0,0,.45); }
  50% { box-shadow: inset 0 0 0 1px rgba(242,233,216,.16), 0 0 35px rgba(45,107,255,.35), 0 30px 70px rgba(0,0,0,.45); }
}

@keyframes interruptionFlash {
  0% { transform: rotate(11deg) scale(.92); }
  42% { transform: rotate(4deg) scale(1.08); }
  100% { transform: rotate(11deg) scale(1); }
}

@media (max-width: 780px) {
  .scene { padding: 34px 22px 82px; }
  .order-rail { right: 10px; }
  h1 { font-size: 20vw; }
  h2 { font-size: 13vw; }
  .right-header { text-align: left; justify-self: start; margin-right: 0; }
  .domino-row { left: 18vw; top: 68vh; transform: rotate(-9deg) scale(.72); }
  .folder { right: 8vw; bottom: 7vh; transform: rotate(4deg) scale(.82); }
  .scorekeeper-card { display: none; }
  .quote-card { width: 84vw; }
  .consequence-board { width: 92vw; height: 62vh; }
}