/* =====================================================================
   Quiznight 2 · DIE LEBENDE BÜHNE (buehne-leben.js, QN.buehnenLeben) — B1
   Nur mit ?lebt=a|b|c; ohne Schalter greift hier keine Regel (alles hängt an
   .qn-leben oder [data-lebt]).
   Bewegt werden NUR transform und opacity, als CSS-Animation. Alle Takte
   zählen ab dem Laden der Seite (--lt an Schicht und Bühne, einmal gesetzt):
   Wechselt die Wand (Frage → Auflösung), laufen Flocken, Licht und Motiv ohne
   Sprung weiter.
   ===================================================================== */

/* Die Schicht: über dem Grund der Bühne (::before), unter Motiv (::after) und Inhalt (z 1). */
.qn-buehne > .qn-leben { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Innen: tritt beim Einloggen kurz zurück (buehne-leben.js, einloggen). Darin die Felder — gemessen, buehne-leben.js:
   das Hauptfeld unter Kopf und Frage, über der Fußzeile, und die Luft (der freie Himmel über der Frage).
   Was über ein Feld hinausgeht, schneidet es ab (ein Rechteck — keine Maske). */
.qn-leben > .ql-innen { position: absolute; inset: 0; }
.ql-innen > .ql-feld { position: absolute; left: 0; right: 0; top: 20%; bottom: 5%; overflow: hidden; }
.ql-innen > .ql-luft { right: auto; }
.ql-feld > * { position: absolute; inset: 0; pointer-events: none; }
.ql-feld i { position: absolute; display: block; }

/* Ein Moment je Phase: Das Leben kommt erst, wenn die Frage steht (nach ihrem Auftritt). */
.qn-leben.ql-frage { animation: ql-auf 1.8s cubic-bezier(.3, 0, .2, 1) .9s both; }
@keyframes ql-auf { from { opacity: 0; } to { opacity: 1; } }

/* Dieselbe Uhr für alle Takte: Verzögerung minus die Zeit seit dem Laden. */
.qn-leben :is(.qsz-schnee, .qsz-funken, .qsz-staub, .qsz-kino-flimmer, .qsz-pixel, .qsz-an-blueten, .qsz-tw-staub, .qsz-fb-schnipsel) i { animation-delay: calc(var(--v, 0s) - var(--lt, 0s)); }
.qn-leben .qsz-spur { animation-delay: calc(var(--verz, 0s) - var(--lt, 0s)); }
.qn-leben .fl > * { animation-delay: calc(var(--fl-v, 0s) - var(--lt, 0s)); }

/* ---- B · Teilchen: die Lichtspur zieht nur durch den Streifen über den Karten ---- */
.ql-feld > .ql-spurbahn { top: 0; bottom: auto; height: 7cqmin; overflow: hidden; }
.ql-b .qsz-spur { left: -70%; width: 70%; }

/* ---- A · ohne Lichter: nur die Fahrt des Motivs (unten) ---- */

/* ---- C · Kamera ---- */
/* Die Fahrt: Die Kategorie-Ebene (vorn) kommt am meisten näher, Grundlicht und Motiv am wenigsten.
   Alle im selben Takt (17 s hin, 17 s zurück) — so liest es sich als EINE Kamera. */
.qn-buehne[data-sp-phase="frage"] > .ql-kamera {
  transform-origin: 50% 58%;
  animation: ql-kamera 17s ease-in-out calc(0s - var(--lt, 0s)) infinite alternate;
}
@keyframes ql-kamera { from { transform: translate(.4cqmin, 0) scale(1); } to { transform: translate(-.4cqmin, -.3cqmin) scale(1.032); } }
.qn-buehne[data-lebt="c"]::before { animation: ql-fern 17s ease-in-out calc(0s - var(--lt, 0s)) infinite alternate; }
@keyframes ql-fern { from { transform: translate(1cqmin, 0) scale(1.03); } to { transform: translate(-1cqmin, -.5cqmin) scale(1.045); } }

/* ---- A und C: Das Motiv des Sets (::after der Bühne) fährt sehr langsam — in A für sich, in C mit der Kamera. ---- */
.qn-buehne[data-lebt="a"]::after { animation: ql-motiv 26s ease-in-out calc(0s - var(--lt, 0s)) infinite alternate; }
@keyframes ql-motiv { from { transform: translate(-1.2cqmin, -.6cqmin) scale(1.03); } to { transform: translate(1.2cqmin, .6cqmin) scale(1.03); } }
.qn-buehne[data-lebt="c"]::after { animation: ql-motiv-c 17s ease-in-out calc(0s - var(--lt, 0s)) infinite alternate; }
@keyframes ql-motiv-c { from { transform: translate(.6cqmin, 0) scale(1.02); } to { transform: translate(-.6cqmin, -.3cqmin) scale(1.05); } }

/* Unter reduzierter Bewegung gibt es die Schicht nicht (buehne-leben.js baut sie gar nicht erst); falls doch eine steht: still. */
@media (prefers-reduced-motion: reduce) {
  .qn-buehne > .qn-leben { display: none; }
  .qn-buehne[data-lebt]::before, .qn-buehne[data-lebt]::after, .qn-buehne > .ql-kamera { animation: none !important; }
}