:root {
  --black: #08070B;
  --silver: #B8BCC8;
  --violet: #3B1B5A;
  --blue: #2547FF;
  --gold: #D7A33D;
  --green: #073B3A;
  --red: #FF4A32;
  --cream: #F4EBDD;
  --serif: "Instrument Serif", serif;
  --syne: "Syne", sans-serif;
  --grotesque: "Bricolage Grotesque", sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --mx: 50vw;
  --my: 50vh;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--black);
  color: var(--cream);
  font-family: var(--grotesque);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(215, 163, 61, 0.20), transparent 18rem),
    repeating-linear-gradient(90deg, rgba(244, 235, 221, 0.025) 0 1px, transparent 1px 12vw),
    linear-gradient(rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.12));
  mix-blend-mode: screen;
}

.cursor-gel {
  position: fixed;
  width: 18rem;
  height: 18rem;
  margin: -9rem 0 0 -9rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 71, 255, 0.24), rgba(59, 27, 90, 0.12) 45%, transparent 70%);
  pointer-events: none;
  z-index: 20;
  transform: translate3d(var(--mx), var(--my), 0);
}

.scroll-meter {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 40;
  background: rgba(184, 188, 200, 0.12);
}

.scroll-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--gold), var(--red));
}

.stage-nav {
  position: fixed;
  top: 1.35rem;
  right: 1.35rem;
  z-index: 35;
  display: flex;
  gap: .45rem;
  font-family: var(--syne);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.stage-nav a {
  color: var(--silver);
  text-decoration: none;
  border: 1px solid rgba(184, 188, 200, .28);
  background: rgba(8, 7, 11, .52);
  padding: .55rem .7rem;
  transform: skewX(-8deg);
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}

.stage-nav a:hover { color: var(--cream); border-color: var(--gold); background: rgba(59, 27, 90, .55); }

.scene {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid rgba(184, 188, 200, .14);
}

.scene::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34vh;
  background:
    linear-gradient(172deg, transparent 0 38%, rgba(184, 188, 200, .10) 39% 40%, transparent 41%),
    repeating-linear-gradient(8deg, transparent 0 5.8rem, rgba(244, 235, 221, .08) 5.8rem 6rem);
  transform: perspective(45rem) rotateX(64deg) translateY(44%);
  transform-origin: bottom;
  z-index: -1;
}

.opening {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 12%, rgba(59, 27, 90, .88), transparent 33rem),
    radial-gradient(circle at 18% 82%, rgba(7, 59, 58, .72), transparent 28rem),
    var(--black);
}

.stage-haze {
  position: absolute;
  inset: 10vh 8vw;
  background: radial-gradient(ellipse at center, rgba(244, 235, 221, .12), transparent 58%);
  filter: blur(18px);
}

.rigging {
  position: absolute;
  top: -6vh;
  width: 1px;
  height: 62vh;
  background: linear-gradient(var(--silver), transparent);
  opacity: .32;
}

.rigging-a { left: 31%; transform: rotate(-4deg); }
.rigging-b { right: 29%; transform: rotate(6deg); }

.hanging-frame {
  position: absolute;
  border: 2px solid var(--silver);
  box-shadow: 0 0 0 1.1rem rgba(8, 7, 11, .48), 0 0 4rem rgba(37, 71, 255, .18);
  transform-style: preserve-3d;
  transition: transform .5s ease-out;
}

.hanging-frame::before,
.hanging-frame::after {
  content: "";
  position: absolute;
  top: -32vh;
  width: 1px;
  height: 32vh;
  background: rgba(184, 188, 200, .45);
}

.hanging-frame::before { left: 14%; }
.hanging-frame::after { right: 14%; }

.frame-one { width: 54vw; height: 38vh; border-color: var(--gold); transform: rotate(-7deg) translate(-5vw, -2vh); }
.frame-two { width: 42vw; height: 54vh; border-color: var(--blue); transform: rotate(8deg) translate(8vw, 1vh); }
.frame-three { width: 66vw; height: 30vh; border-color: var(--red); transform: rotate(2deg) translate(0, 8vh); opacity: .68; }

.projection-word {
  position: relative;
  z-index: 3;
  font-family: var(--serif);
  font-size: clamp(4.5rem, 14vw, 15rem);
  line-height: .76;
  letter-spacing: -.065em;
  color: var(--cream);
  text-shadow: 0 0 2rem rgba(244, 235, 221, .35), 1.2rem .9rem 0 rgba(37, 71, 255, .16), -1rem -.6rem 0 rgba(255, 74, 50, .18);
}

.projection-word em { color: var(--gold); font-style: italic; }

.stage-direction {
  position: absolute;
  left: 8vw;
  bottom: 10vh;
  width: min(26rem, 75vw);
  margin: 0;
  color: var(--silver);
  font-family: var(--syne);
  font-size: clamp(1rem, 2vw, 1.55rem);
  line-height: 1.15;
  text-transform: lowercase;
}

.floor-mark {
  position: absolute;
  left: 52%;
  bottom: 13vh;
  width: 5.5rem;
  height: 5.5rem;
  border: 0;
  color: var(--black);
  background: transparent;
  cursor: grab;
  transform: rotate(-8deg);
}

.floor-mark span,
.floor-mark::before,
.floor-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7rem;
  height: .95rem;
  background: var(--gold);
  box-shadow: 0 .2rem .8rem rgba(215, 163, 61, .28);
}

.floor-mark::before { transform: translate(-50%, -50%) rotate(45deg); }
.floor-mark::after { transform: translate(-50%, -50%) rotate(-45deg); }
.floor-mark span { transform: translate(-50%, -50%) rotate(0deg); opacity: .18; }
.floor-mark strong { position: relative; z-index: 2; font-family: var(--syne); font-size: 1rem; }

.tape-arrow {
  position: absolute;
  bottom: 26vh;
  padding: .4rem .9rem;
  color: var(--black);
  background: var(--cream);
  font-family: var(--syne);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.arrow-left { left: 18vw; transform: rotate(11deg); }
.arrow-right { right: 13vw; transform: rotate(-16deg); background: var(--red); color: var(--cream); }

.scene-label {
  position: absolute;
  top: 8vh;
  left: 7vw;
  color: var(--gold);
  font-family: var(--syne);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .22em;
}

.scene-plan {
  background:
    linear-gradient(90deg, rgba(37, 71, 255, .16), transparent 42%),
    radial-gradient(circle at 82% 28%, rgba(215, 163, 61, .16), transparent 24rem),
    var(--black);
}

.tilted-script {
  position: absolute;
  color: var(--cream);
  padding: clamp(1.4rem, 3vw, 3rem);
  border: 1px solid rgba(244, 235, 221, .2);
  background: rgba(8, 7, 11, .58);
  backdrop-filter: blur(3px);
}

.script-a { left: 11vw; top: 18vh; width: min(44rem, 62vw); transform: rotate(-3.5deg); }
.script-b { right: 8vw; top: 18vh; width: min(37rem, 54vw); transform: rotate(4deg); }

.tilted-script h1,
.tilted-script h2,
.closing-script h2 {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-size: clamp(3rem, 7vw, 7.8rem);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.035em;
}

.script-b h2 { font-style: italic; color: var(--F4EBDD, #F4EBDD); }

.tilted-script p,
.closing-script p,
.prop-note p {
  margin: 0;
  color: var(--silver);
  font-size: clamp(1rem, 1.45vw, 1.25rem);
  line-height: 1.45;
}

.prop-note {
  position: absolute;
  right: 10vw;
  bottom: 14vh;
  width: min(23rem, 36vw);
  padding: 1.4rem;
  color: var(--black);
  background: var(--gold);
  transform: rotate(5deg);
  box-shadow: 1.1rem 1rem 0 rgba(255, 74, 50, .45);
}

.prop-note span {
  display: block;
  margin-bottom: .7rem;
  font-family: var(--syne);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.prop-note p { color: var(--black); }

.blocking-map {
  position: absolute;
  left: 6vw;
  bottom: 6vh;
  width: 44vw;
  height: 36vh;
  opacity: .82;
}

.orbit {
  position: absolute;
  border: 1px dashed rgba(244, 235, 221, .48);
  border-radius: 50%;
}
.orbit-one { inset: 16% 18%; transform: rotate(-14deg); }
.orbit-two { inset: 4% 34% 9% 6%; transform: rotate(29deg); border-color: rgba(37, 71, 255, .75); }
.chalk-line { position: absolute; height: 2px; background: rgba(244, 235, 221, .62); transform-origin: left center; }
.line-one { width: 74%; left: 8%; top: 58%; transform: rotate(-17deg); }
.line-two { width: 48%; left: 31%; top: 31%; transform: rotate(38deg); background: rgba(255, 74, 50, .72); }
.xmark { position: absolute; color: var(--cream); font: 4rem/1 var(--syne); }
.x-one { left: 9%; top: 46%; color: var(--gold); }
.x-two { right: 20%; top: 16%; color: var(--red); }
.x-three { right: 8%; bottom: 8%; color: var(--blue); }

.sliding-flat {
  position: absolute;
  height: 42vh;
  width: 18vw;
  border: 1px solid rgba(244, 235, 221, .2);
  transition: transform .45s ease-out;
}
.flat-blue { right: 18vw; top: 21vh; background: rgba(37, 71, 255, .22); transform: skewY(-11deg); }
.flat-gold { right: 5vw; top: 35vh; background: rgba(215, 163, 61, .2); transform: skewY(8deg); }

.lens-room {
  background:
    radial-gradient(circle at 22% 48%, rgba(37, 71, 255, .24), transparent 28rem),
    radial-gradient(circle at 64% 74%, rgba(255, 74, 50, .16), transparent 22rem),
    linear-gradient(135deg, var(--black), #11101a 58%, var(--green));
}

.lens-machine {
  position: absolute;
  left: 8vw;
  top: 21vh;
  width: min(39rem, 48vw);
  height: min(39rem, 48vw);
  transition: transform .5s ease-out;
}

.fresnel {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 1.25rem, rgba(184, 188, 200, .45) 1.35rem 1.45rem), radial-gradient(circle, rgba(244, 235, 221, .1), transparent 55%);
  border: 1px solid rgba(184, 188, 200, .48);
  animation: slowSpin 26s linear infinite;
}

.prism {
  position: absolute;
  inset: 23% 28% 28% 25%;
  clip-path: polygon(50% 0, 100% 86%, 0 70%);
  background: linear-gradient(135deg, rgba(37, 71, 255, .55), rgba(244, 235, 221, .08), rgba(255, 74, 50, .5));
  box-shadow: 0 0 3rem rgba(37, 71, 255, .28);
}

.mirror-slit {
  position: absolute;
  left: 12%;
  top: 45%;
  width: 84%;
  height: .8rem;
  background: var(--silver);
  transform: rotate(-23deg);
  box-shadow: 0 0 2rem rgba(244, 235, 221, .42);
}

.gel-swatch {
  position: absolute;
  width: 5.8rem;
  height: 8rem;
  border: 1px solid rgba(244, 235, 221, .34);
  mix-blend-mode: screen;
}
.swatch-blue { right: 4%; top: 7%; background: rgba(37, 71, 255, .46); transform: rotate(12deg); }
.swatch-red { left: 0; bottom: 12%; background: rgba(255, 74, 50, .42); transform: rotate(-16deg); }
.swatch-gold { right: 18%; bottom: 1%; background: rgba(215, 163, 61, .48); transform: rotate(5deg); }

.cue-stack {
  position: absolute;
  right: 8vw;
  bottom: 10vh;
  width: min(34rem, 50vw);
  display: grid;
  gap: .8rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--syne);
}

.cue-stack li {
  padding: 1rem 1.2rem;
  color: var(--cream);
  border: 1px solid rgba(184, 188, 200, .25);
  background: rgba(8, 7, 11, .64);
  cursor: pointer;
  transform: translateX(calc(var(--offset, 0) * 1rem));
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.cue-stack li:nth-child(2) { --offset: 1.5; }
.cue-stack li:nth-child(3) { --offset: -.7; }
.cue-stack li.is-lit { transform: translateX(0) rotate(-1deg); border-color: var(--gold); background: rgba(59, 27, 90, .78); }
.cue-stack span { display: inline-block; min-width: 5.2rem; color: var(--gold); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }

.time-set {
  background:
    radial-gradient(circle at 75% 24%, rgba(215, 163, 61, .20), transparent 25rem),
    linear-gradient(180deg, #0e0a16, var(--black));
}

.clock-props {
  position: absolute;
  inset: 8vh 5vw auto auto;
  width: 60vw;
  height: 56vh;
}

.clock {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(244, 235, 221, .44);
  background: radial-gradient(circle, transparent 0 55%, rgba(184, 188, 200, .13) 56% 58%, transparent 59%);
  box-shadow: inset 0 0 2rem rgba(184, 188, 200, .07), 0 0 3rem rgba(37, 71, 255, .13);
}
.clock span { position: absolute; left: 50%; top: 50%; width: 38%; height: 2px; background: var(--red); transform-origin: left center; animation: handSweep 11s linear infinite; }
.clock::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed rgba(215, 163, 61, .45); }
.clock-a { width: 22rem; height: 22rem; left: 6%; top: 12%; }
.clock-b { width: 15rem; height: 15rem; right: 17%; top: 1%; transform: rotate(12deg); }
.clock-c { width: 12rem; height: 12rem; right: 9%; bottom: 6%; transform: rotate(-18deg); }
.clock-b span { animation-duration: 7s; background: var(--blue); }
.clock-c span { animation-duration: 15s; background: var(--gold); }

.closing-script {
  position: absolute;
  left: 8vw;
  bottom: 13vh;
  width: min(48rem, 70vw);
}

.film-leader {
  position: absolute;
  right: 6vw;
  bottom: 7vh;
  display: flex;
  gap: .35rem;
  transform: rotate(90deg);
  transform-origin: center;
  color: var(--black);
}

.film-leader span {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 5rem;
  background: var(--cream);
  font-family: var(--serif);
  font-size: 2.5rem;
  border-left: .45rem dotted var(--black);
  border-right: .45rem dotted var(--black);
}

.timecode-detail {
  position: absolute;
  right: 7vw;
  top: 15vh;
  width: 16rem;
  color: rgba(184, 188, 200, .58);
  font-family: var(--mono);
  font-size: .56rem;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: rotate(4deg);
}

.final-mark {
  position: absolute;
  left: 8vw;
  top: 15vh;
  color: var(--gold);
  font-family: var(--syne);
  font-size: .82rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.scene.is-active .tilted-script,
.scene.is-active .closing-script { animation: cueIn .9s ease both; }

@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes handSweep { to { transform: rotate(360deg); } }
@keyframes cueIn { from { opacity: .35; transform: translateY(2rem) rotate(var(--cue-rotate, -2deg)); } to { opacity: 1; } }

@media (max-width: 760px) {
  .stage-nav { left: .8rem; right: .8rem; justify-content: space-between; font-size: .62rem; }
  .stage-nav a { padding: .45rem .48rem; }
  .projection-word { font-size: clamp(4rem, 21vw, 8rem); }
  .frame-one, .frame-two, .frame-three { width: 78vw; }
  .script-a, .script-b, .closing-script { left: 6vw; right: auto; width: 88vw; top: 17vh; transform: rotate(-2deg); }
  .prop-note { right: 6vw; bottom: 8vh; width: 70vw; }
  .blocking-map { width: 88vw; left: 6vw; bottom: 4vh; opacity: .35; }
  .sliding-flat { width: 28vw; opacity: .55; }
  .lens-machine { left: 6vw; top: 42vh; width: 82vw; height: 82vw; opacity: .65; }
  .cue-stack { left: 6vw; right: auto; width: 88vw; bottom: 6vh; }
  .clock-props { width: 90vw; right: -10vw; opacity: .55; }
  .clock-a { width: 16rem; height: 16rem; }
  .film-leader { display: none; }
}