/* =====================================================================
   Hintergrund-Animationen der Unterseiten

   Gegenstueck zu assets/hintergrund.js. Eine Seite braucht nur:
       <link rel="stylesheet" href="assets/hintergrund.css">
       <canvas id="bgCanvas" data-szene="druck" aria-hidden="true"></canvas>
       <div id="bgSchleier" aria-hidden="true"></div>
       <script src="assets/hintergrund.js" defer></script>

   Warum z-index -1 funktioniert, obwohl body eine Farbe hat: Die
   Hintergrundfarbe des body wird auf den Wurzelbereich uebertragen und
   ganz unten gemalt. Der body selbst gilt danach als hintergrundlos -
   ein fixiertes Element mit z-index -1 liegt darueber und bleibt sichtbar.

   Die Farbumkehr aus bf.css dreht #bgCanvas eigens zurueck, damit die
   Animation im Negativmodus nicht ausbricht. Hier stehen nur die beiden
   Faelle, die bf.css nicht kennt: hoher Kontrast und Bewegung aus.
===================================================================== */

#bgCanvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  display: block;
  pointer-events: none;
}

/* Schleier ueber der Animation: haelt den Fliesstext lesbar. Der Text
   steht in der Mitte, deshalb ist der Schleier dort am dichtesten. */
#bgSchleier {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(7,14,24,0.30) 0%,
      rgba(7,14,24,0.86) 26%,
      rgba(7,14,24,0.90) 74%,
      rgba(7,14,24,0.30) 100%);
}

/* Die Drucker-Szene hat je ein Geraet links und rechts der Textspalte.
   Der Schleier ist deshalb an beiden Raendern hell und nur ueber der
   Spalte dicht - dort und nur dort muss er den Text tragen. */
#bgCanvas[data-szene="drucker"] + #bgSchleier {
  background:
    linear-gradient(to right,
      rgba(7,14,24,0.10) 0%,
      rgba(7,14,24,0.22) 14%,
      rgba(7,14,24,0.64) 27%,
      rgba(7,14,24,0.64) 73%,
      rgba(7,14,24,0.22) 86%,
      rgba(7,14,24,0.10) 100%);
}

/* Die Rampen-Szene besteht nur aus duennen Linien und vertraegt deshalb
   weniger Schleier als eine flaechige Zeichnung. */
#bgCanvas[data-szene="rampe"] + #bgSchleier {
  background:
    linear-gradient(to right,
      rgba(7,14,24,0.10) 0%,
      rgba(7,14,24,0.68) 24%,
      rgba(7,14,24,0.74) 76%,
      rgba(7,14,24,0.10) 100%);
}

/* Wer hohen Kontrast waehlt, will lesen und nicht schauen. */
html[data-kontrast="hoch"] #bgCanvas { opacity: 0.22; }
html[data-kontrast="hoch"] #bgSchleier { background: rgba(7,14,24,0.94); }

/* Bei abgeschalteter Bewegung bleibt das Bild stehen (darum kuemmert sich
   hintergrund.js) und tritt zusaetzlich zurueck. */
html[data-bewegung="aus"] #bgCanvas { opacity: 0.45; }

@media (max-width: 620px) {
  /* Auf schmalen Schirmen laeuft der Text ueber die ganze Breite -
     der seitliche Verlauf haette dort nichts abzudecken. */
  #bgSchleier { background: rgba(7,14,24,0.82); }
}