:root {
  /* compliance text: Interaction based Grotesk** crisp labels only measurement ticks “focus lock” microcopy. */
  --cream: #FFF4D8;
  --cyan: #4DEBFF;
  --black: #070311;
  --green: #6CFFB8;
  --peach: #FFB17A;
  --magenta: #FF3DAE;
  --lavender: #C7A6FF;
  --violet: #120022;
  --lens-color: #4DEBFF;
  --focus-blur: 1.5px;
  --ring-scale: 1;
  --scanline-intensity: .24;
  --cursor-x: 0px;
  --cursor-y: 0px;
  --scroll-shift: 0px;
  --aperture-size: 54%;
  --ghost-offset: 11px;
}

* { box-sizing: border-box; }

html { background: var(--black); }

body {
  margin: 0;
  min-height: 500vh;
  color: var(--cream);
  font-family: "Fraunces", serif;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 61, 174, .18), transparent 34%),
    radial-gradient(circle at 78% 18%, rgba(77, 235, 255, .16), transparent 30%),
    linear-gradient(135deg, var(--black) 0%, var(--violet) 46%, var(--black) 100%);
  overflow-x: hidden;
}

.crt-field,
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.crt-field {
  background:
    radial-gradient(circle at calc(50% + var(--cursor-x)) calc(42% + var(--cursor-y)), rgba(199, 166, 255, .12), transparent 36%),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(7, 3, 17, .62) 100%);
  mix-blend-mode: screen;
}

.scanlines {
  opacity: var(--scanline-intensity);
  background: repeating-linear-gradient(0deg, rgba(255, 244, 216, .08) 0 1px, transparent 1px 5px);
}

.edge-calibration {
  position: fixed;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: grid;
  gap: 1rem;
  font: 700 .62rem "Space Mono", monospace;
  letter-spacing: .16em;
  color: rgba(255, 244, 216, .42);
}

.edge-calibration span {
  writing-mode: vertical-rl;
  transition: color .4s ease, text-shadow .4s ease, transform .4s ease;
}

.edge-calibration span.active {
  color: var(--cyan);
  text-shadow: 0 0 16px var(--cyan);
  transform: translateX(-5px);
}

.session {
  position: relative;
  min-height: 500vh;
}

.optical-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  transform: translateX(var(--scroll-shift));
  transition: background .8s ease;
}

.optical-stage::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    conic-gradient(from 210deg at 58% 50%, rgba(18, 0, 34, .4), rgba(255, 61, 174, .16), rgba(77, 235, 255, .14), rgba(108, 255, 184, .08), rgba(18, 0, 34, .44)),
    radial-gradient(circle at 50% 100%, rgba(255, 177, 122, .12), transparent 34%);
  filter: blur(12px) saturate(1.2);
  animation: vaporDrift 18s ease-in-out infinite alternate;
}

.checker-horizon {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -18%;
  height: 42%;
  background:
    linear-gradient(rgba(77, 235, 255, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 61, 174, .12) 1px, transparent 1px);
  background-size: 90px 42px;
  transform: perspective(420px) rotateX(66deg);
  opacity: .22;
  mask-image: linear-gradient(to top, black, transparent 75%);
}

.light-leak {
  position: absolute;
  border-radius: 999px;
  filter: blur(28px);
  mix-blend-mode: screen;
  opacity: .55;
}

.leak-one {
  width: 44vw;
  height: 13vw;
  left: -10vw;
  top: 16vh;
  background: linear-gradient(90deg, transparent, var(--magenta), var(--cyan), transparent);
  transform: rotate(-18deg);
}

.leak-two {
  width: 30vw;
  height: 18vw;
  right: -8vw;
  bottom: 10vh;
  background: radial-gradient(circle, var(--peach), transparent 70%);
}

.iris-system {
  position: absolute;
  left: 48%;
  top: 50%;
  width: min(82vw, 920px);
  aspect-ratio: 1;
  transform: translate(calc(-50% + var(--cursor-x) * .12), calc(-50% + var(--cursor-y) * .08)) scale(var(--ring-scale));
  transition: transform .18s ease-out;
}

.iris-halo,
.iris-ring,
.focus-wheel,
.aperture {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.iris-halo { border: 1px solid rgba(255, 244, 216, .15); }
.halo-a { inset: -9%; animation: ringSpin 32s linear infinite; box-shadow: 0 0 70px rgba(255, 61, 174, .22); }
.halo-b { inset: 8%; border-style: dashed; border-color: rgba(108, 255, 184, .3); animation: ringSpin 24s linear infinite reverse; }

.iris-ring {
  background:
    radial-gradient(circle, transparent 0 var(--aperture-size), rgba(7, 3, 17, .28) calc(var(--aperture-size) + 1%), rgba(7, 3, 17, .72) 70%),
    repeating-conic-gradient(from 0deg, rgba(77, 235, 255, .34) 0 5deg, rgba(255, 61, 174, .18) 5deg 10deg, rgba(199, 166, 255, .24) 10deg 15deg, rgba(7, 3, 17, .05) 15deg 22deg);
  filter: blur(var(--focus-blur));
  animation: irisBreathe 8s ease-in-out infinite, ringSpin 38s linear infinite;
  box-shadow: inset 0 0 70px var(--violet), 0 0 90px rgba(77, 235, 255, .22);
}

.focus-wheel {
  inset: 14%;
  border: 2px solid rgba(255, 244, 216, .18);
  background: repeating-conic-gradient(transparent 0 8deg, rgba(255, 244, 216, .24) 8deg 9deg, transparent 9deg 14deg);
  mask: radial-gradient(circle, transparent 0 62%, black 63% 66%, transparent 67%);
  animation: ringSpin 16s linear infinite reverse;
}

.aperture {
  inset: 19%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, rgba(255, 244, 216, .1), transparent 34%),
    radial-gradient(circle at 42% 45%, rgba(77, 235, 255, .22), transparent 40%),
    radial-gradient(circle at 58% 55%, rgba(255, 61, 174, .2), transparent 44%),
    var(--violet);
  box-shadow: inset 0 0 70px rgba(7, 3, 17, .92), 0 0 44px rgba(255, 61, 174, .22);
  overflow: hidden;
}

.portal-glow {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 216, .9), rgba(255, 177, 122, .16) 32%, transparent 65%);
  opacity: 0;
  transform: scale(.4);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.wordmark {
  position: relative;
  z-index: 3;
  margin: 0;
  font-family: "Bungee Shade", "Bungee Hairline", cursive;
  font-size: clamp(3.1rem, 8vw, 7.8rem);
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--cream);
  text-shadow: calc(var(--ghost-offset) * -1) 0 0 var(--magenta), var(--ghost-offset) 0 0 var(--cyan), 0 0 34px rgba(255, 244, 216, .6);
  transform: translate(calc(var(--cursor-x) * .03), calc(var(--cursor-y) * .02));
}

.wordmark.ghost {
  position: absolute;
  opacity: .25;
  filter: blur(2px);
  color: transparent;
  -webkit-text-stroke: 1px var(--lavender);
}

.ghost-left { transform: translate(-4%, -28%); }
.ghost-right { transform: translate(7%, 30%); }

.pupil-orbit {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  animation: orbit 18s linear infinite;
}

.pupil-orbit span {
  position: absolute;
  left: 50%;
  top: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--lens-color);
  box-shadow: 0 0 22px currentColor;
}

.orbit-two { inset: 15%; animation-duration: 23s; animation-direction: reverse; color: var(--magenta); }
.orbit-three { inset: 25%; animation-duration: 29s; color: var(--green); }
.orbit-four { inset: 35%; animation-duration: 14s; animation-direction: reverse; color: var(--peach); }

.beams { position: absolute; inset: 0; pointer-events: none; opacity: .38; }
.beam { position: absolute; left: 50%; top: 50%; width: 48vw; height: 2px; transform-origin: 0 50%; filter: blur(2px); }
.beam-magenta { background: linear-gradient(90deg, var(--magenta), transparent); transform: rotate(205deg); }
.beam-cyan { background: linear-gradient(90deg, var(--cyan), transparent); transform: rotate(318deg); }
.beam-green { background: linear-gradient(90deg, var(--green), transparent); transform: rotate(28deg); }
.beam-peach { background: linear-gradient(90deg, var(--peach), transparent); transform: rotate(152deg); }

.scene {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  padding: 8vh 8vw;
}

.scene-panel {
  position: absolute;
  width: min(34rem, 40vw);
  padding: 1.4rem 1.6rem;
  border: 1px solid rgba(255, 244, 216, .22);
  border-radius: 28px 28px 28px 6px;
  background: linear-gradient(135deg, rgba(255, 244, 216, .1), rgba(199, 166, 255, .06));
  box-shadow: 0 20px 70px rgba(7, 3, 17, .45), inset 0 0 34px rgba(255, 244, 216, .05);
  backdrop-filter: blur(14px);
}

.acetate-left { left: 7vw; top: 18vh; transform: rotate(-5deg); }
.acetate-right { right: 8vw; top: 22vh; transform: rotate(5deg); }
.narrow { width: min(29rem, 36vw); }
.wide { width: min(39rem, 44vw); }
.finale-panel { left: 50%; bottom: 10vh; transform: translateX(-50%); text-align: center; }

.kicker,
.lens-note,
.calibration-strip,
.choir-label,
.final-note {
  font-family: "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: .17em;
}

.kicker { margin: 0 0 .8rem; color: var(--green); font-size: .72rem; }

h2 {
  margin: 0 0 .8rem;
  font-family: "Bungee Hairline", cursive;
  font-size: clamp(4rem, 10vw, 9rem);
  line-height: .82;
  font-weight: 400;
  color: var(--cream);
  text-shadow: -6px 0 var(--magenta), 6px 0 var(--cyan), 0 0 28px rgba(255, 244, 216, .32);
}

.scene-panel p:not(.kicker) {
  margin: 0;
  font-size: clamp(1rem, 1.35vw, 1.35rem);
  line-height: 1.55;
  color: rgba(255, 244, 216, .84);
}

.lens-note,
.choir-label,
.final-note {
  position: absolute;
  padding: .45rem .7rem;
  border: 1px solid rgba(77, 235, 255, .36);
  border-radius: 999px;
  background: rgba(7, 3, 17, .45);
  color: var(--cyan);
  font-size: .72rem;
  box-shadow: 0 0 24px rgba(77, 235, 255, .13);
}

.note-a { left: 14vw; bottom: 20vh; transform: rotate(12deg); }
.note-b { right: 16vw; top: 15vh; color: var(--peach); border-color: rgba(255, 177, 122, .42); }
.note-c { left: 16vw; top: 35vh; color: var(--magenta); border-color: rgba(255, 61, 174, .42); }

.eye-chart {
  position: absolute;
  right: 12vw;
  bottom: 12vh;
  font: 700 clamp(1rem, 2vw, 1.8rem) "Space Mono", monospace;
  line-height: 1.55;
  letter-spacing: .55em;
  color: rgba(255, 244, 216, .42);
  transform: rotate(8deg);
  text-shadow: 3px 0 var(--cyan), -3px 0 var(--magenta);
}

.calibration-strip {
  position: absolute;
  left: 4vw;
  bottom: 14vh;
  font-size: .74rem;
  color: var(--green);
  transform: rotate(-90deg);
  transform-origin: left bottom;
}

.crosshair {
  position: absolute;
  left: 24vw;
  top: 26vh;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(255, 244, 216, .18);
  border-radius: 50%;
}

.crosshair::before,
.crosshair::after {
  content: "";
  position: absolute;
  background: rgba(255, 244, 216, .24);
}
.crosshair::before { left: 50%; top: -30px; width: 1px; height: 230px; }
.crosshair::after { top: 50%; left: -30px; height: 1px; width: 230px; }

.double-frame {
  position: absolute;
  width: 30vw;
  height: 22vh;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 244, 216, .2);
  border-radius: 50% / 58%;
  font: 500 1rem "Space Grotesk", sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: rgba(18, 0, 34, .35);
}
.frame-a { right: 15vw; top: 22vh; color: var(--cyan); transform: rotate(-8deg); }
.frame-b { right: 9vw; top: 35vh; color: var(--magenta); transform: rotate(6deg); }

.prism {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 65px solid transparent;
  border-right: 65px solid transparent;
  border-bottom: 120px solid rgba(199, 166, 255, .22);
  filter: drop-shadow(0 0 28px rgba(199, 166, 255, .28));
}
.prism-one { left: 14vw; bottom: 14vh; transform: rotate(20deg); }
.prism-two { right: 20vw; bottom: 12vh; transform: rotate(-18deg) scale(.7); border-bottom-color: rgba(77, 235, 255, .2); }

.label-one { left: 10vw; top: 18vh; color: var(--lavender); border-color: rgba(199, 166, 255, .42); }
.label-two { right: 10vw; bottom: 26vh; color: var(--cyan); }
.label-three { left: 20vw; bottom: 12vh; color: var(--green); border-color: rgba(108, 255, 184, .42); }

.music-band {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74vw;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 244, 216, .18) 0 1deg, transparent 1deg 5deg);
  mask: radial-gradient(circle, transparent 0 45%, black 46% 48%, transparent 49%);
  animation: ringSpin 28s linear infinite;
}

.final-horizon {
  position: absolute;
  left: 18vw;
  right: 18vw;
  top: 48vh;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cream), transparent);
  box-shadow: 0 0 28px var(--cream);
}

.after-ghost {
  position: absolute;
  left: 50%;
  top: 32vh;
  font-family: "Bungee Shade", cursive;
  font-size: clamp(3.6rem, 10vw, 10rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 244, 216, .28);
  opacity: .38;
}
.ghost-one { transform: translate(-52%, -16%) rotate(-3deg); color: rgba(255, 61, 174, .08); }
.ghost-two { transform: translate(-48%, 10%) rotate(3deg); color: rgba(77, 235, 255, .08); }
.final-note { left: 50%; top: 58vh; transform: translateX(-50%); color: var(--cream); border-color: rgba(255, 244, 216, .45); }

body.scene-0 { --aperture-size: 44%; --ring-scale: .98; --lens-color: #4DEBFF; --scanline-intensity: .28; }
body.scene-1 { --aperture-size: 52%; --ring-scale: 1.04; --lens-color: #6CFFB8; --ghost-offset: 6px; --scanline-intensity: .22; }
body.scene-2 { --aperture-size: 48%; --ring-scale: .94; --lens-color: #FF3DAE; --ghost-offset: 18px; --scanline-intensity: .34; }
body.scene-3 { --aperture-size: 62%; --ring-scale: 1.1; --lens-color: #C7A6FF; --ghost-offset: 3px; --scanline-intensity: .2; }
body.scene-4 { --aperture-size: 70%; --ring-scale: 1.16; --lens-color: #FFF4D8; --ghost-offset: 0px; --scanline-intensity: .14; }
body.scene-4 .portal-glow { opacity: .82; transform: scale(1.08); }
body.scene-4 .beams { opacity: .16; }

@keyframes ringSpin { to { rotate: 360deg; } }
@keyframes irisBreathe { 0%, 100% { scale: .985; } 50% { scale: 1.035; } }
@keyframes vaporDrift { to { transform: translate3d(4%, -3%, 0) scale(1.04); filter: blur(16px) saturate(1.5); } }
@keyframes orbit { to { rotate: 360deg; } }

@media (max-width: 760px) {
  .scene { padding: 6rem 1rem; }
  .scene-panel, .narrow, .wide { width: calc(100vw - 2rem); left: 1rem; right: auto; top: 13vh; transform: rotate(-2deg); }
  .iris-system { width: 118vw; left: 50%; }
  .edge-calibration { right: .5rem; }
  .eye-chart, .double-frame { display: none; }
  h2 { font-size: clamp(3rem, 18vw, 5rem); }
}