/* ============================================================
   STEPHAN RÖTTGER — music-video v3
   per-scene impact animations · beat-driven cuts · camera moves
   ============================================================ */

:root {
  --bg: #000;
  --fg: #f6f6f6;
  --red: #ff0033;
  --red-glow: #ff003366;
  --cyan: #00f7ff;
  --grey: #6b6b6b;

  --f-display: 'Anton', 'Bebas Neue', 'Helvetica Neue', sans-serif;
  --f-bebas: 'Bebas Neue', sans-serif;
  --f-body: 'Space Grotesk', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', 'Menlo', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100vh; background: var(--bg); color: var(--fg); font-family: var(--f-body); overflow: hidden; }
button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; }
.mono { font-family: var(--f-mono); letter-spacing: 0.05em; }

/* ============================================================
   WORLD — beat zoom, shake, chromatic split, wash
   ============================================================ */
#world {
  position: fixed; inset: 0;
  transform-origin: center center;
  will-change: transform, filter;
}
body.kick #world { animation: kickPulse 0.18s ease-out; }
@keyframes kickPulse {
  0%   { transform: scale(1); filter: none; }
  25%  { transform: scale(1.025); filter: hue-rotate(-12deg) contrast(1.08); }
  60%  { transform: scale(1.008) translate(2px, -1px); }
  100% { transform: scale(1); filter: none; }
}
body.shake #world { animation: shake 0.34s; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-6px, 2px) rotate(-0.3deg); }
  20% { transform: translate(7px, -3px) rotate(0.4deg); }
  30% { transform: translate(-9px, 4px); }
  40% { transform: translate(8px, -2px); }
  50% { transform: translate(-5px, 5px); }
  60% { transform: translate(6px, -4px); }
  70% { transform: translate(-4px, 2px); }
  80% { transform: translate(3px, -2px); }
  90% { transform: translate(-2px, 1px); }
}
body.zoom #world { animation: zoomPunch 0.55s cubic-bezier(.2,.9,.3,1); }
@keyframes zoomPunch {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.10); filter: blur(2px) brightness(1.4); }
  100% { transform: scale(1); filter: none; }
}
body.aberrate #world { animation: aberrate 0.5s; }
@keyframes aberrate {
  0%, 100% { filter: none; }
  20% { filter: drop-shadow(-6px 0 0 #ff0033) drop-shadow(6px 0 0 #00f7ff); }
  60% { filter: drop-shadow(-3px 0 0 #ff0033) drop-shadow(3px 0 0 #00f7ff); }
}

/* ============================================================
   BACKGROUND CANVAS
   ============================================================ */
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }

/* GRAIN / SCANLINES / VIGNETTE / FLASH / REDWASH */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 50;
  opacity: 0.14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 0.6s steps(4) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -1%); }
  75% { transform: translate(-1%, 2%); }
  100% { transform: translate(0, 0); }
}
.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 51;
  background: repeating-linear-gradient(180deg,
    rgba(255,255,255,0) 0px, rgba(255,255,255,0) 2px,
    rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4px);
  opacity: 0.4;
}
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 49;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.45) 80%, rgba(0,0,0,0.9) 100%);
}
#flash {
  position: fixed; inset: 0; pointer-events: none; z-index: 55;
  background: #fff; opacity: 0; mix-blend-mode: difference;
}
body.flash #flash { animation: flashPulse 0.14s ease-out; }
@keyframes flashPulse { 0% { opacity: 0; } 30% { opacity: 0.65; } 100% { opacity: 0; } }
#redwash {
  position: fixed; inset: 0; pointer-events: none; z-index: 54;
  background: var(--red); opacity: 0;
}
body.redwash #redwash { animation: redwash 0.42s ease-out; }
@keyframes redwash { 0% { opacity: 0; } 20% { opacity: 0.55; } 100% { opacity: 0; } }

/* SHOCKWAVE — expanding ring on heavy beats */
#shockwave {
  position: fixed; left: 50%; top: 50%; z-index: 56;
  width: 30vmin; height: 30vmin; margin-left: -15vmin; margin-top: -15vmin;
  border-radius: 50%;
  border: 4px solid var(--red);
  opacity: 0; pointer-events: none;
  box-shadow: 0 0 60px var(--red), inset 0 0 60px var(--red);
}
body.shockwave #shockwave { animation: shockwave 0.85s cubic-bezier(.2,.7,.3,1); }
@keyframes shockwave {
  0%   { opacity: 0; transform: scale(0.05); border-width: 12px; }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: scale(8); border-width: 1px; }
}

/* COLOR INVERT — quick neg flash on climax smash */
#invert {
  position: fixed; inset: 0; z-index: 57;
  background: #fff; opacity: 0; pointer-events: none;
  mix-blend-mode: difference;
}
body.invert #invert { animation: invertFlash 0.18s ease-out; }
@keyframes invertFlash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

/* VHS GLITCH — periodic tracking error */
#vhsglitch {
  position: fixed; inset: 0; z-index: 58;
  pointer-events: none; opacity: 0;
  background:
    repeating-linear-gradient(180deg,
      transparent 0px, transparent 6px,
      rgba(255,0,51,0.5) 6px, rgba(255,0,51,0.5) 7px,
      transparent 7px, transparent 14px,
      rgba(0,247,255,0.5) 14px, rgba(0,247,255,0.5) 15px);
  mix-blend-mode: screen;
}
body.vhs #vhsglitch { animation: vhsGlitch 0.32s steps(3); }
@keyframes vhsGlitch {
  0%   { opacity: 0; transform: translateY(0); }
  20%  { opacity: 0.8; transform: translateY(-12px) skewX(2deg); }
  40%  { opacity: 0.6; transform: translateY(8px) skewX(-3deg); }
  60%  { opacity: 0.9; transform: translateY(-4px) skewX(1deg); }
  100% { opacity: 0; transform: translateY(0); }
}

/* ============================================================
   HUD / TIMELINE / TICKER / CONTROLS
   ============================================================ */
#hud {
  position: fixed; top: 1.2rem; left: 0; right: 0; z-index: 60;
  display: flex; justify-content: space-between; padding: 0 1.5rem;
  pointer-events: none; font-size: 0.72rem;
  color: rgba(255,255,255,0.7); text-transform: uppercase;
  opacity: 0; transition: opacity 0.6s ease;
}
body.playing #hud { opacity: 1; }
.hud-row { display: flex; align-items: center; gap: 0.5rem; line-height: 1.4; }
.hud-r { text-align: right; }
.hud-r .hud-row { justify-content: flex-end; }
.dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: blink 1.5s infinite ease; }
@keyframes blink { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0.3; } }

#timeline {
  position: fixed; bottom: 3rem; left: 1.5rem; right: 1.5rem; z-index: 60;
  height: 2px; background: rgba(255,255,255,0.08);
  opacity: 0; transition: opacity 0.6s ease;
}
body.playing #timeline { opacity: 1; }
#progress { height: 100%; width: 0%; background: var(--red); box-shadow: 0 0 12px var(--red); transition: width 0.1s linear; }
#time {
  position: absolute; bottom: 0.6rem; right: 0;
  font-family: var(--f-mono); font-size: 0.7rem; color: rgba(255,255,255,0.6);
  letter-spacing: 0.1em;
}

#ticker {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  height: 1.8rem; overflow: hidden;
  background: rgba(255, 0, 51, 0.95); color: #000;
  display: flex; align-items: center;
  font-family: var(--f-mono); font-weight: 800;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0; transition: opacity 0.6s ease;
  border-top: 1px solid rgba(0,0,0,0.4);
}
body.playing #ticker { opacity: 1; }
.ticker-inner {
  display: flex; gap: 0; white-space: nowrap;
  animation: ticker 28s linear infinite;
}
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

#controls {
  position: fixed; bottom: 4rem; right: 1.5rem; z-index: 60;
  display: flex; gap: 0.5rem;
  opacity: 0; transition: opacity 0.6s ease;
}
body.playing #controls { opacity: 1; }
#controls button {
  width: 2.4rem; height: 2.4rem;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.7);
  font-size: 1rem; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px); transition: all 0.2s ease;
}
#controls button:hover { border-color: var(--red); color: var(--red); box-shadow: 0 0 12px var(--red-glow); }

/* ============================================================
   PRESS PLAY
   ============================================================ */
#overlay {
  position: fixed; inset: 0; z-index: 100;
  background: radial-gradient(ellipse at center, #110000 0%, #000 70%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.8s ease, transform 0.8s ease;
}
#overlay.gone { opacity: 0; transform: scale(1.05); pointer-events: none; }
.ov-inner { text-align: center; padding: 2rem; max-width: 90vw; }
.ov-tag { color: rgba(255,255,255,0.5); font-size: 0.75rem; letter-spacing: 0.4em; text-transform: uppercase; margin-bottom: 1.2rem; }
.ov-name {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(3.5rem, 12vw, 11rem); line-height: 1.0;
  letter-spacing: 0.02em; color: var(--fg); margin-bottom: 2.5rem;
}
.ov-name span { display: block; color: var(--red); text-shadow: 0 0 32px var(--red-glow); margin-top: 0.05em; }
#start {
  display: inline-flex; align-items: center; gap: 1rem;
  padding: 1rem 2.2rem;
  border: 2px solid var(--fg); font-family: var(--f-mono);
  font-size: 1rem; font-weight: 700; letter-spacing: 0.3em;
  color: var(--fg); position: relative; overflow: hidden; transition: color 0.3s ease, border-color 0.3s ease;
}
#start::before {
  content: ''; position: absolute; inset: 0; background: var(--red);
  transform: translateX(-100%); transition: transform 0.4s ease; z-index: -1;
}
#start:hover { color: #000; border-color: var(--red); }
#start:hover::before { transform: translateX(0); }
.play-icon { font-size: 0.7em; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.92); } }
.ov-foot { margin-top: 3rem; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.7rem; color: rgba(255,255,255,0.4); letter-spacing: 0.15em; text-transform: uppercase; }

/* ============================================================
   SCENES — base
   ============================================================ */
#scenes { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.scene {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 4rem 2rem 5rem;
  opacity: 0; visibility: hidden;
  transform: scale(1.04);
  transition: opacity 0.28s ease, transform 0.5s ease, visibility 0s linear 0.28s;
}
.scene.active {
  opacity: 1; visibility: visible;
  transform: scale(1);
  transition: opacity 0.28s ease, transform 1.6s ease, visibility 0s linear 0s;
}

/* ============================================================
   1 — BOOT (terminal typewriter, char by char)
   ============================================================ */
.scene-boot { align-items: center; justify-content: flex-start; padding-left: 8vw; }
.boot { text-align: left; font-family: var(--f-mono); color: rgba(255,255,255,0.92); font-size: clamp(0.95rem, 1.6vw, 1.3rem); position: relative; }
.boot-line { padding: 0.3rem 0; white-space: pre; min-height: 1.6em; opacity: 0; }
.boot-line[data-i="2"] { color: var(--red); }
.boot-line[data-i="3"] { color: var(--cyan); font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 2.1rem); }
.scene-boot.active .boot-line { opacity: 1; }
.cursor {
  display: inline-block; color: var(--cyan); margin-top: 0.6rem;
  font-family: var(--f-mono); font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  animation: blinkCursor 0.55s steps(1) infinite;
}
@keyframes blinkCursor { 50% { opacity: 0; } }

/* ============================================================
   2 — NAME (chromatic split + slow zoom)
   ============================================================ */
.scene-name.active { animation: nameDrift 8s ease-in-out; }
@keyframes nameDrift {
  0%   { transform: scale(0.92); }
  50%  { transform: scale(1.0); }
  100% { transform: scale(1.05); }
}
.name-stack { text-align: center; }
.huge {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(4.5rem, 18vw, 17rem); line-height: 1.0;
  letter-spacing: 0.005em;
  color: var(--fg);
  text-shadow: 0 0 40px rgba(255,255,255,0.18);
  position: relative;
}
.huge.outline { color: transparent; -webkit-text-stroke: 2px var(--red); text-shadow: none; }
.huge.split { display: inline-block; }
.huge.split .layer {
  position: absolute; inset: 0;
  display: block;
  pointer-events: none;
}
.huge.split .layer:first-child { position: relative; }
.huge.outline .layer { color: transparent; -webkit-text-stroke: 2px var(--red); }
.huge.split .layer.cyan { color: var(--cyan); mix-blend-mode: screen; opacity: 0; animation: chromaCyan 4s ease-in-out infinite; }
.huge.split .layer.red  { color: var(--red);  mix-blend-mode: screen; opacity: 0; animation: chromaRed  4s ease-in-out infinite; }
.huge.outline.split .layer.cyan { -webkit-text-stroke: 2px var(--cyan); color: transparent; }
.huge.outline.split .layer.red  { -webkit-text-stroke: 2px var(--red);  color: transparent; }
@keyframes chromaCyan {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  20% { transform: translate(-7px, 0); opacity: 0.85; }
  50% { transform: translate(-3px, 1px); opacity: 0.45; }
  80% { transform: translate(-9px, -1px); opacity: 0.7; }
}
@keyframes chromaRed {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  20% { transform: translate(7px, 0); opacity: 0.85; }
  50% { transform: translate(3px, -1px); opacity: 0.45; }
  80% { transform: translate(9px, 1px); opacity: 0.7; }
}
.role {
  margin-top: 1.5rem;
  color: rgba(255,255,255,0.6);
  font-size: 0.85rem; letter-spacing: 0.4em; text-transform: uppercase;
}

/* ============================================================
   3 — TRIO (each line slams in like a punch)
   ============================================================ */
.scene-trio { justify-content: flex-start; padding-left: 6vw; }
.trio { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.trio-line {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(4rem, 14vw, 13rem); line-height: 0.95;
  color: var(--fg); letter-spacing: -0.01em;
  opacity: 0;
  transform-origin: left center;
}
.trio-line.red { color: var(--red); text-shadow: 0 0 40px var(--red-glow), 0 0 80px var(--red-glow); }
.trio-line.quiet { font-size: clamp(2rem, 6vw, 5rem); color: rgba(255,255,255,0.45); font-style: italic; letter-spacing: 0.08em; }
.scene-trio.active .trio-line.slam { animation: punch 0.6s cubic-bezier(.2,1.6,.4,1) forwards; }
.scene-trio.active .trio-line[data-i="0"] { animation-delay: 0.1s; }
.scene-trio.active .trio-line[data-i="1"] { animation-delay: 1.6s; }
.scene-trio.active .trio-line[data-i="2"] { animation-delay: 3.2s; }
@keyframes punch {
  0%   { opacity: 0; transform: scale(2.5) translateX(-200px) skewX(-25deg); filter: blur(30px); }
  60%  { opacity: 1; transform: scale(0.95) translateX(0) skewX(2deg); filter: blur(0); }
  80%  { transform: scale(1.04) translateX(0); }
  100% { opacity: 1; transform: scale(1) translateX(0) skewX(0); filter: blur(0); }
}

/* ============================================================
   4 — Q&A base
   ============================================================ */
.qa { width: 100%; max-width: 1200px; padding: 0 2rem; }
.qa-q {
  color: var(--red); font-size: 1rem;
  letter-spacing: 0.4em; text-transform: uppercase;
  margin-bottom: 1.5rem;
  opacity: 0; transform: translateY(15px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.qa-a {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.8rem, 8.5vw, 8rem); line-height: 1;
  color: var(--fg); letter-spacing: 0.005em;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}
.scene.active .qa-q { opacity: 1; transform: translateY(0); }
.scene.active .qa-a { opacity: 1; transform: translateY(0); }

/* glitch variant for "EIN MENSCH MIT MASCHINEN." */
.qa-a.glitch { position: relative; }
.scene.active .qa-a.glitch { animation: glitchShift 0.18s steps(2) infinite; }
@keyframes glitchShift {
  0%   { transform: translate(0, 0); text-shadow: 0 0 0 var(--red); }
  25%  { transform: translate(-2px, 1px); text-shadow: 3px 0 0 var(--red), -3px 0 0 var(--cyan); }
  50%  { transform: translate(2px, -1px); text-shadow: -3px 0 0 var(--red), 3px 0 0 var(--cyan); }
  75%  { transform: translate(-1px, 2px); text-shadow: 1px 1px 0 var(--red); }
  100% { transform: translate(0, 0); }
}

/* run variant — letters march in left to right with motion blur */
.qa-a.run { display: inline-block; opacity: 1; transform: none; }
.qa-a.run .ch { display: inline-block; opacity: 0; transform: translateX(60px); filter: blur(8px); }
.scene.active .qa-a.run .ch { animation: marchIn 0.4s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes marchIn {
  to { opacity: 1; transform: translateX(0); filter: blur(0); }
}

/* fall variant — letters drop one by one (niemand wartet) */
.qa-a.fall { display: inline-block; opacity: 1; transform: none; }
.qa-a.fall .ch { display: inline-block; opacity: 0; transform: translateY(-200px) rotate(-30deg); }
.scene.active .qa-a.fall .ch { animation: dropFall 0.55s cubic-bezier(.5,.05,.4,1.4) forwards; }
@keyframes dropFall {
  60%  { transform: translateY(8px) rotate(2deg); opacity: 1; }
  100% { transform: translateY(0) rotate(0); opacity: 1; }
}

/* two-beat — DENKEN holds, SHIPPEN fires */
.qa-a.two-beat { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; opacity: 1; transform: none; }
.qa-a.two-beat .hold { opacity: 0; transform: translateX(-40px); transition: opacity .5s ease .2s, transform .5s ease .2s; }
.qa-a.two-beat .fire { color: var(--red); opacity: 0; transform: scale(0.6); transform-origin: left center; transition: opacity .25s ease, transform .35s cubic-bezier(.2,2,.4,1); transition-delay: 2.4s; text-shadow: 0 0 30px var(--red-glow); }
.scene.active .qa-a.two-beat .hold { opacity: 1; transform: translateX(0); }
.scene.active .qa-a.two-beat .fire { opacity: 1; transform: scale(1.05); }

/* ============================================================
   5 — BIO (heavy stamp)
   ============================================================ */
.bio { max-width: 1100px; padding: 0 1rem; text-align: center; }
.bio-h {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.8rem, 9vw, 7.5rem); line-height: 0.95;
  letter-spacing: 0.005em; margin-bottom: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 0.4em; justify-content: center;
}
.bio-h .stamp { display: inline-block; opacity: 0; transform: scale(3); filter: blur(20px); }
.bio-h .stamp.red { color: var(--red); text-shadow: 0 0 40px var(--red-glow); }
.scene-bio.active .bio-h .stamp { animation: stampDown 0.55s cubic-bezier(.5,2,.4,1) forwards; }
.scene-bio.active .bio-h .stamp:nth-child(1) { animation-delay: 0.2s; }
.scene-bio.active .bio-h .stamp:nth-child(2) { animation-delay: 1.6s; }
.scene-bio.active .bio-h .stamp:nth-child(3) { animation-delay: 3.0s; }
@keyframes stampDown {
  0%   { opacity: 0; transform: scale(3); filter: blur(20px); }
  60%  { opacity: 1; transform: scale(0.92); filter: blur(0); }
  80%  { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
.bio-p {
  font-size: clamp(1.1rem, 1.8vw, 1.6rem); line-height: 1.5; color: rgba(255,255,255,0.85); font-weight: 300;
  opacity: 0; transform: translateY(15px);
  transition: opacity 0.6s ease 4.0s, transform 0.6s ease 4.0s;
}
.scene-bio.active .bio-p { opacity: 1; transform: translateY(0); }
.bio-p .hl { background: linear-gradient(180deg, transparent 60%, var(--red) 60%); padding: 0 0.15em; color: #fff; font-weight: 700; }

/* ============================================================
   6 — STATS (digit roulette + scale-in)
   ============================================================ */
.stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
  width: min(960px, 92vw);
  background: rgba(255,255,255,0.08); padding: 2px;
}
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: #050505; padding: 2.8rem 1rem; text-align: center;
  opacity: 0; transform: scale(0.5) rotate(-6deg);
  transition: opacity 0.45s cubic-bezier(.2,1.5,.4,1), transform 0.45s cubic-bezier(.2,1.5,.4,1);
}
.scene-stats.active .stat { opacity: 1; transform: scale(1) rotate(0); }
.scene-stats.active .stat[data-i="0"] { transition-delay: 0.10s; }
.scene-stats.active .stat[data-i="1"] { transition-delay: 0.30s; }
.scene-stats.active .stat[data-i="2"] { transition-delay: 0.50s; }
.scene-stats.active .stat[data-i="3"] { transition-delay: 0.70s; }
.stat-num {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(3.5rem, 7vw, 6.5rem); line-height: 1;
  color: var(--red); text-shadow: 0 0 24px var(--red-glow);
  font-variant-numeric: tabular-nums;
}
/* slot-machine digit roulette wrapper */
.stat-num.slot { display: inline-flex; gap: 0.04em; justify-content: center; overflow: hidden; }
.stat-num.slot .digit {
  display: inline-block; min-width: 0.6em; height: 1em; line-height: 1; overflow: hidden;
  position: relative;
}
.stat-num.slot .reel {
  display: flex; flex-direction: column; align-items: center;
  transition: transform 1.4s cubic-bezier(.2,.6,.2,1);
}
.stat-num.slot .reel span { display: block; height: 1em; line-height: 1; }
.stat-num.slot .slot-suffix {
  display: inline-block;
  height: 1em; line-height: 1;
  margin-left: 0.04em;
  opacity: 0;
  animation: slotSuffixIn 0.4s 1.4s forwards;
}
@keyframes slotSuffixIn {
  from { opacity: 0; transform: translateY(0.4em); }
  to   { opacity: 1; transform: translateY(0); }
}
.stat-l { font-size: 0.7rem; margin-top: 0.8rem; color: rgba(255,255,255,0.5); letter-spacing: 0.25em; text-transform: uppercase; }

/* ============================================================
   8 — STACK LIST (slam from right with red stripe)
   ============================================================ */
.scene-stack { justify-content: flex-end; padding-right: 6vw; }
.stack-list { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }
.sl-row {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 7rem); line-height: 0.95;
  letter-spacing: 0.04em;
  opacity: 0; transform: translateX(120vw);
  position: relative;
  transition: opacity 0.05s linear, transform 0.45s cubic-bezier(.2,1.5,.5,1);
}
.sl-row.red { color: var(--red); }
.sl-row::before {
  content: ''; position: absolute; left: -3vw; top: 50%; height: 0.18em;
  width: 0; background: var(--red);
  transform: translateY(-50%);
  transition: width 0.4s ease;
}
.scene-stack.active .sl-row { opacity: 1; transform: translateX(0); }
.scene-stack.active .sl-row::before { width: 8vw; }
.scene-stack.active .sl-row[data-i="0"] { transition-delay: 0.1s, 0.5s; }
.scene-stack.active .sl-row[data-i="1"] { transition-delay: 0.5s, 0.9s; }
.scene-stack.active .sl-row[data-i="2"] { transition-delay: 0.9s, 1.3s; }
.scene-stack.active .sl-row[data-i="3"] { transition-delay: 1.3s, 1.7s; }
.scene-stack.active .sl-row[data-i="4"] { transition-delay: 1.7s, 2.1s; }

/* ============================================================
   QUOTE — base + variants
   ============================================================ */
.quote { max-width: 1100px; padding: 0 2rem; position: relative; }
.q-mark {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(7rem, 18vw, 16rem); line-height: 0.6;
  color: var(--red); position: absolute; top: -0.4em; left: -0.1em;
  opacity: 0;
  animation: qmIn 0.5s 0.1s forwards;
}
@keyframes qmIn { to { opacity: 0.85; transform: scale(1); } }
.q-text {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 5rem); line-height: 1.05;
  color: var(--fg); letter-spacing: 0.005em;
  padding-left: 2rem;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}
.scene-quote.active .q-text { opacity: 1; transform: translateY(0); }

/* "zweimal" — duplicates itself */
.q-text .dup { display: inline-block; position: relative; color: var(--red); }
.scene-quote.active .q-text .dup { animation: dupBounce 1.6s ease-in-out 1.0s; }
@keyframes dupBounce {
  0%   { text-shadow: none; }
  20%  { text-shadow: -10px 0 0 var(--cyan), 10px 0 0 var(--red); transform: scale(1.1); }
  40%  { text-shadow: -20px 0 0 var(--cyan), 20px 0 0 var(--red); }
  60%  { text-shadow: -10px 0 0 var(--cyan), 10px 0 0 var(--red); }
  100% { text-shadow: none; transform: scale(1); }
}
.q-text .codeword {
  font-family: var(--f-mono); color: var(--cyan);
  background: rgba(0,247,255,0.08);
  padding: 0 0.2em; border: 1px solid rgba(0,247,255,0.3);
}

/* "Plan-Modus stays — Drauflos crashes" */
.q-text .stay { display: inline-block; }
.q-text .crash {
  display: inline-block; color: var(--red);
  opacity: 0; transform: translateY(-300px) rotate(-15deg) scale(2);
}
.scene-quote.active .q-text .crash { animation: crashDown 0.5s cubic-bezier(.4,1.6,.4,1) 1.4s forwards; }
@keyframes crashDown {
  0%   { opacity: 0; transform: translateY(-300px) rotate(-15deg) scale(2); }
  70%  { opacity: 1; transform: translateY(20px) rotate(2deg) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

/* "zehnmal" — repeats and shakes */
.q-text .think { display: inline-block; color: var(--cyan); }
.q-text .repeat { display: inline-block; color: var(--red); }
.scene-quote.active .q-text .repeat { animation: repeatShake 0.6s ease-in-out 1.0s 3; }
@keyframes repeatShake {
  0%, 100% { transform: translateX(0); text-shadow: none; }
  25% { transform: translateX(-5px); text-shadow: -8px 0 0 rgba(255,0,51,0.5); }
  50% { transform: translateX(5px); text-shadow: 8px 0 0 rgba(255,0,51,0.5); }
  75% { transform: translateX(-3px); text-shadow: -4px 0 0 rgba(255,0,51,0.5); }
}

/* ============================================================
   ANTI HYPE — strike + explode
   ============================================================ */
.scene-anti { justify-content: flex-start; padding-left: 6vw; }
.anti { display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-start; }
.anti-line {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 5rem); line-height: 1;
  color: rgba(255,255,255,0.85); letter-spacing: 0.005em;
  position: relative;
  opacity: 0; transform: translateX(-30px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.anti-line.strike::after {
  content: ''; position: absolute;
  left: -2%; right: -2%; top: 50%; height: 0.18em;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s cubic-bezier(.6,.1,.3,1);
  box-shadow: 0 0 16px var(--red-glow);
}
.anti-line.big {
  color: var(--red); font-size: clamp(4rem, 11vw, 10rem);
  text-shadow: 0 0 40px var(--red-glow), 0 0 80px var(--red-glow);
}
.scene-anti.active .anti-line { opacity: 1; transform: translateX(0); }
.scene-anti.active .anti-line[data-i="0"] { transition-delay: 0.2s; }
.scene-anti.active .anti-line[data-i="1"] { transition-delay: 1.6s; }
.scene-anti.active .anti-line[data-i="2"] { transition-delay: 3.2s; }
.scene-anti.active .anti-line[data-i="3"] { transition-delay: 5.0s; animation: explodeIn 0.7s cubic-bezier(.2,1.8,.4,1) 5.0s both; }
.scene-anti.active .anti-line.strike[data-i="0"]::after { transform: scaleX(1); transition-delay: 0.7s; }
.scene-anti.active .anti-line.strike[data-i="1"]::after { transform: scaleX(1); transition-delay: 2.1s; }
.scene-anti.active .anti-line.strike[data-i="2"]::after { transform: scaleX(1); transition-delay: 3.7s; }
@keyframes explodeIn {
  0%   { opacity: 0; transform: scale(4); filter: blur(40px); }
  50%  { opacity: 1; transform: scale(0.9); filter: blur(0); }
  75%  { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* ============================================================
   BIG MARQUEE
   ============================================================ */
.scene-marquee { padding: 0; align-items: center; }
.big-marquee { width: 100vw; overflow: hidden; display: flex; flex-direction: column; gap: 0.2rem; }
.bm-row {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(4rem, 13vw, 12rem); line-height: 0.95;
  white-space: nowrap; color: var(--fg); letter-spacing: 0.005em;
  animation: bmRoll 6s linear infinite;
}
.bm-row.reverse { color: var(--red); animation: bmRollRev 4.5s linear infinite; text-shadow: 0 0 30px var(--red-glow); }
@keyframes bmRoll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bmRollRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ============================================================
   BUILDUP (DAS HIER · IST · KEIN · PRODUKT.)
   ============================================================ */
.buildup { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.bu-line {
  font-family: var(--f-display); font-weight: 400;
  line-height: 0.95; letter-spacing: 0.005em;
  opacity: 0; transform: scale(0.4); filter: blur(30px);
  transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
}
.bu-line[data-i="0"] { font-size: clamp(2.5rem, 7vw, 6rem); color: rgba(255,255,255,0.85); }
.bu-line[data-i="1"] { font-size: clamp(3rem, 8vw, 7rem); color: rgba(255,255,255,0.9); }
.bu-line[data-i="2"] { font-size: clamp(3.5rem, 9vw, 8rem); color: var(--fg); }
.bu-line[data-i="3"] {
  font-size: clamp(6rem, 16vw, 15rem); color: var(--red);
  text-shadow: 0 0 50px var(--red-glow), 0 0 100px var(--red-glow);
}
.scene-buildup.active .bu-line { opacity: 1; transform: scale(1); filter: blur(0); }
.scene-buildup.active .bu-line[data-i="0"] { transition-delay: 0.2s; }
.scene-buildup.active .bu-line[data-i="1"] { transition-delay: 1.4s; }
.scene-buildup.active .bu-line[data-i="2"] { transition-delay: 2.6s; }
.scene-buildup.active .bu-line[data-i="3"] { transition-delay: 4.4s; animation: explodeIn 0.7s cubic-bezier(.2,1.8,.4,1) 4.4s both; }

/* ============================================================
   CLIMAX (KAUF MICH appear · NICHT smashes)
   ============================================================ */
.scene-climax { padding: 0 1rem; }
.climax { text-align: center; }
.climax-text {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(4rem, 14vw, 13rem); line-height: 0.9;
  letter-spacing: 0.02em;
  display: flex; flex-wrap: wrap; justify-content: center;
}
.climax-text .lt, .climax-text .bang { display: inline-block; opacity: 0; }
.climax-text .lt { transform: translateY(80px) rotate(-10deg); animation: dropIn 0.45s cubic-bezier(.4,1.5,.4,1) forwards; }
.climax-text .sp { width: 0.4em; }
.climax-text .lt:nth-child(1)  { animation-delay: 0.10s; }
.climax-text .lt:nth-child(2)  { animation-delay: 0.20s; }
.climax-text .lt:nth-child(3)  { animation-delay: 0.30s; }
.climax-text .lt:nth-child(4)  { animation-delay: 0.40s; }
.climax-text .lt:nth-child(6)  { animation-delay: 0.55s; }
.climax-text .lt:nth-child(7)  { animation-delay: 0.65s; }
.climax-text .lt:nth-child(8)  { animation-delay: 0.75s; }
.climax-text .lt:nth-child(9)  { animation-delay: 0.85s; }
.climax-text .bang {
  color: var(--red); text-shadow: 0 0 30px var(--red-glow), 0 0 60px var(--red-glow);
  transform: scale(8) rotate(15deg); filter: blur(40px);
  animation: bangSmash 0.6s cubic-bezier(.3,1.8,.4,1) forwards;
}
.climax-text .bang:nth-child(11) { animation-delay: 1.6s; }
.climax-text .bang:nth-child(12) { animation-delay: 1.7s; }
.climax-text .bang:nth-child(13) { animation-delay: 1.8s; }
.climax-text .bang:nth-child(14) { animation-delay: 1.9s; }
.climax-text .bang:nth-child(15) { animation-delay: 2.0s; }
@keyframes dropIn { to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes bangSmash {
  0%   { opacity: 0; transform: scale(8) rotate(15deg); filter: blur(40px); }
  60%  { opacity: 1; transform: scale(0.9) rotate(-3deg); filter: blur(0); }
  80%  { transform: scale(1.08) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
}
.climax-sub {
  margin-top: 2.5rem; font-size: clamp(1.2rem, 2vw, 1.6rem); letter-spacing: 0.4em;
  color: var(--cyan); opacity: 0; animation: fadeIn 1s 3s forwards;
  text-shadow: 0 0 20px rgba(0,247,255,0.6);
}
@keyframes fadeIn { to { opacity: 1; } }

/* ============================================================
   OUTRO
   ============================================================ */
.outro { text-align: center; }
.sig-name {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(3rem, 8vw, 7rem); color: var(--fg);
  letter-spacing: 0.02em; margin-bottom: 1.5rem;
  opacity: 0; animation: fadeUp 1.2s 0.3s forwards;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.sig-meta { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.75rem; color: rgba(255,255,255,0.45); letter-spacing: 0.25em; text-transform: uppercase; opacity: 0; animation: fadeIn 1s 1.2s forwards; }

/* ============================================================
   BASS-REACTIVE PULSE — driven by JS via --bass / --bass-glow
   Only modifies text-shadow/filter intensity → never touches
   transform → never collides with entry animations.
   ============================================================ */
:root { --bass: 0; --mid: 0; --treble: 0; --bass-glow: 40px; --bass-thick: 1px; }
.trio-line.red {
  text-shadow:
    0 0 var(--bass-glow) var(--red),
    0 0 calc(var(--bass-glow) * 1.5) var(--red-glow);
}
.bu-line[data-i="3"] {
  text-shadow:
    0 0 var(--bass-glow) var(--red),
    0 0 calc(var(--bass-glow) * 2) var(--red-glow);
}
.climax-text .bang {
  text-shadow:
    0 0 var(--bass-glow) var(--red),
    0 0 calc(var(--bass-glow) * 2) var(--red-glow);
}
.anti-line.big {
  text-shadow:
    0 0 var(--bass-glow) var(--red),
    0 0 calc(var(--bass-glow) * 2) var(--red-glow);
}
#progress { box-shadow: 0 0 calc(8px + var(--bass) * 30px) var(--red); }
.dot { box-shadow: 0 0 calc(8px + var(--bass) * 20px) var(--red); }

/* ============================================================
   v4 — PASSWORT-GATE
   ============================================================ */
#gate {
  position: fixed; inset: 0; z-index: 200;
  background:
    radial-gradient(ellipse at center, #160000 0%, #000 70%),
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(255,0,51,0.04) 3px 4px);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;
}
#gate.gone { opacity: 0; transform: scale(1.06); filter: blur(20px); pointer-events: none; }
.gate-inner { text-align: center; max-width: 90vw; padding: 2rem; }
.gate-tag { color: rgba(255,255,255,0.45); font-size: 0.7rem; letter-spacing: 0.5em; text-transform: uppercase; margin-bottom: 0.8rem; }
.gate-name {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(4rem, 14vw, 13rem); line-height: 1.0;
  letter-spacing: 0.02em; color: var(--red);
  text-shadow: 0 0 40px var(--red), 0 0 90px var(--red-glow);
  margin-bottom: 2.2rem;
  animation: gateGlow 2.4s ease-in-out infinite alternate;
}
@keyframes gateGlow {
  from { text-shadow: 0 0 30px var(--red), 0 0 60px var(--red-glow); }
  to   { text-shadow: 0 0 60px var(--red), 0 0 120px var(--red-glow), 0 0 200px var(--red); }
}
#gate-form { display: flex; gap: 0.6rem; justify-content: center; }
#gate-pw {
  background: rgba(0,0,0,0.7); border: 2px solid rgba(255,255,255,0.15);
  color: var(--fg); font-family: var(--f-mono); font-weight: 800;
  font-size: 1.6rem; letter-spacing: 0.4em; text-align: center;
  padding: 1rem 1.4rem; width: 12rem; outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#gate-pw:focus { border-color: var(--red); box-shadow: 0 0 20px var(--red-glow); }
#gate-btn {
  padding: 1rem 1.6rem; border: 2px solid var(--fg);
  font-family: var(--f-mono); font-weight: 700; letter-spacing: 0.3em;
  color: var(--fg); position: relative; overflow: hidden;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.2s ease;
}
#gate-btn:hover { color: #000; background: var(--red); border-color: var(--red); }
.gate-hint { margin-top: 1.2rem; font-size: 0.7rem; color: rgba(255,255,255,0.35); letter-spacing: 0.3em; text-transform: uppercase; }
#gate-err { margin-top: 0.8rem; font-size: 0.75rem; color: var(--red); height: 1em; opacity: 0; transition: opacity 0.2s ease; letter-spacing: 0.2em; }
#gate-err.show { opacity: 1; }
.shake-gate { animation: gateShake 0.4s ease; }
@keyframes gateShake {
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-12px); }
  40%{ transform: translateX(10px); }
  60%{ transform: translateX(-6px); }
  80%{ transform: translateX(4px); }
}

/* ============================================================
   v4 — SONG PICKER
   ============================================================ */
#picker {
  position: fixed; inset: 0; z-index: 150;
  background: radial-gradient(ellipse at center, #0a0a0a 0%, #000 80%);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.96);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
#picker[hidden] { display: none; }
#picker.shown { opacity: 1; transform: scale(1); }
.picker-inner { width: min(1100px, 92vw); text-align: center; }
.picker-tag { color: rgba(255,255,255,0.5); font-size: 0.72rem; letter-spacing: 0.5em; text-transform: uppercase; margin-bottom: 0.8rem; }
.picker-name {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(3.5rem, 11vw, 9rem); line-height: 1.0;
  margin-bottom: 2.5rem; letter-spacing: 0.02em;
}
.picker-name span { color: var(--red); text-shadow: 0 0 30px var(--red-glow); }
.picker-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 720px) { .picker-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.track-card {
  text-align: left; padding: 2rem 1.6rem;
  border: 2px solid rgba(255,0,51,0.35);
  background: linear-gradient(180deg, rgba(255,0,51,0.04), rgba(0,0,0,0.6));
  position: relative; overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.track-card::before {
  content:''; position:absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,0,51,0.18) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform 0.6s ease;
}
.track-card:hover::before { transform: translateX(100%); }
.track-card:hover { border-color: var(--red); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(255,0,51,0.35); }
.track-card.cyan { border-color: rgba(0,247,255,0.35); background: linear-gradient(180deg, rgba(0,247,255,0.04), rgba(0,0,0,0.6)); }
.track-card.cyan::before { background: linear-gradient(120deg, transparent 30%, rgba(0,247,255,0.18) 50%, transparent 70%); }
.track-card.cyan:hover { border-color: var(--cyan); box-shadow: 0 12px 40px rgba(0,247,255,0.35); }
.tc-num { color: rgba(255,255,255,0.4); font-size: 0.8rem; letter-spacing: 0.4em; margin-bottom: 0.4rem; }
.tc-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.0;
  color: var(--fg); margin-bottom: 0.6rem; letter-spacing: 0.01em;
}
.track-card:hover .tc-title { color: var(--red); text-shadow: 0 0 20px var(--red-glow); }
.track-card.cyan:hover .tc-title { color: var(--cyan); text-shadow: 0 0 20px rgba(0,247,255,0.6); }
.tc-meta { color: rgba(255,255,255,0.55); font-size: 0.72rem; letter-spacing: 0.18em; margin-bottom: 0.4rem; text-transform: uppercase; }
.tc-vibe { color: rgba(255,255,255,0.35); font-size: 0.7rem; letter-spacing: 0.15em; }
.picker-foot { color: rgba(255,255,255,0.3); font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase; }

/* ============================================================
   v4 — LIVE LYRICS LAYER (mitsingend, am unteren Rand)
   ============================================================ */
#lyrics-layer {
  position: fixed; left: 0; right: 0; bottom: 5rem; z-index: 70;
  pointer-events: none; padding: 0 2rem;
  display: flex; justify-content: center; align-items: flex-end;
  min-height: 4rem;
}
#lyrics-line {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.4rem, 3.5vw, 2.6rem); line-height: 1.1;
  color: var(--fg); letter-spacing: 0.02em; text-align: center;
  text-shadow: 0 2px 20px rgba(0,0,0,0.9), 0 0 30px rgba(0,0,0,0.95);
  max-width: 90vw;
  text-transform: uppercase;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#lyrics-line:not(:empty) { opacity: 0.92; transform: translateY(0); }
#lyrics-line.flash-in { animation: lyricFlash 0.45s cubic-bezier(.4,1.5,.4,1); }
@keyframes lyricFlash {
  0%   { opacity: 0; transform: translateY(20px) scale(0.94); filter: blur(6px); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.04); filter: blur(0); }
  100% { opacity: 0.92; transform: translateY(0) scale(1); filter: blur(0); }
}
body.theme-cyan #lyrics-line { color: #f0fdff; }

/* ============================================================
   v4 — THEME CYAN (Unmöglich Variante)
   ============================================================ */
body.theme-cyan {
  --red: #00f7ff;
  --red-glow: #00f7ff66;
}
body.theme-cyan #ticker { background: rgba(0,247,255,0.95); color: #000; }
body.theme-cyan .dot { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
body.theme-cyan #progress { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
body.theme-cyan .qa-q { color: var(--cyan); }
body.theme-cyan .trio-line.cyan { color: var(--cyan); text-shadow: 0 0 40px var(--cyan), 0 0 80px rgba(0,247,255,0.4); }
body.theme-cyan .stat-num { color: var(--cyan); text-shadow: 0 0 24px rgba(0,247,255,0.5); }
body.theme-cyan .q-mark { color: var(--cyan); }
body.theme-cyan .anti-line.strike::after { background: var(--cyan); box-shadow: 0 0 16px rgba(0,247,255,0.5); }
body.theme-cyan .anti-line.big { color: var(--cyan); }
body.theme-cyan .sl-row.red { color: var(--cyan); }
body.theme-cyan .sl-row::before { background: var(--cyan); }
body.theme-cyan .bm-row.reverse { color: var(--cyan); text-shadow: 0 0 30px rgba(0,247,255,0.4); }
body.theme-cyan #controls button:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 12px rgba(0,247,255,0.4); }
body.theme-cyan .bio-p .hl { background: linear-gradient(180deg, transparent 60%, var(--cyan) 60%); color: #000; }

/* ============================================================
   v4 — TRIO right-aligned variant (für stack-replacement)
   ============================================================ */
.trio.align-right {
  align-items: flex-end;
  margin-left: auto;
}
.scene-trio:has(.trio.align-right) { justify-content: flex-end; padding-left: 0; padding-right: 6vw; }
.trio-line.white { color: var(--fg); }
.trio-line.cyan { color: var(--cyan); text-shadow: 0 0 40px rgba(0,247,255,0.5), 0 0 80px rgba(0,247,255,0.3); }

/* ============================================================
   v4 — SUBLINE (zwei Zeilen, oben kleiner / unten gross)
   ============================================================ */
.scene-subline { padding: 0 6vw; }
.subline-wrap { text-align: center; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.5rem; }
.sl-top {
  font-family: var(--f-body); font-weight: 300; font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.4rem); line-height: 1.2;
  color: rgba(255,255,255,0.55); letter-spacing: 0.02em;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.sl-bottom {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(3rem, 9vw, 7.5rem); line-height: 1.0;
  color: var(--red); text-shadow: 0 0 36px var(--red-glow);
  letter-spacing: 0.005em;
  opacity: 0; transform: scale(0.8);
  transition: opacity 0.5s ease 0.6s, transform 0.5s cubic-bezier(.2,1.6,.4,1) 0.6s;
}
.sl-bottom strong { color: var(--fg); font-weight: 400; }
.scene-subline.active .sl-top { opacity: 1; transform: translateY(0); }
.scene-subline.active .sl-bottom { opacity: 1; transform: scale(1); }

/* ============================================================
   v4 — STAMP scene (one stamp per scene now)
   ============================================================ */
.scene-stamp .bio-h { justify-content: center; }
.scene-stamp .bio-h .stamp { animation: stampDown 0.55s cubic-bezier(.5,2,.4,1) 0.15s forwards; }
.scene-stamp.active .bio-h .stamp.white { color: var(--fg); }
.scene-stamp.active .bio-h .stamp.cyan { color: var(--cyan); text-shadow: 0 0 40px rgba(0,247,255,0.5); }

/* ============================================================
   v4 — BUILDUP variants (single line per scene)
   ============================================================ */
.scene-buildup .buildup { text-align: center; }
.bu-line.bu-sm { font-size: clamp(2.5rem, 7vw, 6rem); color: rgba(255,255,255,0.85); text-shadow: none; }
.bu-line.bu-md { font-size: clamp(3rem, 8.5vw, 7rem); color: rgba(255,255,255,0.95); text-shadow: none; }
.bu-line.bu-lg { font-size: clamp(3.5rem, 10vw, 8.5rem); color: var(--fg); text-shadow: 0 0 24px rgba(255,255,255,0.18); }
.bu-line.bu-xl {
  font-size: clamp(6rem, 17vw, 16rem); color: var(--fg);
  text-shadow: 0 0 40px rgba(255,255,255,0.25);
}
.bu-line.bu-red {
  color: var(--red);
  text-shadow:
    0 0 var(--bass-glow) var(--red),
    0 0 calc(var(--bass-glow) * 2) var(--red-glow);
}
.bu-line.bu-cyan {
  color: var(--cyan);
  text-shadow: 0 0 50px var(--cyan), 0 0 100px rgba(0,247,255,0.4);
}
.scene-buildup.active .bu-line { transition-delay: 0s; }
.scene-buildup.active .bu-line.bu-xl { animation: explodeIn 0.7s cubic-bezier(.2,1.8,.4,1) 0.1s both; }

/* ============================================================
   v4 — CLIMAX cyan variant
   ============================================================ */
.climax.climax-cyan .bang {
  color: var(--cyan);
  text-shadow: 0 0 30px var(--cyan), 0 0 60px rgba(0,247,255,0.5);
}
.climax.climax-cyan + .climax-sub,
.climax.climax-cyan .climax-sub { color: var(--red); }

/* ============================================================
   v4 — INITIAL HIDDEN (gate/picker/world)
   ============================================================ */
[hidden] { display: none !important; }

/* ============================================================
   v4 — SCENE TYPE COMPATIBILITY
   v3 CSS targeted .scene-trio / .scene-bio / .scene-quote / .scene-anti
   v4 JS generates .scene-slam / .scene-stamp / .scene-quote1 / .scene-twobeat /
                   .scene-crash / .scene-repeatquote / .scene-antiline / .scene-big
   These rules re-bind v4 classes to the v3 animations.
   ============================================================ */

/* SLAM (single trio-line per scene) */
.scene-slam { justify-content: flex-start; padding-left: 6vw; align-items: center; display: flex; }
.scene-slam:has(.trio.align-right) { justify-content: flex-end; padding-left: 0; padding-right: 6vw; }
.scene-slam.active .trio-line.slam { animation: punch 0.6s cubic-bezier(.2,1.6,.4,1) 0.05s forwards; }

/* STAMP (single bio-h stamp per scene) */
.scene-stamp { padding: 0 1rem; align-items: center; }
.scene-stamp .bio { max-width: 1200px; }
.scene-stamp .bio-h { justify-content: center; margin-bottom: 0; }
.scene-stamp.active .bio-h .stamp { animation: stampDown 0.55s cubic-bezier(.5,2,.4,1) 0.15s forwards; }

/* QUOTE variants */
.scene-quote1, .scene-twobeat, .scene-crash, .scene-repeatquote {
  align-items: center; padding: 0 2rem;
}
.scene-quote1.active .q-text,
.scene-crash.active .q-text,
.scene-repeatquote.active .q-text { opacity: 1; transform: translateY(0); }

/* TWOBEAT — already a qa, but needs scene activation */
.scene-twobeat.active .qa-q { opacity: 1; transform: translateY(0); }
.scene-twobeat.active .qa-a { opacity: 1; transform: translateY(0); }

/* ANTILINE (single line per scene with strike) */
.scene-antiline { justify-content: flex-start; padding-left: 6vw; }
.scene-antiline.active .anti-line { opacity: 1; transform: translateX(0); transition-delay: 0.15s; }
.scene-antiline.active .anti-line.strike::after { transform: scaleX(1); transition-delay: 0.7s; }

/* BIG (single explode-in line) */
.scene-big { align-items: center; justify-content: center; }
.scene-big.active .anti-line.big {
  opacity: 1; transform: translateX(0);
  animation: explodeIn 0.7s cubic-bezier(.2,1.8,.4,1) 0.15s both;
}

/* QA scenes — make sure scene-qa.active triggers q+a entry */
.scene-qa.active .qa-q { opacity: 1; transform: translateY(0); }
.scene-qa.active .qa-a { opacity: 1; transform: translateY(0); }
.scene-qa.active .qa-a.glitch { animation: glitchShift 0.18s steps(2) infinite; }
.scene-qa.active .qa-a.run .ch { animation: marchIn 0.4s cubic-bezier(.2,.9,.3,1) forwards; }
.scene-qa.active .qa-a.fall .ch { animation: dropFall 0.55s cubic-bezier(.5,.05,.4,1.4) forwards; }

/* REPEATQUOTE — animate the .repeat shake */
.scene-repeatquote.active .q-text .repeat { animation: repeatShake 0.6s ease-in-out 1.0s 3; }

/* CRASH — animate the .crash drop */
.scene-crash.active .q-text .crash { animation: crashDown 0.5s cubic-bezier(.4,1.6,.4,1) 1.4s forwards; }

/* MARQUEE — already standalone via .scene-marquee, but JS generates .scene-marquee — OK */

/* QUOTE1 — text reveal handled by transition above */
/* (no extra animation needed) */

/* OUTRO scene → just .scene-outro container, animations on .sig-name etc */
.scene-outro { align-items: center; }

/* ============================================================
   ENDCARD — bridge between climax and signature outro
   ============================================================ */
.scene-endcard { align-items: center; justify-content: center; }
.endcard {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
  padding: 2rem;
}
.endcard-cta {
  font-family: var(--f-display);
  font-size: clamp(2.8rem, 9vw, 8rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 0.9;
  filter: drop-shadow(0 0 calc(20px * var(--bass, 0.3)) currentColor);
  animation: ecBreath 1.4s ease-in-out infinite alternate;
}
.endcard-cta .ec-lt {
  display: inline-block;
  animation: ecLetterIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards;
}
.endcard-cta .ec-lt:nth-child(2) { animation-delay: 0.04s; }
.endcard-cta .ec-lt:nth-child(3) { animation-delay: 0.08s; }
.endcard-cta .ec-lt:nth-child(4) { animation-delay: 0.12s; }
.endcard-cta .ec-lt:nth-child(5) { animation-delay: 0.16s; }
.endcard-cta .ec-lt:nth-child(6) { animation-delay: 0.20s; }
.endcard-cta .ec-lt:nth-child(7) { animation-delay: 0.24s; }
.endcard-cta .ec-lt:nth-child(8) { animation-delay: 0.28s; }
.endcard-cta .ec-lt:nth-child(9) { animation-delay: 0.32s; }
.endcard-cta .ec-lt:nth-child(10){ animation-delay: 0.36s; }
.endcard-cta .ec-lt:nth-child(11){ animation-delay: 0.40s; }
.endcard-cta .ec-lt:nth-child(12){ animation-delay: 0.44s; }
.endcard-cta .ec-lt:nth-child(13){ animation-delay: 0.48s; }
.endcard-cta .ec-lt:nth-child(14){ animation-delay: 0.52s; }
.endcard-cta .ec-lt:nth-child(15){ animation-delay: 0.56s; }
.endcard-cta .ec-lt:nth-child(16){ animation-delay: 0.60s; }
.endcard-cta .ec-lt:nth-child(17){ animation-delay: 0.64s; }
.endcard-cta .ec-lt:nth-child(18){ animation-delay: 0.68s; }
.endcard-cta .ec-lt:nth-child(19){ animation-delay: 0.72s; }
.endcard-cta .ec-lt:nth-child(20){ animation-delay: 0.76s; }

.endcard-red .endcard-cta { color: var(--red); }
.endcard-cyan .endcard-cta { color: var(--cyan); }

.endcard-mail {
  font-size: clamp(1rem, 2.2vw, 1.6rem);
  letter-spacing: 0.18em;
  color: var(--fg);
  opacity: 0; animation: fadeIn 0.6s 0.9s forwards;
  display: inline-flex; align-items: center; gap: 0.5rem;
  text-transform: lowercase;
}
.endcard-mail .ec-cur {
  display: inline-block;
  animation: ecBlink 0.85s steps(2) infinite;
  color: currentColor;
  opacity: 0.85;
}
.endcard-red  .endcard-mail .ec-cur { color: var(--red); }
.endcard-cyan .endcard-mail .ec-cur { color: var(--cyan); }

.endcard-tag {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  opacity: 0; animation: fadeIn 0.6s 1.4s forwards;
}

@keyframes ecBreath {
  0%   { transform: scale(1.00); }
  100% { transform: scale(1.04); }
}
@keyframes ecLetterIn {
  0%   { opacity: 0; transform: translateY(40px) rotate(-3deg); }
  100% { opacity: 1; transform: translateY(0)    rotate(0); }
}
@keyframes ecBlink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ============================================================
   v4 — kleine Korrekturen
   ============================================================ */
body.playing #lyrics-layer { /* nur sichtbar im world */ }
body:not(.playing) #lyrics-layer { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
  #hud { font-size: 0.62rem; padding: 0 0.8rem; }
  #timeline { left: 0.8rem; right: 0.8rem; bottom: 2.6rem; }
  #controls { right: 0.8rem; bottom: 3.6rem; }
  .scene-trio { padding-left: 1.5rem; }
  .scene-anti { padding-left: 1.5rem; }
  .scene-stack { padding-right: 1.5rem; }
  .scene-boot { padding-left: 1.5rem; }
  #ticker { font-size: 0.62rem; height: 1.5rem; }
  #gate-pw { width: 9rem; font-size: 1.3rem; padding: 0.85rem 1rem; }
  #gate-btn { padding: 0.85rem 1.1rem; font-size: 0.85rem; }
  .gate-name { font-size: clamp(3rem, 18vw, 6rem); }
  .picker-name { font-size: clamp(2.6rem, 14vw, 5rem); margin-bottom: 1.6rem; }
  .track-card { padding: 1.4rem 1.2rem; }
  .tc-title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  #lyrics-layer { bottom: 4rem; padding: 0 1rem; min-height: 3rem; }
  #lyrics-line { font-size: clamp(1.1rem, 5vw, 1.6rem); }
}

/* ============================================================
   v13 — IMAGE / TERMINAL / CHART scenes
   ============================================================ */

/* IMAGE SCENE — fullbleed cinematic with ken burns + overlay */
.scene-image { padding: 0 !important; align-items: stretch !important; }
.img-wrap {
  position: absolute; inset: 0;
  overflow: hidden;
  background: #000;
}
.img-wrap img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.0);
  filter: brightness(0.55) contrast(1.15) saturate(1.05);
  animation: kenBurns 12s ease-out forwards, imgFadeIn 0.9s ease-out forwards;
}
.img-wrap.tint-red img    { filter: brightness(0.5) contrast(1.2) saturate(1.1) hue-rotate(-12deg); }
.img-wrap.tint-cyan img   { filter: brightness(0.55) contrast(1.18) saturate(1.05) hue-rotate(12deg); }
.img-wrap::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.85) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.0) 70%, rgba(0,0,0,0.7) 100%);
  z-index: 2;
}
.img-wrap::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  z-index: 3;
  pointer-events: none;
}
@keyframes kenBurns {
  from { transform: scale(1.0) translate(0, 0); }
  to   { transform: scale(1.18) translate(-2%, -1.5%); }
}
@keyframes imgFadeIn { to { opacity: 1; } }

.img-overlay {
  position: relative; z-index: 4;
  display: flex; flex-direction: column;
  justify-content: flex-end; align-items: flex-start;
  padding: clamp(2rem, 6vw, 5rem);
  height: 100%;
  pointer-events: none;
}
.img-overlay-tag {
  font-family: var(--f-mono);
  font-size: clamp(0.7rem, 1.4vw, 1rem);
  letter-spacing: 0.25em;
  color: var(--accent, #ff0033);
  opacity: 0;
  animation: imgTagIn 0.6s 0.3s forwards;
  margin-bottom: 0.6rem;
}
.img-overlay-text {
  font-family: var(--f-display);
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: #fff;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(0.5em);
  animation: imgTextIn 0.8s 0.5s cubic-bezier(.2,.9,.2,1) forwards;
  text-shadow: 0 0 calc(var(--bass-glow, 40px) * 0.3) rgba(255,255,255,0.15);
}
.img-overlay-sub {
  font-family: var(--f-mono);
  font-size: clamp(0.85rem, 1.6vw, 1.2rem);
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.75);
  opacity: 0;
  animation: imgTagIn 0.6s 1.0s forwards;
  margin-top: 0.7rem;
}
@keyframes imgTagIn  { to { opacity: 1; } }
@keyframes imgTextIn { to { opacity: 1; transform: translateY(0); } }
.theme-cyan .img-overlay-tag { color: var(--cyan); }

/* TERMINAL SCENE — live-typed deploy log */
.scene-terminal { padding: 2rem !important; }
.terminal {
  width: min(900px, 95vw);
  background: rgba(8, 8, 12, 0.92);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font-family: var(--f-mono);
  font-size: clamp(0.78rem, 1.3vw, 1.05rem);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.7),
    0 0 calc(var(--bass-glow, 40px) * 0.4) rgba(var(--accent-rgb, 255,0,51), 0.25);
  overflow: hidden;
  position: relative;
}
.terminal::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.term-bar {
  display: flex; align-items: center;
  padding: 0.45rem 0.9rem;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  gap: 0.4rem;
}
.term-bar .dot {
  width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: rgba(255,255,255,0.18);
}
.term-bar .dot.r { background: #ff5f56; }
.term-bar .dot.y { background: #ffbd2e; }
.term-bar .dot.g { background: #27c93f; }
.term-bar .title {
  margin-left: 0.8rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}
.term-body {
  padding: 1.1rem 1.2rem;
  min-height: clamp(280px, 50vh, 480px);
  color: rgba(220,220,220,0.95);
  line-height: 1.5;
  position: relative;
}
.term-line { white-space: pre-wrap; }
.term-prompt   { color: var(--cyan); }
.term-cmd      { color: #fff; font-weight: 500; }
.term-grey     { color: rgba(180,180,180,0.6); }
.term-green    { color: #27c93f; }
.term-cyan     { color: var(--cyan); }
.term-red      { color: var(--red); }
.term-cursor {
  display: inline-block;
  width: 0.55em; height: 1em;
  background: var(--cyan);
  vertical-align: text-bottom;
  animation: termBlink 0.7s steps(2) infinite;
  margin-left: 2px;
}
@keyframes termBlink { 50% { opacity: 0; } }

/* CHART SCENE — animated horizontal bars */
.scene-chart { padding: 2rem !important; }
.chart {
  width: min(820px, 92vw);
}
.chart-title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 5vw, 3.6rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
  color: var(--accent, #ff0033);
  text-shadow: 0 0 calc(var(--bass-glow,40px)*0.3) rgba(var(--accent-rgb,255,0,51), 0.4);
}
.theme-cyan .chart-title { color: var(--cyan); }
.chart-row {
  display: grid;
  grid-template-columns: 9rem 1fr 5rem;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.7rem;
  font-family: var(--f-mono);
}
.chart-label {
  font-size: clamp(0.78rem, 1.4vw, 1rem);
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.7);
  text-transform: lowercase;
}
.chart-track {
  height: 1.7rem;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.chart-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--red), #ff5577);
  border-radius: 2px;
  transition: width 1.4s cubic-bezier(.2,.9,.3,1);
  box-shadow: 0 0 18px rgba(255,0,51,0.5);
  position: relative;
}
.chart-bar.cyan { background: linear-gradient(90deg, var(--cyan), #88f5ff); box-shadow: 0 0 18px rgba(0,247,255,0.5); }
.chart-bar.green { background: linear-gradient(90deg, #27c93f, #66ff88); box-shadow: 0 0 18px rgba(39,201,63,0.5); }
.chart-bar::after {
  content: '';
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 3px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 12px rgba(255,255,255,0.7);
}
.chart-value {
  font-size: clamp(0.95rem, 1.7vw, 1.25rem);
  color: #fff;
  text-align: right;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.4s 1.0s;
}
.chart-row.shown .chart-value { opacity: 1; }