/* =====================================================================
   Quiznight 2 · DAS LEBEN DER WELT (finale-leben.js, QN.weltLeben)

   Tobi, 2026-10-06: „Der Hintergrund soll auch so wirken, als wäre er so
   animiert, dass man da coole Effekte nutzt — dass der Finalscreen nicht so
   still wirkt."
   Die Schicht .fl liegt im Kasten des Bildes (.fk-welt, finale-buehne.css):
   Jede Lage ist Prozent des Bildes, ein Licht bleibt an seiner Lampe.
   Bewegt werden NUR transform und opacity. Kein Licht wandert über eine
   Fläche (Tobi, 05.10.: kein Glanz, der über etwas zieht) — Kegel wiegen
   sich an ihrer Lampe, Lichter funkeln an ihrem Platz.
   Unter reduzierter Bewegung steht alles (qn.css: .qn-szene * { animation: none }).
   ===================================================================== */
.fl { position: absolute; inset: 0; pointer-events: none; }
.fl > * { position: absolute; display: block; pointer-events: none; }

/* Ein Lichtkegel: Die Spitze sitzt an der Lampe (left/top), er wiegt sich um sie. */
.fl-kegel {
  transform-origin: 50% 0; transform: translateX(-50%) rotate(var(--fl-dreh, 0deg)); opacity: .8;
  background: conic-gradient(from 164deg at 50% 0, transparent 0deg,
    color-mix(in srgb, var(--fl-f) 36%, transparent) 9deg, color-mix(in srgb, var(--fl-f) 62%, transparent) 16deg,
    color-mix(in srgb, var(--fl-f) 36%, transparent) 23deg, transparent 32deg);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 17%, #000 44%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 17%, #000 44%, transparent 100%);
  animation: fl-kegel var(--fl-t, 11s) ease-in-out var(--fl-v, 0s) infinite alternate;
}
@keyframes fl-kegel {
  from { transform: translateX(-50%) rotate(calc(var(--fl-dreh, 0deg) - 5deg)); opacity: .6; }
  to { transform: translateX(-50%) rotate(calc(var(--fl-dreh, 0deg) + 5deg)); opacity: 1; }
}

/* Ein Lichthof um einen Punkt: atmet (Pokal, Flutlicht, Stern) oder flackert (Feuer). */
.fl-schein {
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--fl-f) 58%, transparent), color-mix(in srgb, var(--fl-f) 22%, transparent) 46%, transparent 100%);
  animation: fl-atmen var(--fl-t, 5s) ease-in-out var(--fl-v, 0s) infinite alternate;
}
@keyframes fl-atmen { from { opacity: .4; transform: translate(-50%, -50%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
.fl-schein.fl-flackert { animation: fl-flackern var(--fl-t, 2.6s) linear var(--fl-v, 0s) infinite; }
@keyframes fl-flackern {
  0% { opacity: .62; transform: translate(-50%, -50%) scale(.97); } 9% { opacity: .95; } 17% { opacity: .7; transform: translate(-50%, -50%) scale(1.04); }
  29% { opacity: 1; } 38% { opacity: .66; transform: translate(-50%, -50%) scale(.98); } 52% { opacity: .92; } 61% { opacity: .74; transform: translate(-50%, -50%) scale(1.05); }
  73% { opacity: 1; } 84% { opacity: .68; } 100% { opacity: .62; transform: translate(-50%, -50%) scale(.97); }
}

/* Eine Fläche, die leise flimmert (die Leinwand, auf der der Projektor läuft). */
.fl-flimmern {
  background: radial-gradient(70% 80% at 40% 45%, color-mix(in srgb, var(--fl-f) 30%, transparent), transparent 100%);
  opacity: .1; animation: fl-flimmern 3.4s steps(1, end) infinite;
}
@keyframes fl-flimmern { 0% { opacity: .08; } 12% { opacity: .2; } 20% { opacity: .11; } 37% { opacity: .24; } 46% { opacity: .1; } 58% { opacity: .19; } 71% { opacity: .07; } 83% { opacity: .22; } 100% { opacity: .08; } }

/* Ein einzelnes Licht: funkelt an seinem Platz. .fl-eckig: ein Pixel. .fl-blinkt: an und aus (Warnlicht). */
.fl-punkt {
  aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, #fff 0, var(--fl-f) 30%, color-mix(in srgb, var(--fl-f) 42%, transparent) 58%, transparent 100%);
  animation: fl-funkeln var(--fl-t, 2.8s) ease-in-out var(--fl-v, 0s) infinite;
}
.fl-punkt.fl-eckig { border-radius: 0; background: var(--fl-f); box-shadow: 0 0 .6cqmin color-mix(in srgb, var(--fl-f) 70%, transparent); }
@keyframes fl-funkeln { 0%, 100% { opacity: .22; transform: translate(-50%, -50%) scale(.72); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); } }
.fl-punkt.fl-blinkt { animation-name: fl-blinken; animation-timing-function: linear; }
@keyframes fl-blinken { 0%, 38% { opacity: 1; } 46%, 92% { opacity: .12; } 100% { opacity: 1; } }

/* Staub im Licht: treibt langsam schräg nach oben und vergeht. */
.fl-staub {
  aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--fl-f) 80%, #fff); opacity: 0;
  animation: fl-staub var(--fl-t, 12s) linear var(--fl-v, 0s) infinite;
}
@keyframes fl-staub { 0% { opacity: 0; transform: translate(0, 0); } 18% { opacity: .75; } 70% { opacity: .55; } 100% { opacity: 0; transform: translate(var(--fl-dx, 2cqw), var(--fl-dy, -3cqh)); } }

/* Schnee vor einem Fenster: fällt nur in seinem Ausschnitt. */
.fl-fenster { overflow: hidden; }
.fl-fenster > i {
  position: absolute; top: -6%; display: block; aspect-ratio: 1; border-radius: 50%; background: #fff; opacity: .8;
  animation: fl-schnee var(--fl-t, 7s) linear var(--fl-v, 0s) infinite;
}
@keyframes fl-schnee { from { transform: translate(0, 0); } to { transform: translate(var(--fl-dx, 10%), var(--fl-fall, 40cqh)); } }

/* Nebel: ein weiches Band, das langsam hin und her zieht. */
.fl-nebel {
  background:
    radial-gradient(38% 60% at 28% 55%, color-mix(in srgb, var(--fl-f) 30%, transparent), transparent 100%),
    radial-gradient(42% 70% at 66% 45%, color-mix(in srgb, var(--fl-f) 24%, transparent), transparent 100%),
    radial-gradient(30% 50% at 90% 60%, color-mix(in srgb, var(--fl-f) 18%, transparent), transparent 100%);
  animation: fl-nebel var(--fl-t, 26s) ease-in-out var(--fl-v, 0s) infinite alternate;
}
@keyframes fl-nebel { from { opacity: .45; transform: translateX(-7%); } to { opacity: .95; transform: translateX(7%); } }

/* Teilchen, die aufsteigen: Funken rund, Würfel eckig (sie drehen sich dabei). */
.fl-steigt {
  aspect-ratio: 1; border-radius: 50%; background: var(--fl-f); opacity: 0;
  box-shadow: 0 0 .8cqmin color-mix(in srgb, var(--fl-f) 70%, transparent);
  animation: fl-steigen var(--fl-t, 8s) linear var(--fl-v, 0s) infinite;
}
.fl-steigt.fl-eckig { border-radius: 8%; }
@keyframes fl-steigen {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.6); } 14% { opacity: .9; }
  72% { opacity: .7; } 100% { opacity: 0; transform: translate(var(--fl-dx, 1cqw), var(--fl-hub, -20cqh)) rotate(160deg) scale(1.1); }
}

/* Ohne Bewegung: das ruhige Bild — was nur als Bewegung Sinn hat, fehlt; Lichter stehen an. */
@media (prefers-reduced-motion: reduce) {
  .fl-staub, .fl-steigt, .fl-fenster > i { opacity: 0 !important; }
  .fl-punkt, .fl-schein, .fl-kegel, .fl-nebel { opacity: .8; }
}