:root {
  /* DESIGN typography tokens: IBM Plex Sans** Sans* in 400/500 for professional captions; Space Grotesk** Grotesk* in 500/700 for timestamps. */
  --deep-booth-plum: #1B1620;
  --aged-vellum: #E8DCC7;
  --smoked-umber: #6B5648;
  --dusty-rose: #B9858E;
  --brass-candle: #D49A44;
  --neon-magenta: #FF4FA3;
  --aqua-phosphor: #39E6D0;
  --charred-mauve: #423344;
  --display: "Jost", "Futura", "Avenir Next", "Century Gothic", sans-serif;
  --body: "IBM Plex Sans", "Inter", "Lato", sans-serif;
  --signal: "Space Grotesk", "IBM Plex Sans", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--aged-vellum);
  background: var(--deep-booth-plum);
  font-family: var(--body);
  overflow-x: hidden;
  cursor: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(185, 133, 142, .14), transparent 30%),
    radial-gradient(circle at 76% 12%, rgba(57, 230, 208, .08), transparent 22%),
    linear-gradient(120deg, rgba(66, 51, 68, .75), rgba(27, 22, 32, .95));
  z-index: -3;
}

.ambient-grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .18;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(232, 220, 199, .25) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 40%, rgba(107, 86, 72, .28) 0 1px, transparent 1px);
  background-size: 21px 23px, 17px 19px;
}

.cursor-ember, .cursor-halo {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 100;
  transform: translate3d(-50%, -50%, 0);
}

.cursor-ember {
  width: 18px;
  height: 26px;
  border-radius: 70% 70% 55% 55%;
  background: radial-gradient(circle at 50% 70%, var(--brass-candle), var(--neon-magenta) 48%, rgba(255, 79, 163, .05) 72%);
  box-shadow: 0 0 16px var(--neon-magenta), 0 0 34px rgba(212, 154, 68, .55);
  filter: blur(.15px);
}

.cursor-ember span {
  display: block;
  width: 7px;
  height: 12px;
  margin: 4px auto;
  border-radius: 70% 70% 45% 45%;
  background: var(--aged-vellum);
  opacity: .7;
  animation: flicker .9s infinite alternate;
}

.cursor-halo {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 154, 68, .22), rgba(255, 79, 163, .1) 38%, transparent 70%);
  mix-blend-mode: screen;
  z-index: 19;
}

.tuner-nav {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 18px;
  z-index: 30;
  font-family: var(--signal);
}

.tuner-nav::before {
  content: "";
  position: absolute;
  top: -28px;
  bottom: -28px;
  left: -12px;
  width: 1px;
  background: linear-gradient(var(--brass-candle), transparent, var(--aqua-phosphor));
  opacity: .65;
}

.tuner-nav a {
  color: rgba(232, 220, 199, .62);
  text-decoration: none;
  writing-mode: vertical-rl;
  letter-spacing: .18em;
  font-size: 10px;
  text-transform: uppercase;
  transition: color .35s, text-shadow .35s;
}

.tuner-nav a::before { content: attr(data-scene) " / "; color: var(--brass-candle); }
.tuner-nav a.active { color: var(--aqua-phosphor); text-shadow: 0 0 10px var(--aqua-phosphor); }

.stream-stage { position: relative; }

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(36px, 7vw, 96px);
  display: grid;
  align-items: center;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(27, 22, 32, .08), rgba(27, 22, 32, .74));
  z-index: -1;
}

.stream-filament {
  position: fixed;
  inset: auto 0 0 0;
  width: 100vw;
  height: 100vh;
  z-index: 9;
  pointer-events: none;
  opacity: .9;
}

#mainStream, .echo-stream {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#magentaGlow);
}

#mainStream {
  stroke: var(--neon-magenta);
  stroke-width: 3.5;
  stroke-dasharray: 1180;
  stroke-dashoffset: 1180;
  animation: traceStream 3.4s ease-out forwards;
}

.echo-stream {
  stroke: var(--aqua-phosphor);
  stroke-width: 1.2;
  opacity: .23;
  stroke-dasharray: 18 20;
}

.watercolor {
  position: absolute;
  border-radius: 44% 56% 61% 39% / 44% 42% 58% 56%;
  filter: blur(11px) saturate(.9);
  mix-blend-mode: screen;
  opacity: .72;
  transform-origin: center;
  animation: inkDiffuse 11s ease-in-out infinite alternate;
  z-index: -2;
}

.watercolor::after {
  content: "";
  position: absolute;
  inset: 11%;
  border-radius: inherit;
  border: 1px solid rgba(232, 220, 199, .18);
  box-shadow: inset 0 0 34px rgba(107, 86, 72, .32);
}

.rose-bloom { width: 54vw; height: 58vh; left: 3vw; top: 14vh; background: radial-gradient(circle, rgba(185, 133, 142, .56), rgba(255, 79, 163, .18) 36%, transparent 72%); }
.umber-bloom { width: 48vw; height: 54vh; right: 4vw; top: 18vh; background: radial-gradient(circle, rgba(107, 86, 72, .7), rgba(185, 133, 142, .21) 48%, transparent 74%); }
.aqua-bloom { width: 34vw; height: 36vh; left: 9vw; bottom: 10vh; background: radial-gradient(circle, rgba(57, 230, 208, .28), transparent 70%); animation-delay: -3s; }

.vellum-sheet, .paper-screen {
  position: absolute;
  background: linear-gradient(135deg, rgba(232, 220, 199, .72), rgba(232, 220, 199, .18));
  border: 1px solid rgba(232, 220, 199, .22);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .34), inset 0 0 55px rgba(185, 133, 142, .18);
  backdrop-filter: blur(1px);
  z-index: -1;
}

.sheet-one { width: 48vw; height: 68vh; right: 10vw; top: 8vh; transform: rotate(-7deg); opacity: .48; }
.sheet-two { width: 36vw; height: 76vh; left: 8vw; top: 11vh; transform: rotate(5deg); opacity: .36; }

.hero-copy { max-width: 78vw; transform: translateY(-4vh); }
.kicker {
  margin: 0 0 18px;
  color: var(--aqua-phosphor);
  font-family: var(--signal);
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: .28em;
  text-transform: uppercase;
}

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

h1 {
  color: var(--aged-vellum);
  font-size: clamp(84px, 18vw, 250px);
  max-width: 1050px;
  text-shadow: 0 0 34px rgba(255, 79, 163, .28);
  mix-blend-mode: screen;
}

h2 { font-size: clamp(54px, 8vw, 132px); color: var(--aged-vellum); }

.caption, .paper-caption p, .sub-copy p, .after-mark p {
  max-width: 390px;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.65;
  color: rgba(232, 220, 199, .78);
}

.brass-dial {
  position: absolute;
  right: 12vw;
  top: 18vh;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  z-index: 4;
}

.dial-face {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 2px solid var(--brass-candle);
  background: radial-gradient(circle, rgba(212, 154, 68, .24), rgba(66, 51, 68, .44));
  box-shadow: 0 0 26px rgba(212, 154, 68, .28), inset 0 0 18px rgba(27, 22, 32, .8);
  transform: rotate(var(--dial-rotate, 0deg));
  transition: transform .25s ease-out;
}

.dial-face span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 3px;
  height: 54px;
  background: var(--neon-magenta);
  border-radius: 4px;
  box-shadow: 0 0 14px var(--neon-magenta);
}

.dial-ticks i {
  position: absolute;
  color: var(--brass-candle);
  font: 700 10px var(--signal);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: 0;
  animation: tickReveal 5s infinite;
}
.dial-ticks i:nth-child(1) { left: 0; top: 48%; animation-delay: .2s; }
.dial-ticks i:nth-child(2) { right: -10px; top: 48%; animation-delay: .7s; }
.dial-ticks i:nth-child(3) { top: -4px; left: 38%; animation-delay: 1.1s; }
.dial-ticks i:nth-child(4) { bottom: -4px; left: 34%; animation-delay: 1.6s; }

.frequency-strip, .poem-strip, .screen-labels, .final-caption {
  font-family: var(--signal);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(232, 220, 199, .62);
}

.frequency-strip {
  position: absolute;
  left: 8vw;
  bottom: 7vh;
  display: flex;
  gap: 2vw;
  font-size: 11px;
}

.artifact, .artifact-large {
  position: absolute;
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -.06em;
  color: rgba(232, 220, 199, .04);
  pointer-events: none;
}
.artifact-large { right: -4vw; bottom: -4vh; font-size: clamp(130px, 24vw, 340px); }
.artifact { right: -2vw; bottom: 3vh; font-size: clamp(82px, 15vw, 220px); }

.paper-caption {
  max-width: 540px;
  padding: 28px 30px;
  background: rgba(66, 51, 68, .42);
  border-left: 2px solid var(--brass-candle);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .24);
}
.left-caption { margin-left: 7vw; align-self: start; margin-top: 13vh; }

.poem-strip { position: absolute; right: 14vw; top: 26vh; color: var(--aqua-phosphor); font-size: 12px; transform: rotate(9deg); }
.wax-beads span {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brass-candle);
  box-shadow: 0 0 16px rgba(212, 154, 68, .8);
  animation: beadSlide 7s linear infinite;
}
.wax-beads span:nth-child(1) { left: 25%; top: 64%; animation-delay: 0s; }
.wax-beads span:nth-child(2) { left: 41%; top: 52%; animation-delay: -1.5s; }
.wax-beads span:nth-child(3) { left: 58%; top: 60%; animation-delay: -3s; }
.wax-beads span:nth-child(4) { left: 72%; top: 38%; animation-delay: -4.5s; }

.scene-lantern { grid-template-columns: 1fr 1fr; gap: 4vw; }
.lantern-copy { max-width: 520px; justify-self: end; }
.lantern-holder { position: absolute; left: 24vw; top: 41vh; width: 90px; height: 160px; }
.flame {
  width: 34px;
  height: 54px;
  margin: 0 auto;
  border-radius: 80% 80% 50% 50%;
  background: radial-gradient(circle at 50% 68%, var(--aged-vellum), var(--brass-candle) 42%, var(--neon-magenta) 72%);
  box-shadow: 0 0 28px var(--brass-candle), 0 0 90px rgba(255, 79, 163, .35);
  animation: flicker 1.1s infinite alternate;
}
.cup { width: 90px; height: 80px; margin-top: 8px; background: linear-gradient(90deg, var(--smoked-umber), var(--brass-candle), var(--smoked-umber)); clip-path: polygon(10% 0, 90% 0, 76% 100%, 24% 100%); opacity: .76; }
.halo-reveal { position: absolute; left: 13vw; top: 20vh; width: 44vw; height: 58vh; }
.hidden-line {
  position: absolute;
  margin: 0;
  color: rgba(232, 220, 199, var(--reveal, .14));
  text-shadow: 0 0 calc(var(--reveal, .14) * 24px) var(--aqua-phosphor);
  font-family: var(--signal);
  letter-spacing: .12em;
  transition: color .2s, text-shadow .2s;
}
.hidden-line:nth-child(1) { left: 12%; top: 18%; }
.hidden-line:nth-child(2) { left: 28%; top: 48%; }
.hidden-line:nth-child(3) { left: 8%; top: 76%; }
.smoke { position: absolute; width: 180px; height: 260px; border: 1px solid rgba(57, 230, 208, .14); border-left: 0; border-bottom: 0; border-radius: 50%; filter: blur(3px); animation: smokeCurl 8s infinite ease-in-out; }
.smoke-one { left: 22vw; top: 18vh; }
.smoke-two { left: 29vw; top: 12vh; animation-delay: -3s; }

.scene-subchannel { align-items: end; }
.paper-screen { width: 62vw; height: 72vh; left: 19vw; top: 12vh; opacity: .42; transform: skewY(-2deg); }
.split-lines { position: absolute; inset: 16vh 5vw auto 5vw; width: 90vw; height: 62vh; z-index: 5; pointer-events: none; }
.split { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 18; filter: drop-shadow(0 0 12px currentColor); animation: flowDash 8s linear infinite; }
.split.magenta { stroke: var(--neon-magenta); color: var(--neon-magenta); }
.split.aqua { stroke: var(--aqua-phosphor); color: var(--aqua-phosphor); animation-direction: reverse; }
.sub-copy { max-width: 620px; margin: 0 0 10vh 9vw; z-index: 6; }
.screen-labels { position: absolute; right: 16vw; top: 18vh; display: grid; gap: 13px; font-size: 11px; color: var(--smoked-umber); }

.scene-afterimage { place-items: center; text-align: center; }
.still-pool { width: min(62vw, 760px); height: 38vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(57, 230, 208, .24), rgba(255, 79, 163, .14) 38%, rgba(185, 133, 142, .11) 56%, transparent 72%); filter: blur(10px); animation: poolBreathe 6s ease-in-out infinite alternate; }
.after-mark { position: absolute; max-width: 620px; }
.after-mark h2 { font-size: clamp(68px, 13vw, 184px); text-shadow: 0 0 28px rgba(57, 230, 208, .22); }
.after-mark p { margin-left: auto; margin-right: auto; }
.final-caption { position: absolute; bottom: 8vh; font-size: 11px; color: var(--brass-candle); }

.droplet {
  position: fixed;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 50;
  background: var(--aqua-phosphor);
  box-shadow: 0 0 14px var(--aqua-phosphor);
  animation: dropletFade .9s ease-out forwards;
}

@keyframes traceStream { to { stroke-dashoffset: 0; } }
@keyframes flicker { 0% { transform: scaleY(.9) rotate(-3deg); opacity: .72; } 100% { transform: scaleY(1.08) rotate(4deg); opacity: 1; } }
@keyframes inkDiffuse { from { transform: scale(.96) rotate(-2deg); filter: blur(13px); } to { transform: scale(1.08) rotate(3deg); filter: blur(18px); } }
@keyframes tickReveal { 0%, 100% { opacity: .08; } 24%, 42% { opacity: 1; text-shadow: 0 0 12px var(--brass-candle); } }
@keyframes beadSlide { 0% { transform: translate(-16px, 14px) scale(.75); opacity: 0; } 22%, 72% { opacity: 1; } 100% { transform: translate(46px, -32px) scale(1.15); opacity: 0; } }
@keyframes smokeCurl { 0%, 100% { transform: translateY(0) rotate(8deg); opacity: .16; } 50% { transform: translateY(-28px) rotate(-10deg); opacity: .34; } }
@keyframes flowDash { to { stroke-dashoffset: -140; } }
@keyframes poolBreathe { from { transform: scale(.96); opacity: .68; } to { transform: scale(1.08); opacity: .94; } }
@keyframes dropletFade { to { transform: translateY(-22px) scale(2.8); opacity: 0; } }

@media (max-width: 760px) {
  body { cursor: auto; }
  .cursor-ember, .cursor-halo { display: none; }
  .tuner-nav { right: 10px; }
  .scene { padding: 30px 24px; }
  .hero-copy { max-width: 92vw; }
  .brass-dial { right: 18vw; top: 10vh; transform: scale(.72); }
  .scene-lantern { grid-template-columns: 1fr; }
  .halo-reveal { width: 80vw; left: 8vw; }
  .lantern-copy { justify-self: start; margin-top: 42vh; }
  .paper-screen { width: 82vw; left: 8vw; }
  .sub-copy { margin-left: 0; }
}