/* ===========================================================================
   Hintergrund des Relaunchs (Phase A1): Himmel und Linienhaus

   Wie an Tor G0 abgenommen (Andi, 03.10.2026; Entscheidung zum Baustein am
   selben Tag): ein ruhiger Verlauf mit zwei langsam wandernden Lichthauchen
   in CSS, davor das Linienhaus aus hintergrund.js auf einem <canvas>.
   licht.js (WebGL) ist zurückgestellt.

   Der Himmel reagiert auf zweierlei:
   - die Station: hintergrund.js setzt --hx (30 bis 80), der erste Hauch
     wandert dorthin (--d-hauch);
   - die Tageszeit: --grund, --grund2, --hauch1 und --hauch2 wechseln mit
     data-zeit (tokens.css).

   Ersatzstufen:
   - weniger Bewegung: die Hauche stehen still und folgen der Station nicht
     (ein Sprung wäre auch Bewegung); die Farbe der Tageszeit wechselt weich;
   - Tab im Hintergrund: html.verborgen hält die Hauche an (hintergrund.js
     hält zugleich das Zeichnen an);
   - kein Canvas: html.ohne-raum blendet die Zeichenfläche aus, der Himmel
     bleibt. Ohne Skript bleibt der Himmel ebenso, die Fläche ist leer.

   Alle Zahlen für Dauer, Kurve und Farbe kommen aus tokens.css; ein Test
   hält das fest.
   =========================================================================== */

.himmel {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(120% 90% at 70% 100%, var(--grund2), var(--grund) 65%);
    transition: background var(--d-atem) var(--ease-bewegt);
}
.himmel::before, .himmel::after {
    content: ""; position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(60px);
}
.himmel::before {
    background: var(--hauch1); left: calc(var(--hx, 55) * 1%); top: 40%;
    animation: himmel-wandern var(--d-wandern-a) var(--ease-bewegt) infinite alternate;
    transition: left var(--d-hauch) var(--ease-bewegt), background var(--d-atem) var(--ease-bewegt);
}
.himmel::after {
    background: var(--hauch2); left: -20%; top: -30%;
    animation: himmel-wandern var(--d-wandern-b) var(--ease-bewegt) infinite alternate-reverse;
    transition: background var(--d-atem) var(--ease-bewegt);
}
@keyframes himmel-wandern {
    from { transform: translate(-8%, -4%) scale(1); }
    to { transform: translate(8%, 6%) scale(1.15); }
}
html.verborgen .himmel::before, html.verborgen .himmel::after { animation-play-state: paused; }

/* Das Linienhaus. 100lvh: so hoch wie das Fenster ohne Leisten; die Tastatur
   ändert daran nichts. Die Maske hängt am Ende der Textspalte (16 px Rand,
   24 px Einzug, 560 px Spalte), nicht an Prozentwerten: Mit 34 % der Skizze
   lief die Zeichnung bei 1440 px schon ab 490 px wieder auf (gemessen
   03.10.2026, seite-d.css). */
.haus-raum {
    position: fixed; left: 0; top: 0; width: 100vw; height: 100lvh; z-index: 1; display: block; cursor: grab;
    --spalte-ende: calc(max(40px, 50vw - 556px) + 584px);
    -webkit-mask-image: linear-gradient(90deg, var(--maske-leise) 0, var(--maske-leise) var(--spalte-ende), var(--maske-voll) calc(var(--spalte-ende) + 12vw));
    mask-image: linear-gradient(90deg, var(--maske-leise) 0, var(--maske-leise) var(--spalte-ende), var(--maske-voll) calc(var(--spalte-ende) + 12vw));
}
@media (max-width: 760px) {
    .haus-raum {
        -webkit-mask-image: linear-gradient(180deg, var(--maske-voll) 0%, var(--maske-voll) 36%, var(--maske-leise) 46%);
        mask-image: linear-gradient(180deg, var(--maske-voll) 0%, var(--maske-voll) 36%, var(--maske-leise) 46%);
    }
}
/* Deckung der Zeichenfläche (tokens.css). Die Fläche ist kein Vorfahre einer
   Glasfläche, eine Deckung unter 1 schaltet deshalb keinen Weichzeichner ab. */
.haus-raum { opacity: var(--r-raum-deckung); transition: opacity var(--d-atem) var(--ease-bewegt); }
html.ohne-raum .haus-raum { display: none; }
html.dreht, html.dreht * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

@media (prefers-reduced-motion: reduce) {
    .himmel::before, .himmel::after { animation: none; }
    /* Der Hauch bleibt an seinem Platz statt zu springen; ein Sprung wäre genau
       die Bewegung, die abbestellt ist. Die Farbe der Tageszeit wechselt weich. */
    .himmel::before { left: 55%; transition: background var(--d-atem) var(--ease-bewegt); }
}