/* ========================================================================== Lebendiger Hintergrund -------------------------------------------------------------------------- Sieben Schichten, von unten nach oben: 1 Seitenfarbe (body, aus basis.css) 2 .wt-aurora fünf farbige Felder, driftend, im Mischmodus 3 .wt-strahlen Sonnenstrahlen als Kegelverlauf, nur bei Sonne 4 .wt-sterne Sternenhimmel, nur nachts 5 .wt-partikel Regen und Schnee als Canvas (siehe assets/js/himmel.js) 6 .wt-koern Filmkorn, unbewegt 7 .wt-vignette Abdunklung zu den Rändern, unbewegt Bewegt wird ausschließlich transform und opacity - beides läuft im Compositor und zwingt den Browser nicht, das Layout neu zu rechnen. Korn und Vignette sind völlig statisch und kosten nach dem ersten Zeichnen nichts mehr. Die Lage steht als data-wetter am (siehe inc/wetterlage.php). ========================================================================== */ .wt-himmel { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; /* Eigener Stapelkontext: sonst blendet mix-blend-mode mit dem Seiteninhalt statt nur mit den Schichten hier drin. */ isolation: isolate; } .wt-himmel > * { position: absolute; inset: 0; display: block; } /* ---------------------------------------------------------- Bildschicht -- */ /* * Das Foto des Weingartens zur aktuellen Lage. Liegt ganz unten, die Aurora * legt sich darüber und färbt es mit ein. * * Die Abdunklung ist gemessen, nicht geschätzt: je Bild wurde die * Leuchtdichte der oberen Hälfte bestimmt (dort steht die Wortmarke) und die * Helligkeit so gewählt, dass das 99,5-Perzentil unter 0,033 bleibt. Bei * 0,46 Deckkraft landet die hellste Stelle damit bei rund 0,029 - gedämpfter * Text hält dort 4,9:1, und es bleibt Reserve für die Aurora, die im * Mischmodus screen zusätzlich aufhellt. * * contrast(.82) drückt vor allem die Spitzen; das erhält mehr Zeichnung als * reines Abdunkeln über die Deckkraft. */ .wt-bild { background-image: var(--bild); background-size: cover; background-position: center 30%; background-repeat: no-repeat; opacity: var(--bild-deckkraft, .46); filter: brightness(var(--bild-hell, .3)) contrast(.82) saturate(1.2); /* Sehr leichte Weichzeichnung: nimmt dem Foto die Konkurrenz zum Text, ohne dass man es als Unschärfe wahrnimmt. */ transform: scale(1.04); transition: opacity 1.2s var(--wt-kurve-weich), filter 1.2s var(--wt-kurve-weich); } /* Gemessene Helligkeit je Lage. Nacht bekommt den höchsten Wert, weil das Foto von sich aus fast schwarz ist (Leuchtdichte 0,013). */ body[data-wetter="sonnig"] .wt-bild { --bild-hell: .22; } body[data-wetter="heiter"] .wt-bild { --bild-hell: .24; } body[data-wetter="bewoelkt"] .wt-bild { --bild-hell: .24; } body[data-wetter="regen"] .wt-bild { --bild-hell: .32; } body[data-wetter="schnee"] .wt-bild { --bild-hell: .22; } body[data-wetter="frost"] .wt-bild { --bild-hell: .25; } body[data-wetter="hitze"] .wt-bild { --bild-hell: .22; } body[data-wetter="nacht"] .wt-bild { --bild-hell: .52; } /* --------------------------------------------------------------- Aurora -- */ /* * Deckung = Grundwert der Lage MAL Faktor des Modus. * * Diese Aufteilung ist der Kern und kein Schönheitsfehler: vorher setzten * Lage und Modus dieselbe Variable --staerke, und der Modus-Selektor * (0,3,0) schlug den Lagen-Selektor (0,2,1). Damit liefen alle acht Lagen * auf demselben Wert, gleich was in ihrer Regel stand. Jetzt greifen beide * an verschiedenen Variablen an und können sich nicht mehr überstimmen. */ .wt-aurora span { position: absolute; display: block; border-radius: 50%; opacity: calc(var(--staerke, .8) * var(--deck, 1)); /* screen lässt überlappende Felder leuchten statt sich zuzudecken - genau der Effekt, den ein Polarlicht hat. */ mix-blend-mode: screen; will-change: transform; transition: background var(--wt-ruhig) var(--wt-kurve-weich), opacity var(--wt-ruhig) var(--wt-kurve-weich); } /* Fünf Felder, verschiedene Größen, Lagen und Geschwindigkeiten. Die Primzahl-artigen Dauern sorgen dafür, dass sich das Muster praktisch nie wiederholt. */ /* Die Dauer steckt in calc() mit --tempo: so lässt sich die ganze Aurora über eine einzige Variable beschleunigen, wenn Wind aufkommt. */ .wt-aurora span:nth-child(1) { top: -26vh; left: -14vw; width: 86vmax; height: 86vmax; background: radial-gradient(circle at 50% 50%, var(--f1) 0%, transparent 62%); animation-name: wt-drift-a; animation-duration: calc(37s * var(--tempo, 1)); } .wt-aurora span:nth-child(2) { top: -18vh; right: -22vw; width: 70vmax; height: 70vmax; background: radial-gradient(circle at 50% 50%, var(--f2) 0%, transparent 60%); animation-name: wt-drift-b; animation-duration: calc(53s * var(--tempo, 1)); } .wt-aurora span:nth-child(3) { bottom: -34vh; left: 16vw; width: 78vmax; height: 78vmax; background: radial-gradient(circle at 50% 50%, var(--f3) 0%, transparent 64%); animation-name: wt-drift-c; animation-duration: calc(67s * var(--tempo, 1)); } .wt-aurora span:nth-child(4) { top: 22vh; left: 34vw; width: 46vmax; height: 46vmax; background: radial-gradient(circle at 50% 50%, var(--f4) 0%, transparent 58%); animation-name: wt-drift-d; animation-duration: calc(43s * var(--tempo, 1)); } .wt-aurora span:nth-child(5) { bottom: -12vh; right: -10vw; width: 54vmax; height: 54vmax; background: radial-gradient(circle at 50% 50%, var(--f5) 0%, transparent 60%); animation-name: wt-drift-e; animation-duration: calc(59s * var(--tempo, 1)); } .wt-aurora span { animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; } /* Beim Scrollen wandern die Felder langsamer als der Inhalt - das erzeugt Tiefe. --parallax setzt himmel.js; ohne JavaScript bleibt es bei 0. */ .wt-aurora { transform: translate3d(var(--zeiger-x, 0px), calc(var(--parallax, 0px) + var(--zeiger-y, 0px)), 0); transition: transform .6s cubic-bezier(.22, .61, .36, 1); will-change: transform; } @keyframes wt-drift-a { from { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); } to { transform: translate3d(11vw, 9vh, 0) scale(1.22) rotate(9deg); } } @keyframes wt-drift-b { from { transform: translate3d(0, 0, 0) scale(1.12) rotate(0deg); } to { transform: translate3d(-13vw, 12vh, 0) scale(.88) rotate(-11deg); } } @keyframes wt-drift-c { from { transform: translate3d(0, 0, 0) scale(.94) rotate(0deg); } to { transform: translate3d(9vw, -11vh, 0) scale(1.26) rotate(7deg); } } /* Hier stand einmal zusätzlich opacity: .55 bis 1. Das war ein Fehler: eine laufende Animation steht über der normalen Deklaration, deshalb erreichte weder --staerke noch der helle Modus dieses eine Feld. Im hellen Modus lief es dadurch mit bis zum Dreifachen der vorgesehenen Deckung und pulsierte als dunkler Fleck mitten im Inhalt. Die Größenänderung allein genügt. */ @keyframes wt-drift-d { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-8vw, -7vh, 0) scale(.8); } } @keyframes wt-drift-e { from { transform: translate3d(0, 0, 0) scale(.9) rotate(0deg); } to { transform: translate3d(-6vw, -9vh, 0) scale(1.15) rotate(-6deg); } } /* ------------------------------------------------------ Sonnenstrahlen -- */ /* Ein Kegelverlauf mit abwechselnd hellen und durchsichtigen Keilen, ganz langsam gedreht und zum Rand hin ausgeblendet. Nur bei Sonne sichtbar. */ .wt-strahlen { /* Gleiche Aufteilung wie bei der Aurora: die Lage sagt, OB die Strahlen scheinen, der Modus nur, wie kräftig. Ohne diese Trennung stand der Strahlenkegel im hellen Modus auch nachts und bei Regen über der Seite. */ opacity: calc(var(--strahl-deck, 0) * var(--strahl-faktor, 1)); background: conic-gradient( from 0deg at 18% -8%, transparent 0deg 6deg, var(--strahl, rgba(224, 164, 31, .23)) 6deg 9deg, transparent 9deg 22deg, var(--strahl, rgba(224, 164, 31, .23)) 22deg 24deg, transparent 24deg 41deg, var(--strahl, rgba(224, 164, 31, .23)) 41deg 45deg, transparent 45deg 63deg, var(--strahl, rgba(224, 164, 31, .23)) 63deg 65deg, transparent 65deg 84deg, var(--strahl, rgba(224, 164, 31, .23)) 84deg 88deg, transparent 88deg 360deg ); /* Ohne Maske hätte der Kegel eine harte Kante quer über die Seite. */ -webkit-mask-image: radial-gradient(circle at 18% -8%, #000 0%, transparent 72%); mask-image: radial-gradient(circle at 18% -8%, #000 0%, transparent 72%); mix-blend-mode: screen; animation: wt-strahlen-dreh 120s linear infinite; transition: opacity 1.2s var(--wt-kurve-weich); will-change: transform; } /* Der Grundwert steht an .wt-himmel und erbt in die Schicht hinein. Nur die drei genannten Lagen haben überhaupt Strahlen; alle übrigen bleiben beim Rückfallwert 0. */ body[data-wetter="sonnig"] .wt-himmel { --strahl-deck: 1; } body[data-wetter="heiter"] .wt-himmel { --strahl-deck: .6; } body[data-wetter="hitze"] .wt-himmel { --strahl-deck: 1; } body[data-wetter="hitze"] .wt-strahlen { --strahl: rgba(240, 150, 60, .29); } @keyframes wt-strahlen-dreh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ------------------------------------------------------------- Sterne -- */ /* Feste Punkte als mehrfacher radial-gradient - das kostet kein einziges Element. Wichtig: das Funkeln darf NUR bei Nacht laufen. Eine laufende Animation steht in der Kaskade über der normalen Deklaration - "opacity: 0" hier wäre also wirkungslos, solange wt-funkeln die Deckung anfasst. Genau das war der Fall: die Sterne standen in jeder Lage bei 45 bis 85 Prozent und waren als helle Pünktchen über Sonne, Regen und Schnee zu sehen. Deshalb steht "animation" unten in der Nachtregel, nicht hier. */ .wt-sterne { opacity: 0; transition: opacity 1.4s var(--wt-kurve-weich); background-image: radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.9), transparent), radial-gradient(1.2px 1.2px at 28% 42%, rgba(255,255,255,.7), transparent), radial-gradient(1.6px 1.6px at 41% 12%, rgba(255,255,255,.85), transparent), radial-gradient(1.1px 1.1px at 57% 31%, rgba(255,255,255,.65), transparent), radial-gradient(1.5px 1.5px at 69% 8%, rgba(255,255,255,.9), transparent), radial-gradient(1.2px 1.2px at 78% 26%, rgba(255,255,255,.7), transparent), radial-gradient(1.3px 1.3px at 88% 44%, rgba(255,255,255,.8), transparent), radial-gradient(1.1px 1.1px at 34% 62%, rgba(255,255,255,.55), transparent), radial-gradient(1.4px 1.4px at 62% 71%, rgba(255,255,255,.7), transparent), radial-gradient(1.2px 1.2px at 8% 55%, rgba(255,255,255,.6), transparent), radial-gradient(1.5px 1.5px at 94% 66%, rgba(255,255,255,.75), transparent), radial-gradient(1.1px 1.1px at 20% 84%, rgba(255,255,255,.5), transparent); } /* Nur nachts: hier ist die Animation zugleich der Ein-Schalter. Sie läuft zwischen 45 und 85 Prozent und ersetzt damit den festen Wert - das ist dasselbe Bild wie bisher, nur eben ausschließlich in dieser Lage. */ body[data-wetter="nacht"] .wt-sterne { opacity: .8; animation: wt-funkeln 7s ease-in-out infinite alternate; } @keyframes wt-funkeln { from { opacity: .45; } to { opacity: .85; } } /* ---------------------------------------------------------- Partikel --- */ /* Regen und Schnee. Gezeichnet von assets/js/himmel.js; ohne JavaScript bleibt die Fläche leer - und das ist in Ordnung, die Lage sagt ohnehin schon die Aurora. */ .wt-partikel { width: 100%; height: 100%; opacity: 0; transition: opacity 1s var(--wt-kurve-weich); } .wt-partikel[data-aktiv="ja"] { opacity: 1; } /* -------------------------------------------------------------- Korn --- */ /* Feines Rauschen. Nimmt den Flächen das Sterile und lässt die Verläufe weicher wirken, weil es die Farbstufen aufbricht. Ein einziges SVG, unbewegt, als Datenadresse eingebettet. */ .wt-koern { opacity: .04; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------------------------------------------------------- Vignette --- */ /* Flacher Schleier über der Aurora. Ohne ihn liegt gedämpfter Text auf dem Seitengrund bei lebhaften Lagen unter 4,5:1 - gemessen im nachgebauten Schichtstapel. 12 % reichen; mehr würde die Farben totschlagen. */ .wt-schleier { background: rgba(0, 0, 0, var(--schleier, .12)); } .wt-vignette { background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 40%, var(--vignette, rgba(0, 0, 0, .5)) 100%); } /* ============================================================== Lagen === */ /* Rückfall, wenn die Wetterdaten nicht lesbar sind. */ .wt-himmel { --f1: rgba(58, 104, 168, .49); --f2: rgba(84, 72, 160, .38); --f3: rgba(40, 84, 132, .35); --f4: rgba(70, 120, 180, .26); --f5: rgba(50, 70, 120, .29); --staerke: .8; } body[data-wetter="sonnig"] .wt-himmel { --f1: rgba(236, 168, 40, .49); --f2: rgba(222, 108, 36, .38); --f3: rgba(150, 110, 200, .26); --f4: rgba(246, 200, 90, .35); --f5: rgba(190, 120, 60, .29); --staerke: .92; } body[data-wetter="heiter"] .wt-himmel { --f1: rgba(226, 170, 66, .41); --f2: rgba(72, 126, 194, .41); --f3: rgba(120, 140, 190, .29); --f4: rgba(240, 200, 120, .26); --f5: rgba(90, 120, 170, .29); --staerke: .85; } body[data-wetter="bewoelkt"] .wt-himmel { --f1: rgba(126, 146, 168, .41); --f2: rgba(96, 114, 136, .35); --f3: rgba(74, 90, 110, .32); --f4: rgba(150, 164, 180, .23); --f5: rgba(84, 100, 120, .29); --staerke: .78; } body[data-wetter="regen"] .wt-himmel { --f1: rgba(36, 118, 214, .49); --f2: rgba(46, 78, 134, .44); --f3: rgba(28, 60, 104, .38); --f4: rgba(70, 150, 220, .29); --f5: rgba(40, 90, 150, .32); --staerke: .9; } body[data-wetter="schnee"] .wt-himmel { --f1: rgba(150, 190, 230, .44); --f2: rgba(198, 218, 240, .32); --f3: rgba(112, 148, 194, .32); --f4: rgba(220, 235, 250, .26); --f5: rgba(130, 165, 210, .29); --staerke: .82; } body[data-wetter="frost"] .wt-himmel { --f1: rgba(78, 110, 216, .44); --f2: rgba(104, 178, 222, .35); --f3: rgba(52, 84, 152, .35); --f4: rgba(160, 210, 240, .23); --f5: rgba(70, 110, 170, .29); --staerke: .82; } body[data-wetter="hitze"] .wt-himmel { --f1: rgba(220, 70, 92, .46); --f2: rgba(236, 168, 40, .44); --f3: rgba(208, 108, 24, .35); --f4: rgba(250, 190, 90, .29); --f5: rgba(180, 60, 70, .32); --staerke: .95; } body[data-wetter="nacht"] .wt-himmel { --f1: rgba(62, 84, 170, .41); --f2: rgba(38, 52, 104, .38); --f3: rgba(92, 78, 158, .29); --f4: rgba(52, 96, 160, .23); --f5: rgba(30, 40, 80, .35); --staerke: .76; } /* ============================================================== Wind === */ /* --tempo verkürzt alle fünf Driftdauern auf einmal (siehe calc() oben). Bisher wurde die Variable nirgends gesetzt - der Kommentar versprach eine windabhängige Beschleunigung, die es gar nicht gab. Die Werte bleiben zurückhaltend: auch bei Sturm braucht ein Farbfeld noch eine halbe Minute für seine Bahn, sonst wird der Hintergrund unruhig statt lebendig. */ body[data-wind="frisch"] .wt-himmel { --tempo: .72; } body[data-wind="stark"] .wt-himmel { --tempo: .5; } /* ======================================================= Heller Modus === */ /* Auf hellem Grund kippt alles: screen würde die Felder auswaschen, also multiply. Deckung und Vignette müssen deutlich zurück, sonst legt sich ein Schleier über den Text. Das Korn stört dort ebenfalls. */ :root[data-modus="hell"] .wt-aurora span, :root:not([data-modus="dunkel"]) .wt-aurora span { mix-blend-mode: multiply; } /* Der Modus fasst nur noch Faktoren an, nie die Werte der Wetterlage. --deck .36 auf die Lagenwerte .76 bis .95 ergibt 0,27 bis 0,34 - also etwa die bisherigen 0,3, aber mit erhaltener Abstufung zwischen den Lagen. --vignette hat kein Gegenstück in den Lagenregeln und darf deshalb weiterhin direkt gesetzt werden. */ :root[data-modus="hell"] .wt-himmel, :root:not([data-modus="dunkel"]) .wt-himmel { --deck: .36; --strahl-faktor: .5; --vignette: rgba(120, 140, 160, .23); } /* Im hellen Modus kehrt sich alles um: dort darf der Grund nicht zu DUNKEL werden, sonst verliert der dunkle Text seinen Kontrast. Gemessen an den dunkelsten Bildstellen; bei 0,13 Deckkraft bleibt der Grund über 0,75 Leuchtdichte und gedämpfter Text über 4,5:1. */ :root[data-modus="hell"] .wt-bild, :root:not([data-modus="dunkel"]) .wt-bild { --bild-deckkraft: .13; filter: brightness(1.45) contrast(.7) saturate(.85); } @media (prefers-color-scheme: dark) { :root:not([data-modus="hell"]) .wt-bild { --bild-deckkraft: .46; filter: brightness(var(--bild-hell, .3)) contrast(.82) saturate(1.2); } } :root[data-modus="hell"] .wt-schleier, :root:not([data-modus="dunkel"]) .wt-schleier { --schleier: 0; } :root[data-modus="hell"] .wt-koern, :root:not([data-modus="dunkel"]) .wt-koern { opacity: .02; mix-blend-mode: multiply; } :root[data-modus="hell"] .wt-strahlen, :root:not([data-modus="dunkel"]) .wt-strahlen { mix-blend-mode: multiply; } :root[data-modus="hell"] .wt-sterne, :root:not([data-modus="dunkel"]) .wt-sterne { display: none; } /* Die Systemvorliebe "dunkel" gewinnt wieder, wenn nichts von Hand gewählt wurde - sonst blieben die hellen Werte oben kleben. Dieser Block setzt ausschließlich die NEUTRALEN Werte zurück. Die drei Zeilen, die hier früher die Strahlen je Lage wiederherstellen mussten, sind entfallen: die Lagenwerte werden gar nicht mehr angetastet. */ @media (prefers-color-scheme: dark) { :root:not([data-modus="hell"]) .wt-aurora span { mix-blend-mode: screen; } :root:not([data-modus="hell"]) .wt-himmel { --deck: 1; --strahl-faktor: 1; --vignette: rgba(0, 0, 0, .5); } :root:not([data-modus="hell"]) .wt-koern { opacity: .04; mix-blend-mode: overlay; } :root:not([data-modus="hell"]) .wt-schleier { --schleier: .12; } :root:not([data-modus="hell"]) .wt-strahlen { mix-blend-mode: screen; } :root:not([data-modus="hell"]) .wt-sterne { display: block; } } /* ====================================================== Zurückhaltung === */ @media (prefers-reduced-motion: reduce) { .wt-aurora span, .wt-strahlen, .wt-sterne { animation: none; } .wt-aurora { transition: none; transform: none; } .wt-partikel { display: none; } } /* Kleine Geräte: zwei Felder weniger und kein Korn - das spart Füllrate und damit Strom, ohne dass der Eindruck kippt. */ @media (max-width: 620px) { .wt-aurora span:nth-child(4), .wt-aurora span:nth-child(5) { display: none; } .wt-koern { display: none; } .wt-bild { transform: none; } .wt-strahlen { opacity: 0 !important; } }