/* buehnenlicht.css — das Radio wirft Licht ab (js/buehnenlicht.js, nur Welttournee).
   ---------------------------------------------------------------------------
   ZWEITER ANLAUF. Der erste war ein weicher Schein aus zwei Verlaeufen, und Bjoern hatte recht:
   „Punkt 5 ist gar nicht gut umgesetzt." Ein gleichmaessiger Schimmer sieht nicht aus wie Licht,
   sondern wie ein Fleck auf dem Bildschirm — es fehlte das, woran man Licht erkennt: eine KANTE
   und eine RICHTUNG. Dieselbe Lehre wie beim Farbfeld, wo erst die Baender mit ihren Kanten den
   Eindruck von Bewegung gebracht haben.

   Jetzt drei Lagen in einer gemeinsamen Schicht:

     .bl-kegel    Lichtkegel, die aus dem Geraet fahren — die Kanten
     .bl-schein   der Bloom direkt am Geraet — die Quelle
     .bl-schlag   ein kurzer Stoss auf jeden erkannten Takt

   *** DIE MISCHUNG SITZT AUF DER HUELLE, NICHT AUF DEN LAGEN ***
   Genau umgekehrt wie beim Tageslicht, und aus demselben Grund: Ein Stapelkontext ist beim
   Mischen eine abgeschlossene Gruppe. Die drei Lagen sollen sich NICHT einzeln mit der Seite
   mischen, sondern zusammen ein Lichtbild ergeben, das danach als Ganzes mit `screen` auf die
   Seite addiert wird. Deshalb hier die Huelle mit der Mischung und die Lagen ohne — und deshalb
   darf ueber dieser Huelle nichts liegen, was isoliert (`isolation`, `contain: paint`, `filter`,
   `opacity` auf einem Vorfahren). Siehe die Warnung im Kopf von css/tageszeit.css.

   WARUM DIE KEGEL GEDREHT UND NICHT NEU GEZEICHNET WERDEN
   Ein Kegelverlauf, dessen Startwinkel je Bild neu gesetzt wird, muss je Bild neu gerastert
   werden — bildschirmfuellend. Stattdessen wird er EINMAL gezeichnet und dann mit `rotate`
   gedreht; das erledigt der Browser beim Zusammensetzen. Damit die Drehung um das Geraet geht
   und nicht um die Bildmitte, sitzt die Lage mittig ueber der Lichtquelle. */

.buehnenlicht {
  position: fixed;
  inset: 0;
  z-index: 45;                 /* ueber der Kopfleiste (40), unter Tageslicht (50) und Tueroeffner (60) */
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: var(--licht-kraft, 0);
  transition: opacity .16s linear;
}

/* Ganz aus: aushaengen, damit keine Mischschicht mehr zusammengesetzt wird. */
.buehnenlicht[data-an="nein"] { display: none; }

.buehnenlicht span {
  position: absolute;
  display: block;
}

/* ---------- Die Lichtkegel ----------
   Sitzt mittig ueber der Quelle, damit die Drehung um sie herum geht. Die Maske laesst die Kegel
   nach aussen auslaufen — ohne sie waeren es harte Tortenstuecke bis zum Bildrand. */
.bl-kegel {
  left: var(--licht-x, 50%);
  top: var(--licht-y, 62%);
  width: 260vmax;
  height: 260vmax;
  margin-left: -130vmax;
  margin-top: -130vmax;
  rotate: var(--licht-dreh, 0deg);
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255, 196, 90, .40) 0deg 3.2deg,
    rgba(255, 91, 26, .12) 3.2deg 6deg,
    transparent 6deg 17deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 0 5%, rgba(0, 0, 0, .55) 17%, transparent 38%);
  mask-image: radial-gradient(closest-side, #000 0 5%, rgba(0, 0, 0, .55) 17%, transparent 38%);
}

/* ---------- Der Bloom am Geraet ---------- */
.bl-schein {
  inset: 0;
  background:
    radial-gradient(26vmax 26vmax at var(--licht-x, 50%) var(--licht-y, 62%),
      rgba(255, 216, 150, .72) 0%, rgba(255, 140, 40, .28) 40%, transparent 74%),
    radial-gradient(130vmax 95vmax at var(--licht-x, 50%) var(--licht-y, 62%),
      rgba(255, 91, 26, .20) 0%, rgba(195, 18, 27, .08) 48%, transparent 80%);
}

/* ---------- Der Stoss auf den Takt ----------
   Kurz und hell, aber nicht blendend: Er soll den Takt sichtbar machen, nicht das Lesen stoeren. */
.bl-schlag {
  inset: 0;
  background: radial-gradient(70vmax 70vmax at var(--licht-x, 50%) var(--licht-y, 62%),
    rgba(255, 244, 218, .85) 0%, rgba(255, 181, 46, .34) 34%, transparent 72%);
  opacity: calc(var(--licht-schlag, 0) * .42);
}

/* Nur dort, wo es hingehoert. Steht ausser in js/buehnenlicht.js auch hier, damit ein
   Moduswechsel sofort wirkt und nicht erst beim naechsten Bild. */
html:not([data-modus="welttournee"]) .buehnenlicht { display: none; }

@media (prefers-reduced-motion: reduce) {
  .buehnenlicht { display: none; }
}