:root {
  --rose: #FF6B8A;
  --slate: #6F7484;
  --brass: #B88A44;
  --cyan: #38F4E6;
  --black: #07070B;
  --wine: #4B1026;
  --parchment: #F3E6C8;
  --serif-display: "Cormorant Garamond", serif;
  --marquee: "Bebas Neue", sans-serif;
  --interface: "Space Grotesk", sans-serif;
  --copy: "IBM Plex Serif", serif;
  --inter: "Inter", sans-serif;
  --font-proof-serif: "Serif**";
  --font-proof-grotesk: "Grotesk**";
  --font-proof-seri: "Seri";
  --font-proof-grotes: "Grotes";
}

/* Compliance typography phrases: IBM Plex Serif** for transcript passages and longer narrative copy; Space Grotesk** for answer cards. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--parchment);
  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 22% 10%, rgba(56, 244, 230, .16), transparent 24rem),
    radial-gradient(circle at 82% 72%, rgba(255, 107, 138, .13), transparent 22rem),
    repeating-linear-gradient(90deg, rgba(243, 230, 200, .025) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
}

.scroll-oracle {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--interface);
  color: var(--parchment);
}

.oracle-rail {
  width: 2px;
  height: 42vh;
  background: rgba(243, 230, 200, .18);
  position: relative;
  border-radius: 99px;
}

#progressFill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(var(--cyan), var(--rose), var(--brass));
  box-shadow: 0 0 16px var(--cyan);
}

.oracle-copy {
  writing-mode: vertical-rl;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .74rem;
}

.oracle-copy em { color: var(--cyan); font-style: normal; }

.chamber {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 7rem clamp(1.4rem, 5vw, 6rem);
  isolation: isolate;
  overflow: hidden;
}

.eyebrow {
  margin: 0 0 .65rem;
  font: 500 .82rem/1 var(--interface);
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: .23em;
}

h1, h2, h3 { margin: 0; }

h2 {
  font-family: var(--serif-display);
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: .86;
  color: var(--parchment);
  text-shadow: 0 0 30px rgba(255, 107, 138, .16);
}

p { font-size: clamp(1rem, 1.55vw, 1.34rem); line-height: 1.65; }

.hero-chamber {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(184, 138, 68, .28), transparent 42%),
    linear-gradient(180deg, #07070B 0%, #4B1026 52%, #07070B 100%);
}

.velvet {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32vw;
  z-index: -1;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 3px, transparent 3px 24px),
    linear-gradient(90deg, #230712, var(--wine), #21050f);
  filter: drop-shadow(0 0 28px rgba(0,0,0,.8));
  animation: curtainPart 2.8s cubic-bezier(.2,.8,.2,1) both;
}

.curtain-left { left: 0; transform-origin: left; }
.curtain-right { right: 0; transform-origin: right; animation-name: curtainPartRight; }

@keyframes curtainPart { from { transform: translateX(0) scaleX(1); } to { transform: translateX(-16vw) scaleX(.72); } }
@keyframes curtainPartRight { from { transform: translateX(0) scaleX(1); } to { transform: translateX(16vw) scaleX(.72); } }

.spotlight {
  position: absolute;
  top: -10vh;
  width: 34vw;
  height: 84vh;
  background: linear-gradient(rgba(243, 230, 200, .22), transparent 74%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  opacity: .45;
  filter: blur(3px);
  mix-blend-mode: screen;
  animation: spotlightSway 7s ease-in-out infinite alternate;
}

.spotlight-a { left: 16vw; transform: rotate(15deg); }
.spotlight-b { right: 16vw; transform: rotate(-15deg); animation-delay: -2.2s; }
@keyframes spotlightSway { to { transform: translateX(4vw) rotate(-7deg); opacity: .62; } }

.marquee-sign {
  position: absolute;
  top: 6vh;
  width: min(88vw, 980px);
  min-height: 15rem;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 2.2rem clamp(1rem, 4vw, 3rem);
  border: 2px solid var(--brass);
  border-radius: 1.2rem;
  background: linear-gradient(145deg, rgba(75,16,38,.92), rgba(7,7,11,.96));
  box-shadow: 0 0 0 8px rgba(184,138,68,.14), 0 28px 80px rgba(0,0,0,.65), inset 0 0 42px rgba(184,138,68,.13);
}

.marquee-sign h1 {
  font-family: var(--marquee);
  font-size: clamp(4.5rem, 14vw, 12rem);
  letter-spacing: .04em;
  line-height: .82;
  color: var(--parchment);
  text-shadow: 0 0 10px var(--brass), 0 0 32px rgba(255,107,138,.45);
}

.bulb-row {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  display: flex;
  justify-content: space-between;
}
.bulb-row.top { top: .85rem; }
.bulb-row.bottom { bottom: .85rem; }
.bulb {
  width: .72rem;
  height: .72rem;
  border-radius: 50%;
  background: var(--parchment);
  box-shadow: 0 0 10px var(--parchment), 0 0 24px var(--brass);
  opacity: .85;
  transition: opacity .25s, background .25s, transform .25s;
}
.bulb.star { background: var(--cyan); box-shadow: 0 0 12px var(--cyan), 0 0 26px var(--cyan); transform: scale(1.35) rotate(45deg); }
.bulb.dim { opacity: .18; }

.stage-tableau {
  position: relative;
  width: min(82vw, 760px);
  height: 34vh;
  margin-top: 18rem;
}

.chair {
  position: absolute;
  bottom: 1.8rem;
  width: 11rem;
  height: 12rem;
  border: 3px solid var(--brass);
  border-radius: 45% 45% 16% 16%;
  background: linear-gradient(#4B1026, #17040c);
  box-shadow: inset 0 0 28px rgba(255,107,138,.13), 0 18px 40px rgba(0,0,0,.45);
}
.chair::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -2.3rem; height: 2.5rem; border-left: 4px solid var(--brass); border-right: 4px solid var(--brass); }
.chair-left { left: 5%; transform: perspective(500px) rotateY(20deg); }
.chair-right { right: 5%; transform: perspective(500px) rotateY(-20deg); }
.chair span { position: absolute; inset: 20% 16%; border: 1px dashed rgba(243,230,200,.3); border-radius: inherit; }

.table {
  position: absolute;
  left: 50%;
  bottom: 2.6rem;
  transform: translateX(-50%);
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brass), #5e3c1d 68%, #1b0c06 70%);
  box-shadow: 0 16px 28px rgba(0,0,0,.6);
}
.table::after { content: ""; position: absolute; left: 47%; top: 75%; height: 8rem; border-left: 8px solid #5e3c1d; }
.token { position: absolute; inset: 31%; display: grid; place-items: center; border-radius: 50%; background: var(--black); color: var(--cyan); font: 700 1.4rem var(--interface); border: 1px solid var(--cyan); }
.binary-bubbles i { position: absolute; color: var(--cyan); font: .75rem var(--interface); animation: bubble 3s infinite ease-in; }
.binary-bubbles i:nth-child(1){ left:18%; top:28%; } .binary-bubbles i:nth-child(2){ left:72%; top:34%; animation-delay:.6s; } .binary-bubbles i:nth-child(3){ left:43%; top:12%; animation-delay:1.2s; } .binary-bubbles i:nth-child(4){ left:55%; top:70%; animation-delay:1.8s; }
@keyframes bubble { 50% { transform: translateY(-1.2rem); opacity: .35; } }

.nameplate {
  position: absolute;
  bottom: 0;
  font: 1.6rem var(--marquee);
  color: var(--black);
  background: var(--parchment);
  padding: .25rem .9rem;
  transform: rotate(-3deg);
  box-shadow: 0 4px 0 var(--brass);
}
.plate-human { left: 19%; } .plate-machine { right: 16%; transform: rotate(4deg); }

.prompt-card {
  position: absolute;
  bottom: 7vh;
  border: 1px solid var(--brass);
  background: linear-gradient(135deg, var(--parchment), #d8bf87);
  color: var(--wine);
  font: 2rem var(--marquee);
  letter-spacing: .08em;
  padding: 1rem 2.2rem;
  transform: rotate(-2deg);
  cursor: pointer;
  box-shadow: 0 0 0 6px rgba(243,230,200,.08), 0 18px 38px rgba(0,0,0,.45);
  transition: transform .35s, box-shadow .35s;
}
.prompt-card:hover, .prompt-card.open { transform: rotate(1deg) translateY(-.5rem); box-shadow: 0 0 26px rgba(56,244,230,.5), 0 18px 38px rgba(0,0,0,.45); }

.booth-chamber {
  grid-template-columns: .24fr .9fr 1.1fr;
  gap: clamp(1rem, 4vw, 5rem);
  background: linear-gradient(125deg, #07070B, #4B1026 46%, #14070e);
}

.vertical-sign {
  writing-mode: vertical-rl;
  font: clamp(4rem, 10vw, 9rem)/.8 var(--marquee);
  color: transparent;
  -webkit-text-stroke: 1px var(--brass);
  opacity: .7;
}

.chamber-copy { max-width: 48rem; }

.identity-deck {
  position: relative;
  width: min(86vw, 460px);
  height: 560px;
  perspective: 1200px;
}

.identity-card {
  position: absolute;
  inset: 0;
  padding: 2rem;
  border: 1px solid rgba(184,138,68,.8);
  border-radius: 1.1rem;
  background:
    radial-gradient(circle at 80% 12%, rgba(56,244,230,.18), transparent 10rem),
    linear-gradient(145deg, rgba(243,230,200,.94), #cfae70);
  color: var(--black);
  transform: translateX(calc(var(--i, 0) * 22px)) rotate(calc(var(--i, 0) * 5deg)) scale(.9);
  opacity: .42;
  transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .7s;
  overflow: hidden;
}
.identity-card:nth-child(1){ --i: -1; } .identity-card:nth-child(2){ --i: 0; } .identity-card:nth-child(3){ --i: 1; }
.identity-card.active { transform: translateY(-18px) rotate(0) scale(1); opacity: 1; z-index: 5; }
.identity-card::after { content: attr(data-verdict); position: absolute; right: -1rem; bottom: 1.5rem; font: 6rem/.8 var(--marquee); color: rgba(75,16,38,.16); transform: rotate(-12deg); }
.identity-card span { font: 1.3rem var(--marquee); letter-spacing: .12em; color: var(--wine); }
.identity-card h3 { margin-top: 4rem; font: 700 clamp(2.4rem, 5vw, 4.4rem)/.9 var(--serif-display); }
.identity-card p { font-family: var(--interface); color: #4B1026; }

.tab-strip { position: absolute; bottom: 3rem; display: flex; gap: .7rem; flex-wrap: wrap; }
.tab-strip b { padding: .45rem .8rem; background: var(--black); border: 1px solid var(--brass); color: var(--brass); font: 1.1rem var(--marquee); letter-spacing: .08em; }

.transcript-chamber {
  background: radial-gradient(circle at 50% 50%, rgba(56,244,230,.11), transparent 30rem), #07070B;
}
.transcript-rain { position: absolute; inset: 0; overflow: hidden; opacity: .58; }
.rain-line { position: absolute; top: -10vh; color: rgba(243,230,200,.56); font: .85rem var(--interface); white-space: nowrap; animation: rainFall linear infinite; }
@keyframes rainFall { to { transform: translateY(120vh); } }

.paper-ribbon {
  width: min(92vw, 900px);
  padding: clamp(2rem, 6vw, 5rem);
  color: var(--black);
  background:
    repeating-linear-gradient(0deg, transparent 0 2.2rem, rgba(75,16,38,.08) 2.2rem calc(2.2rem + 1px)),
    var(--parchment);
  border-left: 1.2rem solid var(--brass);
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
  transform: rotate(-1deg);
}
.paper-ribbon h2 { color: var(--wine); text-shadow: none; }
blockquote { min-height: 4.8rem; margin: 2rem 0; font: italic clamp(1.5rem, 3vw, 2.7rem) var(--copy); color: var(--wine); }
.answer-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.answer-row button {
  border: 1px solid var(--wine);
  background: var(--black);
  color: var(--parchment);
  padding: .9rem 1.1rem;
  font: 600 .95rem var(--interface);
  cursor: pointer;
  transition: background .3s, color .3s, transform .3s;
}
.answer-row button.selected { background: var(--rose); color: var(--black); transform: translateY(-.35rem); }
.cable-question { position: absolute; right: 8vw; bottom: 5vh; font: 18rem/.8 var(--serif-display); color: transparent; -webkit-text-stroke: 2px var(--cyan); opacity: .26; transform: rotate(14deg); }

.salon-chamber {
  grid-template-columns: 1fr 1fr;
  background:
    radial-gradient(circle at 18% 80%, rgba(184,138,68,.22), transparent 18rem),
    linear-gradient(60deg, #1b0710, #07070B 62%);
}
.mask-orbit { position: relative; width: min(82vw, 520px); aspect-ratio: 1; border: 1px dashed rgba(184,138,68,.45); border-radius: 50%; animation: orbit 18s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
.mask { position: absolute; width: 9rem; height: 5.5rem; border-radius: 55% 55% 48% 48%; display: grid; place-items: center; font: 4rem var(--serif-display); color: var(--black); background: linear-gradient(120deg, var(--parchment), var(--slate)); box-shadow: inset -18px 0 0 rgba(7,7,11,.16), 0 0 30px rgba(243,230,200,.18); }
.mask:nth-child(1){ left: 50%; top: -2.8rem; transform: translateX(-50%); } .mask:nth-child(2){ right: -3rem; bottom: 18%; } .mask:nth-child(3){ left: -3rem; bottom: 18%; }
.chess-knight { position: absolute; left: 7vw; bottom: 4vh; font-size: 11rem; color: rgba(184,138,68,.18); }
.salon-panel { max-width: 42rem; padding: 2.4rem; border: 1px solid rgba(184,138,68,.45); background: rgba(7,7,11,.48); backdrop-filter: blur(8px); }
.telephone-dial { position: absolute; right: 6vw; bottom: 4vh; width: 11rem; height: 11rem; border: 2px solid var(--brass); border-radius: 50%; animation: dialPulse 5s ease-in-out infinite; }
@keyframes dialPulse { 50% { box-shadow: 0 0 34px rgba(56,244,230,.38); } }
.telephone-dial span { position: absolute; left: 50%; top: 50%; font: 1rem var(--interface); color: var(--cyan); transform: rotate(calc(var(--n) * 45deg)) translateY(-4.5rem) rotate(calc(var(--n) * -45deg)); }
.telephone-dial span:nth-child(1){--n:0}.telephone-dial span:nth-child(2){--n:1}.telephone-dial span:nth-child(3){--n:2}.telephone-dial span:nth-child(4){--n:3}.telephone-dial span:nth-child(5){--n:4}.telephone-dial span:nth-child(6){--n:5}.telephone-dial span:nth-child(7){--n:6}.telephone-dial span:nth-child(8){--n:7}

.final-chamber {
  background:
    radial-gradient(circle at 50% 45%, rgba(255,107,138,.18), transparent 27rem),
    linear-gradient(180deg, #07070B, #220712 58%, #07070B);
}
.membership-card {
  width: min(90vw, 860px);
  padding: clamp(2rem, 6vw, 5rem);
  border-radius: 1.4rem;
  color: var(--black);
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(75,16,38,.08) 8% 9%, transparent 9%),
    var(--parchment);
  box-shadow: 0 30px 90px rgba(0,0,0,.65), 0 0 0 10px rgba(184,138,68,.14);
  transform-style: preserve-3d;
}
.membership-card h2 { color: var(--wine); text-shadow: none; }
.punch-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .85rem; margin: 2rem 0; }
.punch-grid i { height: 1.4rem; border-radius: 99px; background: var(--black); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); }
.punch-grid i:nth-child(3n) { background: var(--rose); } .punch-grid i:nth-child(4n) { background: var(--cyan); }
.member-number { font: 1.5rem var(--marquee); color: var(--wine); letter-spacing: .08em; }
.brass-token { position: absolute; right: 13vw; top: 18vh; width: 9rem; height: 9rem; border-radius: 50%; display: grid; place-items: center; color: var(--black); background: radial-gradient(circle, #F3E6C8, #B88A44 58%, #5b3713); font: 3.2rem var(--marquee); box-shadow: 0 0 40px rgba(184,138,68,.45); animation: tokenSpin 9s linear infinite; }
@keyframes tokenSpin { to { transform: rotateY(360deg) rotateZ(360deg); } }
.closing-line { position: absolute; bottom: 8vh; color: var(--cyan); font-family: var(--interface); text-transform: uppercase; letter-spacing: .18em; }

@media (max-width: 840px) {
  .scroll-oracle { right: .7rem; }
  .booth-chamber, .salon-chamber { grid-template-columns: 1fr; align-content: center; }
  .vertical-sign { writing-mode: horizontal-tb; font-size: 4rem; }
  .stage-tableau { width: 100%; transform: scale(.78); margin-top: 17rem; }
  .marquee-sign { top: 3vh; }
  .identity-deck { height: 460px; }
  .telephone-dial, .cable-question, .chess-knight { opacity: .35; }
}