:root {
  --p: 0;
  --intro-scroll: 2000px;
  --logo-size: 40.125vw;
  --logo-exit: 0.1694;
  --logo-scale-start: 1;
  --logo-scale-end: 100;
  --logo-origin-x: 50%;
  --logo-origin-y: 44%;
  --logo-hide-start: 0.99;
  --logo-aspect: 0.6956;
  --screen-left: 6.7%;
  --screen-top: 7.2%;
  --screen-width: 86.5%;
  --screen-height: 85.7%;
  --screen-radius: 4%;
  --crt-yellow: #ffd300;
  --chat-height: 21.65%;
  --chat-pad-x: 1.5rem;
  --chat-pad-y: 1rem;
  --stack-perspective: 900px;
  --stack-step-y: -38px;
  --stack-step-z: 150px;
  --sleeve-x: 50%;
  --sleeve-y: 50%;
  --sleeve-size: 20%;
  --panel-video-height: 220px;
  --arrow-scale: 1.2;
  --open-shift-x: 15%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  background: #000;
}

html {
  scrollbar-gutter: stable;
}

.intro {
  height: calc(var(--intro-scroll) + 100vh);
}

#intro-video {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logo {
  position: fixed;
  top: 50%;
  left: 50%;
  width: var(--logo-size);
  height: auto;
  z-index: 2;
  pointer-events: none;
  filter: url(#grain);
  transform-origin: var(--logo-origin-x) var(--logo-origin-y);
  --q: clamp(0, calc(var(--p) / var(--logo-exit)), 1);
  transform: translate(-50%, -50%) scale(calc(
    var(--logo-scale-start) + (var(--logo-scale-end) - var(--logo-scale-start)) * var(--q) * var(--q) * var(--q)
  ));
  opacity: clamp(0, calc((1 - var(--q)) / (1 - var(--logo-hide-start))), 1);
}

/* Vertikale Mitte der Luecke zwischen Logo-Unterkante und Bildunterkante:
   Logo-Unterkante liegt bei 50vh + Logo-Hoehe/2, Bildunterkante bei 100vh. */
.bottom-bar {
  position: fixed;
  top: calc(75vh + var(--logo-size) * var(--logo-aspect) / 4);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  font: italic 700 21px "neue-haas-grotesk-display", sans-serif;
  color: #ffdf00;
}
#sound-toggle, .intro-bar button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
}
#sound-toggle.hidden { display: none; }
#sound-toggle svg { width: 1em; height: 1em; display: block; }
#sound-toggle .wave, #sound-toggle .mute { display: none; }
#sound-toggle.on .wave { display: inline; }
#sound-toggle:not(.on) .mute { display: inline; }
.intro-bar { display: flex; align-items: center; gap: 0.6em; font: 400 21px "pf-videotext", sans-serif; }

.monitor {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.monitor.visible { background: #000; pointer-events: auto; }
@media (min-aspect-ratio: 2/1) {
  .monitor { inset: 0 auto; left: 50%; width: calc(100dvh * 2); transform: translateX(-50%); }
}
@media (max-aspect-ratio: 4/3) {
  .monitor { inset: 0 auto; left: 50%; width: calc(100dvh * 4 / 3); transform: translateX(-50%); }
}

.monitor-screen, .ui {
  position: absolute;
  left: var(--screen-left);
  top: var(--screen-top);
  width: var(--screen-width);
  height: var(--screen-height);
  opacity: 0;
}
.monitor.visible .ui { opacity: 1; }
/* .ui deckt den Screen-Bereich ab und faengt sonst jeden Klick vor dem
   Stapel ab - nur die interaktiven Teilbaeume bekommen pointer-events zurueck. */
.ui { pointer-events: none; }
.nav, .chat, .nav-logo { pointer-events: auto; }
.monitor.visible .monitor-screen.active { opacity: 1; }
.monitor.channel .monitor-screen.active { opacity: 0; }
.monitor.channel .nav, .monitor.channel .chat { display: none; }
.monitor-screen { object-fit: cover; overflow: hidden; border-radius: var(--screen-radius); }
.monitor-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; pointer-events: none;
  opacity: 0; transform-origin: center;
}

.nav-logo { position: absolute; top: 9%; left: 6%; height: 142.56px; cursor: pointer; }
.nav { position: absolute; top: 32.5%; left: 6%; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.nav-link {
  padding: 0.1em 0.35em;
  color: var(--crt-yellow);
  font: 400 22px/1.3 "pf-videotext", sans-serif;
  text-transform: uppercase; text-decoration: none; letter-spacing: 0.04em;
  background: none; border: none; cursor: pointer; text-align: left;
}
.nav-link:hover { background: var(--crt-yellow); color: #fff; }

.chat {
  position: absolute; right: 9%; top: 32.5%; width: 20.8%;
  display: flex; flex-direction: column; border: 2px solid var(--crt-yellow);
}
/* Balkenhoehe = Menuezeilenhoehe: gleiche font-size, line-height und
   vertikales Padding wie .nav-link. Nicht per fester Hoehe erzwingen. */
.chat-head {
  display: flex; align-items: center;
  padding: 0.1em 0.4em; background: var(--crt-yellow); color: #fff;
  font: 400 22px/1.3 "pf-videotext", sans-serif;
  text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer;
}
/* Ruhezustand: nur die Titelleiste sichtbar. main.js animiert die Hoehe
   inline von 0 auf den in --chat-height hinterlegten Zielwert. */
.chat-body {
  height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.chat-log {
  flex: 1; min-height: 0; background: rgba(0, 0, 0, 0.6); color: #fff;
  font: 400 1.125rem "pf-videotext", sans-serif;
  padding: var(--chat-pad-y) var(--chat-pad-x);
  display: flex; flex-direction: column; gap: 0.4em;
  overflow-y: auto; scrollbar-width: none;
}
.chat-log::-webkit-scrollbar { display: none; }
.chat-question { font-style: italic; }
.chat-input {
  padding: var(--chat-pad-y) var(--chat-pad-x); border: none; border-top: 2px solid var(--crt-yellow);
  background: rgba(0, 0, 0, 0.6); color: #fff;
  font: 400 1.125rem "pf-videotext", sans-serif;
}
.chat-input::placeholder { color: #fff; opacity: 1; }
.chat-input:focus { outline: none; }

.glitch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: #000;
  filter: url(#static-noise);
}
/* Ab Interface-Zustand auf den Screen-Bereich begrenzt, damit das Channel-
   Rauschen nie ueber den Rahmen laeuft. Der volle Viewport gilt nur waehrend
   des Intro-Uebergangs, bevor diese Klasse gesetzt wird. */
.glitch.confined {
  inset: auto;
  left: var(--screen-left);
  top: var(--screen-top);
  width: var(--screen-width);
  height: var(--screen-height);
  border-radius: var(--screen-radius);
}

.creations {
  position: absolute;
  left: var(--screen-left); top: var(--screen-top);
  width: var(--screen-width); height: var(--screen-height);
  overflow: hidden; border-radius: var(--screen-radius);
  opacity: 0; pointer-events: none;
}
.monitor.visible .creations.visible { opacity: 1; pointer-events: auto; }
.creations-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* z-index:1 (eigener Stacking-Context durch perspective) haelt den Stapel
   vor .creations-panel; pointer-events:none + Ruecknahme auf .sleeve
   verhindert, dass inset:0 Klicks auf .creations-nav abfaengt. */
.sleeve-stack {
  position: absolute; inset: 0;
  perspective: var(--stack-perspective);
  perspective-origin: var(--sleeve-x) var(--sleeve-y);
  z-index: 1;
  pointer-events: none;
  opacity: 1; transition: opacity var(--full-ms) ease-out;
}
/* Reine Tiefenachse: kein seitlicher Versatz, keine Rotation. perspective-origin
   liegt exakt auf dem Huellen-Anker, damit die Huellen beim Verkleinern nicht
   seitlich wandern, sondern nur nach hinten oben staffeln.
   Position/Skalierung/Deckkraft kommen ausschliesslich aus --depth (0 = vorne),
   das main.js pro Huelle setzt. Kein einzelnes Feintuning pro Huelle hier. */
.sleeve {
  position: absolute;
  left: var(--sleeve-x); top: var(--sleeve-y);
  width: var(--sleeve-size); aspect-ratio: 1;
  cursor: pointer;
  pointer-events: auto;
  z-index: calc(4 - var(--depth));
  opacity: calc(1 - var(--depth) * 0.15);
  filter: brightness(calc(1 - var(--depth) * 0.12));
  transform:
    translate(-50%, -50%)
    translateY(calc(var(--stack-step-y) * var(--depth)))
    translateZ(calc(var(--stack-step-z) * -1 * var(--depth)));
  transition: transform var(--card-ms) ease-out, opacity var(--card-ms) ease-out,
    filter var(--card-ms) ease-out, left var(--panel-ms) ease-out;
}
.sleeve img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sleeve-nr {
  position: absolute; top: 0.5em; left: 0.6em;
  color: #ffdf00; font: 400 1.25rem "pf-videotext", sans-serif;
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* Mittig zwischen Huellen- und Screen-Unterkante; --sleeve-size (Breite)
   vereinfachend wie eine Hoehe behandelt. */
.creations-nav {
  position: absolute; left: var(--sleeve-x);
  top: calc((var(--sleeve-y) + var(--sleeve-size) / 2 + 100%) / 2);
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 1.2em;
  transition: left var(--panel-ms) ease-out, opacity var(--full-ms) ease-out;
}
.creations-arrow {
  background: none; border: none; cursor: pointer;
  color: #ffdf00; font: 400 2rem "pf-videotext", sans-serif;
  padding: 0; line-height: 1;
}
.creations-arrow:disabled { opacity: 0.35; cursor: default; }
/* Oben = next (nach hinten), unten = prev (nach vorn) - beide Chevrons
   drehen sich durch dieselbe Rotation korrekt auf up/down. */
.creations-nav .creations-arrow { transform: rotate(-90deg) scale(var(--arrow-scale)); }

/* Ein Anker (--sleeve-x) haelt Stapel, Perspektive und Navigation beim
   Platz-machen fuers Panel synchron. */
.creations.panel-open { --sleeve-x: calc(50% - var(--open-shift-x)); }

/* Startet als Punkt im Zentrum der Huelle (Panel-Mitte = --sleeve-x), waechst
   in beide Achsen zugleich (scale(), nicht scaleX() - sonst steht die volle
   Hoehe von Anfang an da). z-index 0, niedriger als .sleeve-stack. */
.creations-panel {
  position: absolute; top: 50%; width: 28%;
  left: calc(var(--sleeve-x) - 14%);
  transform: translateY(-50%) scale(0);
  transform-origin: center;
  z-index: 0;
  display: flex; flex-direction: column; gap: 0.8em;
  border: 2px solid #ffdf00; background: rgba(0, 0, 0, 0.75);
  padding: 1em;
  opacity: 0; pointer-events: none;
  transition: left var(--panel-ms) ease-out, transform var(--panel-ms) ease-out, opacity var(--panel-ms) ease-out;
}
.creations-panel.open {
  left: calc(50% + var(--open-shift-x) + var(--sleeve-size) / 2 - 28%);
  transform: translateY(-50%) scale(1);
  opacity: 1; pointer-events: auto;
}
.panel-spotify iframe { display: block; width: 100%; border: none; }
/* Feste Hoehe, Hochformat wird von YouTube zentriert eingepasst; .video-full weitet per flex:1, iframe bleibt unberuehrt. */
.panel-video { position: relative; width: 100%; height: var(--panel-video-height); background: #000; transition: flex var(--full-ms) ease-out; }
.panel-video-embed { width: 100%; height: 100%; }
.panel-video-embed iframe { width: 100%; height: 100%; display: block; border: none; }
.panel-fullscreen { position: absolute; top: 0.5em; right: 0.5em; z-index: 1; background: rgba(0, 0, 0, 0.5); border: none; cursor: pointer; color: #ffdf00; font: 400 0.9rem "pf-videotext", sans-serif; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.3em 0.5em; }
.panel-video-nav { display: flex; align-items: center; justify-content: center; gap: 1em; }
.panel-counter { color: #ffdf00; font: 400 1.1rem "pf-videotext", sans-serif; letter-spacing: 0.04em; }

/* Stapel/Spotify blenden aus, Panel waechst auf die volle .creations-Flaeche. */
.creations.video-full .sleeve-stack, .creations.video-full .creations-nav { opacity: 0; pointer-events: none; }
.creations.video-full .sleeve { pointer-events: none; }
.creations.video-full .creations-panel { left: 0; top: 0; width: 100%; height: 100%; transform: none; }
.creations.video-full .panel-spotify { display: none; }
.creations.video-full .panel-video { flex: 1; height: auto; }