:root {
  color-scheme: dark;
  --ink: #14120e;
  --paper: #f4ead2;
  --paper-hot: #d8b955;
  --blood: #1f766e;
  --wine: #232017;
  --acid: #9fcf75;
  --teal: #36bac2;
  --violet: #5b6078;
  --blue: #071c28;
  --cream: #fff4db;
  --shadow: rgba(7, 10, 13, .68);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #150c19;
  color: var(--cream);
  font-family: Avenir Next, Futura, Trebuchet MS, sans-serif;
  overflow: hidden;
}

button {
  font: inherit;
}

.theater {
  position: relative;
  min-height: 100svh;
  background:
    radial-gradient(circle at 14% 18%, rgba(216, 185, 85, .2), transparent 28%),
    radial-gradient(circle at 82% 68%, rgba(54, 186, 194, .14), transparent 26%),
    linear-gradient(135deg, #08131a, #1d221a 48%, #08090b);
  isolation: isolate;
}

.stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.03);
  transition: opacity 360ms var(--ease-out), transform 700ms var(--ease-out);
}

.stage.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.stage::before {
  content: "";
  position: absolute;
  inset: -12%;
  background:
    repeating-linear-gradient(100deg, transparent 0 24px, rgba(255, 244, 207, .045) 25px 26px),
    linear-gradient(120deg, rgba(23, 18, 15, .12), transparent 48%, rgba(23, 18, 15, .34));
  mix-blend-mode: soft-light;
  opacity: .45;
  animation: textureDrift 12s linear infinite;
}

.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.paper-grain {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1.4px),
    radial-gradient(circle at 70% 40%, #000 0 1px, transparent 1.3px);
  background-size: 9px 9px, 13px 13px;
  mix-blend-mode: overlay;
}

.scene-art {
  position: absolute;
  inset: 5% 7% 8% 7%;
  background-image: var(--art);
  background-size: cover;
  background-position: center;
  opacity: .82;
  filter: saturate(1.04) contrast(1.12);
  clip-path: polygon(6% 3%, 96% 0, 92% 91%, 3% 98%);
  transform: translateX(-4vw) scale(1.06);
  animation: artPush 7s var(--ease-out) infinite;
}

.scene-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .58), transparent 33%, rgba(0, 0, 0, .24)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px 5px);
}

.scene-dream .scene-art {
  background-position: 56% 0%;
  animation-name: dreamCamera;
}

.scene-dream::after {
  background:
    linear-gradient(105deg, transparent 18%, rgba(255, 232, 156, .14) 42%, transparent 58%),
    radial-gradient(circle at 48% 54%, rgba(255, 226, 132, .16), transparent 22%);
  animation: oathGlint 7s var(--ease-out) infinite;
}

.scene-dream .speed {
  width: min(44vw, 680px);
  height: 46vh;
  left: 21vw;
  top: 19vh;
  background:
    linear-gradient(105deg, transparent 0 42%, rgba(255, 240, 196, .28) 48%, transparent 55%),
    linear-gradient(105deg, transparent 0 52%, rgba(216, 185, 85, .18) 56%, transparent 62%);
  filter: blur(5px);
  mix-blend-mode: screen;
  animation: dreamSweep 7s var(--ease-out) infinite;
}

.scene-dream .speed-b {
  left: 28vw;
  top: 25vh;
  width: min(32vw, 520px);
  height: 30vh;
  animation-delay: 180ms;
}

.scene-zip .scene-art {
  animation-name: zipperCamera;
}

.scene-zip .speed {
  inset: 5% 8% 9% 8%;
  background:
    repeating-linear-gradient(166deg, transparent 0 48px, rgba(54, 186, 194, .18) 49px 51px, transparent 52px 86px),
    linear-gradient(166deg, transparent 0 38%, rgba(237, 250, 248, .2) 39% 42%, transparent 43% 100%);
  clip-path: polygon(3% 47%, 96% 21%, 100% 37%, 6% 66%);
  mix-blend-mode: screen;
  animation: sliceOffset 7s var(--ease-out) infinite;
}

.scene-requiem .scene-art {
  animation-name: requiemCamera;
}

.scene-requiem::after {
  background:
    radial-gradient(circle at 54% 52%, transparent 0 12%, rgba(255, 244, 207, .18) 12.5% 13.3%, transparent 14% 24%, rgba(216, 185, 85, .14) 24.5% 25.2%, transparent 26%),
    conic-gradient(from 0deg at 54% 52%, transparent 0 24deg, rgba(159, 207, 117, .12) 25deg 27deg, transparent 28deg 78deg, rgba(255, 244, 207, .12) 79deg 81deg, transparent 82deg);
  animation: zeroLoop 7s linear infinite;
}

.scene-requiem .speed {
  width: min(68vw, 860px);
  aspect-ratio: 1;
  left: 31vw;
  top: 1vh;
  border: 2px solid rgba(255, 244, 207, .16);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 44px rgba(216, 185, 85, .035),
    inset 0 0 0 86px rgba(255, 244, 207, .04);
  animation: loopEcho 7s var(--ease-out) infinite;
}

.panel {
  position: absolute;
  border: 6px solid var(--ink);
  background: color-mix(in oklch, var(--paper) 68%, transparent);
  box-shadow: 12px 14px 0 rgba(0, 0, 0, .34);
  transform: skew(-8deg) rotate(-3deg);
  mix-blend-mode: soft-light;
}

.panel-a {
  width: 28vw;
  height: 55vh;
  left: 4vw;
  top: 7vh;
  animation: panelSnap 7s var(--ease-out) infinite;
}

.panel-b {
  width: 34vw;
  height: 35vh;
  right: 8vw;
  top: 10vh;
  animation: panelSnap 7s var(--ease-out) infinite 130ms;
}

.panel-c {
  width: 42vw;
  height: 24vh;
  left: 18vw;
  bottom: 8vh;
  animation: panelSnap 7s var(--ease-out) infinite 260ms;
}

.speed {
  position: absolute;
  inset: auto;
  opacity: 0;
  pointer-events: none;
}

.speed-b {
  animation-delay: 240ms;
}

.figure,
.stand {
  display: none;
}

.figure .head,
.stand-head {
  position: absolute;
  width: 25%;
  aspect-ratio: 1;
  left: 38%;
  top: 8%;
  background: var(--cream);
  border: 5px solid var(--ink);
  border-radius: 48% 42% 48% 44%;
  box-shadow: inset -16px -8px 0 rgba(177, 13, 56, .22);
}

.figure .head::before {
  content: "";
  position: absolute;
  width: 34%;
  height: 8%;
  left: 18%;
  top: 44%;
  background: var(--ink);
  box-shadow: 48px 0 0 var(--ink);
}

.hair,
.bob {
  position: absolute;
  background: var(--paper-hot);
  border: 4px solid var(--ink);
}

.h1 {
  width: 17%;
  height: 30%;
  left: 34%;
  top: 0;
  border-radius: 60% 40% 18% 60%;
  transform: rotate(18deg);
}

.h2 {
  width: 18%;
  height: 26%;
  left: 50%;
  top: 1%;
  border-radius: 40% 60% 60% 18%;
  transform: rotate(-12deg);
}

.bob {
  width: 34%;
  height: 19%;
  left: 34%;
  top: 5%;
  border-radius: 50% 50% 20% 20%;
  background: #edf5ef;
}

.torso,
.stand-body {
  position: absolute;
  width: 42%;
  height: 47%;
  left: 31%;
  top: 26%;
  background: linear-gradient(135deg, var(--paper-hot), #d6b22f);
  border: 6px solid var(--ink);
  clip-path: polygon(22% 0, 80% 2%, 96% 100%, 0 100%);
}

.scene-zip .torso {
  background: linear-gradient(135deg, #f6f7ea, #98dce0);
}

.scene-requiem .torso {
  background: linear-gradient(135deg, #f3d64e, #0eb2a9);
}

.arm,
.stand-arm {
  position: absolute;
  width: 16%;
  height: 42%;
  top: 31%;
  background: var(--cream);
  border: 5px solid var(--ink);
  transform-origin: 50% 10%;
}

.arm-l {
  left: 18%;
  transform: rotate(34deg);
}

.arm-r {
  right: 16%;
  transform: rotate(-52deg);
}

.badge {
  position: absolute;
  width: 8%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--acid);
  border: 4px solid var(--ink);
  left: 47%;
  top: 38%;
}

.b2 {
  left: 56%;
  top: 51%;
}

.zip-mark,
.zipper {
  position: absolute;
  background: repeating-linear-gradient(90deg, #111 0 8px, #e5f9fa 8px 14px);
  border: 4px solid var(--ink);
}

.zip-mark {
  width: 8%;
  height: 35%;
  left: 50%;
  top: 30%;
  transform: rotate(9deg);
}

.zipper {
  width: 42vw;
  height: 26px;
  opacity: .9;
  box-shadow: 0 0 25px rgba(8, 182, 185, .65);
  animation: unzip 7s var(--ease-out) infinite;
}

.z1 {
  left: 18vw;
  top: 43vh;
  transform: rotate(-18deg);
}

.z2 {
  right: 6vw;
  top: 48vh;
  transform: rotate(14deg);
  animation-delay: 120ms;
}

.z3 {
  left: 24vw;
  bottom: 18vh;
  transform: rotate(-7deg);
  animation-delay: 260ms;
}

.stand {
  left: auto;
  right: 13vw;
  bottom: 4vh;
  opacity: .86;
  transform: scale(1.18);
}

.stand-body {
  background: linear-gradient(135deg, #e6ce3a, #38c7a3);
}

.stand-arm.left {
  left: 16%;
  transform: rotate(70deg);
}

.stand-arm.right {
  right: 8%;
  transform: rotate(-68deg);
}

.clock {
  position: absolute;
  width: 20vw;
  aspect-ratio: 1;
  border: 7px solid rgba(255, 244, 207, .7);
  border-radius: 50%;
  opacity: .65;
  animation: clockLoop 7s linear infinite;
}

.clock::before,
.clock::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 6px;
  background: var(--cream);
  transform-origin: left center;
}

.clock::after {
  width: 28%;
  transform: rotate(90deg);
}

.c1 {
  left: 7vw;
  top: 14vh;
}

.c2 {
  right: 9vw;
  top: 6vh;
  animation-direction: reverse;
}

.c3 {
  left: 39vw;
  bottom: 4vh;
}

.glyph {
  position: absolute;
  font-family: Impact, Haettenschweiler, sans-serif;
  font-size: clamp(5rem, 13vw, 13rem);
  color: var(--ink);
  -webkit-text-stroke: 2px var(--cream);
  text-shadow: 10px 10px 0 var(--blood);
  opacity: 0;
  animation: glyphSlam 7s var(--ease-out) infinite;
}

.glyph-one {
  left: 8vw;
  top: 18vh;
}

.glyph-two {
  right: 10vw;
  bottom: 18vh;
  animation-delay: 160ms;
}

.quote {
  position: absolute;
  z-index: 4;
  right: clamp(16px, 7vw, 98px);
  bottom: clamp(96px, 14vh, 170px);
  max-width: min(52vw, 760px);
  color: var(--cream);
  font-family: Impact, Haettenschweiler, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
  transform: skew(-8deg) rotate(-3deg);
  text-shadow: 7px 7px 0 var(--ink), 13px 13px 0 var(--blood);
  cursor: pointer;
  animation: quoteImpact 7s var(--ease-out) infinite;
}

.quote span,
.quote strong {
  display: block;
  line-height: .88;
}

.quote span {
  font-size: clamp(2rem, 5.4vw, 5.2rem);
}

.quote strong {
  font-size: clamp(4.8rem, 11vw, 12rem);
  font-weight: 900;
}

.quote-dream {
  left: clamp(18px, 6vw, 86px);
  right: auto;
  bottom: clamp(96px, 13vh, 160px);
  max-width: min(47vw, 660px);
}

.quote-zip strong {
  font-size: clamp(4.6rem, 10vw, 11rem);
}

.quote-zip {
  left: 10vw;
  right: auto;
  bottom: 18vh;
}

.quote-requiem strong {
  color: var(--paper-hot);
  font-size: clamp(4rem, 8.4vw, 9rem);
}

.quote-requiem {
  right: clamp(18px, 5vw, 82px);
  bottom: clamp(112px, 17vh, 190px);
  max-width: min(50vw, 680px);
}

.caption {
  position: absolute;
  z-index: 5;
  left: clamp(18px, 5vw, 76px);
  bottom: clamp(26px, 5vh, 56px);
  display: grid;
  gap: 4px;
  color: var(--cream);
  text-shadow: 4px 4px 0 var(--ink);
}

.caption span {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #e5c66a;
}

.caption b {
  font-size: clamp(1.4rem, 2.8vw, 3rem);
}

.deck {
  position: absolute;
  z-index: 8;
  top: clamp(16px, 5vh, 56px);
  left: clamp(16px, 5vw, 76px);
  width: min(410px, calc(100vw - 32px));
  color: var(--cream);
  text-shadow: 3px 3px 0 var(--ink);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--paper-hot);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: Georgia, Times New Roman, serif;
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  line-height: .9;
}

.deck-copy {
  margin: 16px 0 0;
  max-width: 31em;
  color: #f2e3c8;
  font-size: clamp(.95rem, 1.6vw, 1.08rem);
  line-height: 1.65;
}

.deck-actions,
.controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.deck-actions {
  margin-top: 18px;
}

.deck-actions button,
.scene-tab,
.icon-button {
  min-height: 42px;
  border: 4px solid var(--ink);
  color: var(--ink);
  background: var(--paper-hot);
  box-shadow: 5px 5px 0 var(--blood);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background 160ms var(--ease-out);
}

.deck-actions button {
  padding: 8px 16px;
  font-weight: 900;
}

.controls {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: clamp(16px, 4vh, 38px);
  transform: translateX(-50%);
  padding: 0;
}

.icon-button {
  width: 48px;
  font-size: 2rem;
  line-height: 1;
}

.scene-tabs {
  display: flex;
  gap: 8px;
}

.scene-tab {
  padding: 8px 13px;
  font-weight: 900;
}

.scene-tab.is-current,
.deck-actions button:hover,
.scene-tab:hover,
.icon-button:hover {
  background: var(--acid);
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--blood);
}

.is-paused .stage *,
.is-slow .stage * {
  animation-play-state: paused !important;
}

.is-slow .stage.is-active {
  transition-duration: 1300ms;
}

.is-replaying .stage.is-active {
  animation: stageFlash 520ms var(--ease-out);
}

.stage.is-restarting * {
  animation: none !important;
}

.scene-dream {
  background: linear-gradient(135deg, #081724 0%, #b99334 52%, #17140e 100%);
}

.scene-zip {
  background: linear-gradient(135deg, #050608 0%, #276f78 44%, #e8dfc9 100%);
}

.scene-requiem {
  background: linear-gradient(135deg, #080908 0%, #c9a64b 49%, #5f766c 100%);
}

@keyframes artPush {
  0%, 7% { opacity: 0; transform: translateX(-4vw) scale(1.08); }
  15%, 82% { opacity: .82; transform: translateX(0) scale(1.02); }
  100% { opacity: .66; transform: translateX(1.6vw) scale(1.04); }
}

@keyframes dreamCamera {
  0%, 8% { opacity: 0; transform: translateX(-2.4vw) translateY(1.2vh) scale(1.08); }
  18%, 45% { opacity: .84; transform: translateX(0) translateY(0) scale(1.015); }
  52%, 78% { opacity: .84; transform: translateX(.8vw) translateY(-.4vh) scale(1.035); }
  100% { opacity: .72; transform: translateX(1.2vw) translateY(-.5vh) scale(1.045); }
}

@keyframes zipperCamera {
  0%, 9% { opacity: 0; transform: translateX(2.4vw) scale(1.08); clip-path: polygon(9% 5%, 94% 0, 93% 88%, 2% 96%); }
  18%, 42% { opacity: .84; transform: translateX(0) scale(1.02); clip-path: polygon(6% 3%, 96% 0, 92% 91%, 3% 98%); }
  43%, 45% { transform: translateX(-1.2vw) scale(1.025); }
  48%, 78% { opacity: .82; transform: translateX(.7vw) scale(1.025); }
  100% { opacity: .67; transform: translateX(1.8vw) scale(1.04); }
}

@keyframes requiemCamera {
  0%, 7% { opacity: 0; transform: scale(1.11) rotate(.6deg); }
  18%, 38% { opacity: .82; transform: scale(1.025) rotate(0deg); }
  42% { opacity: .58; transform: scale(1.055) rotate(-.4deg); }
  46%, 78% { opacity: .82; transform: scale(1.02) rotate(0deg); }
  100% { opacity: .68; transform: scale(1.04) rotate(.25deg); }
}

@keyframes panelSnap {
  0%, 10% { opacity: 0; transform: translate(-9vw, 2vh) skew(-8deg) rotate(-10deg); }
  18%, 78% { opacity: .72; transform: translate(0) skew(-8deg) rotate(-3deg); }
  100% { opacity: .25; transform: translate(4vw, -1vh) skew(-8deg) rotate(2deg); }
}

@keyframes figureStrike {
  0%, 16% { opacity: 0; transform: translateX(-6vw) rotate(-5deg) scale(.9); }
  24%, 70% { opacity: 1; transform: translateX(0) rotate(0) scale(1); }
  78%, 100% { opacity: .88; transform: translateX(2vw) rotate(2deg) scale(1.02); }
}

@keyframes quoteImpact {
  0%, 18% { opacity: 0; transform: translateY(4vh) translateX(-1vw) scale(.86) skew(-8deg) rotate(-6deg); filter: blur(4px); }
  28% { opacity: 1; transform: translateY(0) translateX(.7vw) scale(1.06) skew(-8deg) rotate(-3deg); filter: blur(0); }
  32% { transform: translateY(0) translateX(0) scale(.99) skew(-8deg) rotate(-3deg); }
  38%, 91% { opacity: 1; transform: translateY(0) translateX(0) scale(1) skew(-8deg) rotate(-3deg); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-2vh) translateX(.8vw) scale(1.03) skew(-8deg) rotate(1deg); }
}

@keyframes glyphSlam {
  0%, 28% { opacity: 0; transform: scale(.2) rotate(-20deg); }
  36% { opacity: .95; transform: scale(1.35) rotate(-7deg); }
  52%, 88% { opacity: .86; transform: scale(1) rotate(-7deg); }
  100% { opacity: 0; transform: scale(1.2) rotate(12deg); }
}

@keyframes dreamSweep {
  0%, 30% { opacity: 0; transform: translateX(-18vw) skew(-10deg); }
  36% { opacity: .42; transform: translateX(-4vw) skew(-10deg); }
  48%, 70% { opacity: .16; transform: translateX(8vw) skew(-10deg); }
  100% { opacity: 0; transform: translateX(18vw) skew(-10deg); }
}

@keyframes oathGlint {
  0%, 31% { opacity: 0; transform: translateX(-8vw); }
  36% { opacity: .32; transform: translateX(-1vw); }
  46%, 72% { opacity: .08; transform: translateX(3vw); }
  100% { opacity: 0; transform: translateX(7vw); }
}

@keyframes sliceOffset {
  0%, 25% { opacity: 0; transform: translateX(-12vw) rotate(-2deg); }
  32% { opacity: .48; transform: translateX(-2vw) rotate(-2deg); }
  38% { opacity: .18; transform: translateX(1vw) rotate(-2deg); }
  74% { opacity: .16; transform: translateX(4vw) rotate(-2deg); }
  100% { opacity: 0; transform: translateX(12vw) rotate(-2deg); }
}

@keyframes zeroLoop {
  0%, 34% { opacity: 0; transform: scale(.96) rotate(0deg); }
  39% { opacity: .46; transform: scale(1.02) rotate(14deg); }
  43% { opacity: .12; transform: scale(.98) rotate(-6deg); }
  47%, 72% { opacity: .22; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.04) rotate(36deg); }
}

@keyframes loopEcho {
  0%, 32% { opacity: 0; transform: scale(.86) rotate(0deg); }
  38% { opacity: .42; transform: scale(1) rotate(16deg); }
  44% { opacity: .12; transform: scale(.92) rotate(-8deg); }
  52%, 76% { opacity: .2; transform: scale(1.04) rotate(12deg); }
  100% { opacity: 0; transform: scale(1.18) rotate(36deg); }
}

@keyframes unzip {
  0%, 21% { opacity: 0; clip-path: inset(0 100% 0 0); }
  33%, 74% { opacity: .95; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 100%); }
}

@keyframes clockLoop {
  to { transform: rotate(360deg); }
}

@keyframes textureDrift {
  to { transform: translateX(80px); }
}

@keyframes stageFlash {
  0% { filter: brightness(1); }
  26% { filter: brightness(1.16) contrast(1.08); }
  100% { filter: brightness(1); }
}

@media (max-width: 760px) {
  body {
    overflow: auto;
  }

  .theater {
    min-height: 100svh;
    overflow: hidden;
  }

  .scene-art {
    inset: 19% -18% 13% -12%;
    clip-path: polygon(14% 2%, 96% 6%, 90% 94%, 4% 88%);
  }

  .deck {
    top: 18px;
  }

  .deck-copy {
    display: none;
  }

  .figure {
    width: 74vw;
    height: 58vh;
    left: 2vw;
    bottom: 13vh;
  }

  .stand {
    width: 68vw;
    right: -7vw;
    bottom: 9vh;
  }

  .quote {
    left: 18px;
    right: 18px;
    bottom: 124px;
    max-width: calc(100vw - 36px);
  }

  .quote span {
    font-size: clamp(1.25rem, 7vw, 2.5rem);
  }

  .quote strong {
    font-size: clamp(3.2rem, 16vw, 5.2rem);
  }

  .quote-zip {
    left: 18px;
    right: 18px;
  }

  .quote-zip strong {
    font-size: clamp(2.7rem, 12vw, 4.1rem);
  }

  .quote-requiem {
    left: 18px;
    right: 18px;
    bottom: 136px;
    max-width: calc(100vw - 36px);
  }

  .quote-requiem strong {
    font-size: clamp(3rem, 15vw, 4.7rem);
  }

  .panel-a {
    width: 48vw;
  }

  .panel-b,
  .panel-c {
    display: none;
  }

  .controls {
    width: calc(100vw - 24px);
    justify-content: center;
  }

  .scene-tabs {
    flex: 1;
  }

  .scene-tab {
    flex: 1;
    padding-inline: 6px;
  }

  .caption {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ===== JJK adaptation overrides ===== */
.theater {
  background:
    radial-gradient(circle at 18% 20%, rgba(220, 26, 40, .18), transparent 28%),
    radial-gradient(circle at 82% 68%, rgba(72, 140, 255, .14), transparent 26%),
    linear-gradient(135deg, #05070b, #111522 48%, #07060a);
}
.scene-dream::after {
  background:
    radial-gradient(circle at 68% 52%, rgba(255, 38, 38, .24), transparent 18%),
    linear-gradient(105deg, transparent 18%, rgba(255, 0, 0, .16) 42%, transparent 58%);
}
.scene-dream .speed {
  background:
    linear-gradient(105deg, transparent 0 42%, rgba(255, 35, 35, .34) 48%, transparent 55%),
    linear-gradient(105deg, transparent 0 52%, rgba(20, 0, 0, .28) 56%, transparent 62%);
}
.scene-zip::after {
  background: radial-gradient(circle at 48% 54%, rgba(95, 160, 255, .18), transparent 26%);
}
.scene-zip .speed {
  background:
    repeating-linear-gradient(166deg, transparent 0 48px, rgba(70, 120, 180, .18) 49px 51px, transparent 52px 86px),
    linear-gradient(166deg, transparent 0 38%, rgba(190, 220, 255, .16) 39% 42%, transparent 43% 100%);
}
.scene-requiem::after {
  background:
    radial-gradient(circle at 54% 52%, transparent 0 12%, rgba(255, 91, 30, .22) 12.5% 13.3%, transparent 14% 24%, rgba(255, 157, 56, .14) 24.5% 25.2%, transparent 26%),
    conic-gradient(from 0deg at 54% 52%, transparent 0 24deg, rgba(255, 84, 20, .16) 25deg 27deg, transparent 28deg 78deg, rgba(255, 198, 90, .14) 79deg 81deg, transparent 82deg);
}
.scene-requiem .speed {
  border-color: rgba(255, 121, 45, .2);
  box-shadow:
    inset 0 0 0 44px rgba(255, 93, 36, .04),
    inset 0 0 0 86px rgba(255, 190, 95, .04);
}
.deck .eyebrow, .nav-logo, .glyph { letter-spacing: .12em; }
.quote strong { text-shadow: 0 0 28px rgba(255,255,255,.22); }
.scene-dream .quote strong { color: #ffefe7; }
.scene-zip .quote strong { color: #dceaff; }
.scene-requiem .quote strong { color: #ffd2a2; }

/* textless display overrides */
.glyph,
.quote,
.caption,
.controls,
.deck {
  display: none !important;
}
.sr-controls {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.scene-art {
  inset: 3% 4% 4% 4%;
  opacity: .9;
}

/* restore only cinematic effect text, keep UI/deck/captions removed */
.fx-quote {
  max-width: min(54vw, 760px);
  pointer-events: auto;
}
.fx-quote span {
  font-size: clamp(1.05rem, 2.6vw, 2.8rem) !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .9;
}
.fx-quote strong {
  font-size: clamp(3.2rem, 7.6vw, 8.8rem) !important;
  line-height: .9;
}
.scene-dream .fx-quote {
  left: clamp(18px, 4vw, 64px);
  bottom: clamp(28px, 7vh, 88px);
}
.scene-zip .fx-quote {
  left: clamp(18px, 4vw, 64px);
  bottom: clamp(28px, 7vh, 88px);
}
.scene-requiem .fx-quote {
  right: clamp(18px, 4vw, 64px);
  bottom: clamp(28px, 7vh, 88px);
}
.glyph {
  z-index: 5;
  mix-blend-mode: screen;
  opacity: 0;
  color: rgba(255, 244, 219, .86);
}
.scene-dream .glyph { text-shadow: 8px 8px 0 rgba(180, 0, 0, .75), 0 0 30px rgba(255, 24, 24, .55); }
.scene-zip .glyph { text-shadow: 8px 8px 0 rgba(10, 30, 70, .85), 0 0 30px rgba(100, 170, 255, .45); }
.scene-requiem .glyph { text-shadow: 8px 8px 0 rgba(120, 34, 0, .85), 0 0 30px rgba(255, 114, 26, .55); }
.caption,
.controls,
.deck {
  display: none !important;
}
@media (max-width: 700px) {
  .fx-quote { max-width: 78vw; }
  .fx-quote strong { font-size: clamp(2.4rem, 14vw, 5.4rem) !important; }
  .glyph { font-size: clamp(5rem, 25vw, 10rem); }
}