/* ==========================================================================
   Sparmodus
   --------------------------------------------------------------------------
   Für sehr große Bildschirme.

   Der Hintergrund besteht aus Ebenen, die der Browser einzeln auf der
   Grafikkarte vorhält. Deren Größe wächst mit der Fensterfläche, und bei
   3840x2160 ist JEDE bildschirmfüllende Ebene rund 32 MB groß. Gemessen auf
   einem 4K-Schirm:

       53,5 MB  Aurora-Feld 1   2649x2649   will-change, screen, Animation
       46,3 MB  Aurora-Feld 2   2463x2463   will-change, screen, Animation
       39,4 MB  Aurora-Feld 3   2271x2271   will-change, screen, Animation
       34,2 MB  .wt-bild        3994x2246   filter
       31,6 MB  .wt-himmel      3840x2160   position:fixed
       31,6 MB  .wt-aurora      3840x2160   will-change
        2,6 MB  .wt-kopf        3840x89     backdrop-filter
       ------
        ~200 MB Ebenen, dazu ~71 MB Zwischenflächen = rund 271 MB

   Die Zwischenflächen entstehen durch mix-blend-mode und backdrop-filter:
   beide müssen den Hintergrund erst in eine eigene Fläche einsammeln, bevor
   sie ihn verrechnen können.

   Reicht der Grafikspeicher nicht, verwirft der Browser Texturen und
   rastert sie im nächsten Bild neu. Das trifft dann nicht nur die Seite,
   sondern den Compositor des ganzen Systems - andere Fenster werden
   ebenfalls träge. Genau dieses Bild zeigte sich auf dem 4K-Rechner.

   Der Sparmodus setzt deshalb nicht an der Rechenarbeit je Bild an, sondern
   an der ANZAHL und LEBENSDAUER der Ebenen:

     - Aurora steht still. Das ist der Hebel mit der größten Wirkung: eine
       angehaltene Animation ohne will-change braucht keine eigene Ebene
       mehr, der Browser darf sie einschmelzen. Bei 37 bis 67 Sekunden
       Umlaufzeit fällt der Stillstand von Bild zu Bild kaum auf.
     - Kein Mischmodus. Spart die Zwischenflächen. Auf dem fast schwarzen
       Grund ist der Unterschied gering: screen(s,d) = s+d-sd geht für
       dunkles d in normales Überblenden über. Sichtbar wird es nur dort,
       wo sich zwei Felder überlagern.
     - Keine Zeigerreaktion. Sie war der Grund, warum .wt-aurora überhaupt
       eine eigene Ebene brauchte.
     - Keine Weichzeichner über bewegtem Grund.

   Der Regen bleibt. Seine Zeichenfläche ist seit der Deckelung auf 1600 px
   klein genug, und er ist das auffälligste Stück des Ganzen.

   ----------------------------------------------------------------------
   Geschaltet wird über data-spar am <html>-Element:

       data-spar="an"    Sparmodus greift
       data-spar="aus"   Sparmodus greift nicht
       (kein Attribut)   wie "aus"

   Gesetzt wird es von einem kleinen Skript im <head> (inc/assets.php),
   das die Fensterbreite prüft: ab 1800 px "an", darunter "aus". Die
   Testleiste (inc/wetterlage.php) kann es von Hand überschreiben.

   Ohne JavaScript bleibt das Attribut leer und der Sparmodus aus. Das ist
   kein Versehen: ohne JavaScript gibt es auch keinen Regen und keine
   Zeigerreaktion, die Last ist dann ohnehin ein Bruchteil.
   ========================================================================== */

/* --- Aurora ------------------------------------------------------------- */

/*
 * Alle drei Eigenschaften gehören zusammen. will-change allein stehen zu
 * lassen würde die Ebene auf der Grafikkarte halten, obwohl sich nichts
 * mehr bewegt - also genau das, was hier vermieden werden soll.
 */
html[data-spar="an"] .wt-aurora span {
  animation-play-state: paused;
  mix-blend-mode: normal;
  will-change: auto;
}

/* Die Zeigerreaktion entfällt; damit braucht der Rahmen keine eigene Ebene.
   himmel.js richtet sie im Sparmodus gar nicht erst ein. */
html[data-spar="an"] .wt-aurora {
  transform: none;
  will-change: auto;
}

/* --- Sonnenstrahlen ----------------------------------------------------- */

/* Der Kegel dreht sich nur in den drei Sonnenlagen (siehe wetterlage.css).
   Dort ist er die zweitgrößte bewegte Fläche. Die Selektoren brauchen
   dieselbe Spezifität wie die Regel, die die Drehung einschaltet - ein
   schlichtes .wt-strahlen käme dagegen nicht an. */
html[data-spar="an"] body[data-wetter="sonnig"] .wt-strahlen,
html[data-spar="an"] body[data-wetter="heiter"] .wt-strahlen,
html[data-spar="an"] body[data-wetter="hitze"]  .wt-strahlen {
  animation-play-state: paused;
  will-change: auto;
}

/* --- Weichzeichner ------------------------------------------------------ */

/*
 * backdrop-filter über einem Hintergrund, der sich bewegt, muss in jedem
 * Bild neu gerechnet werden - und braucht dafür eine Kopie des Hintergrunds.
 * Bei 3840 px Breite ist allein der Streifen der Kopfleiste 3840x89.
 *
 * Die Flächen werden dafür deckend. Der Ersatzweg existiert im Theme schon
 * für Browser ohne backdrop-filter; hier wird derselbe Weg bewusst gegangen.
 */
html[data-spar="an"] .wt-kopf {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--wt-bg);
}

html[data-spar="an"] .wt-karte {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: color-mix(in srgb, var(--wt-surface) 96%, transparent);
}

/* --- Windsack ----------------------------------------------------------- */

/* Er flattert weiter - 60 px kosten nichts. Die eigene Ebene, die ihn von
   der Kopfleiste trennt, bleibt deshalb ebenfalls sinnvoll. */

/* --- Bewegungsverzicht -------------------------------------------------- */

/* Wer ohnehin keine Bewegung will, braucht den Sparmodus nicht zusätzlich -
   die Regeln in wetterlage.css halten dann schon alles an. Hier steht
   nichts, der Vollständigkeit halber vermerkt. */