/* ═══════════════════════════════════════════════════════════════════ FULL-PAGE SKY BACKDROP — weather-reactive, fixed behind all content ═══════════════════════════════════════════════════════════════════ Two-tier design: a live weather gradient washes the top ~60vh (the "immersive" zone the garden hero sits in), then fades into the flat --bg page color so the climate strip / trend charts below stay calm and legible. All state is written by _updateSky() in garden.js onto -- data-sky-phase ("dawn"|"day"|"dusk"|"night"), data-weather ("clear"| "partly-cloudy"|"overcast"|"rain"|"storm"|"fog"|"snow"), and the --sky-stop-0/1/2 gradient custom properties -- exactly like the existing data-theme attribute in tokens.css. CSS reacts to those attributes; garden.js never writes inline background/filter here. Load order: after garden-hero.css (index.html) -- tokens are still first in the cascade. */ #sky-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient( 180deg, var(--sky-stop-0, #a9d4f0) 0%, var(--sky-stop-1, #cfe8f5) 34%, var(--sky-stop-2, #eaf6fb) 60%, var(--bg) 82% ); transition: background 3s ease, filter 3s ease; } /* Overcast/rain/storm desaturation -- applied to the whole scene now instead of just the old 86px strip. */ html[data-weather="overcast"] #sky-backdrop, html[data-weather="rain"] #sky-backdrop, html[data-weather="storm"] #sky-backdrop { filter: saturate(0.78); } /* Warm/cool day tint (ported from the old per-strip filter in _updateSky) */ html[data-sky-phase="day"][data-sky-temp="hot"] #sky-backdrop { filter: sepia(0.12) saturate(1.08); } html[data-sky-phase="day"][data-sky-temp="cold"] #sky-backdrop { filter: hue-rotate(16deg) saturate(0.9); } .sky-band { position: absolute; inset: 0; height: 60vh; min-height: 340px; } /* ── Stars (night only) ── */ .sky-stars { position: absolute; inset: 0; opacity: 0; background-image: radial-gradient(1.4px 1.4px at 8% 18%, rgba(255,255,255,0.9) 50%, transparent 52%), radial-gradient(1.1px 1.1px at 22% 9%, rgba(255,255,255,0.75) 50%, transparent 52%), radial-gradient(1.6px 1.6px at 35% 24%, rgba(255,255,255,0.85) 50%, transparent 52%), radial-gradient(1.1px 1.1px at 48% 12%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.3px 1.3px at 60% 6%, rgba(255,255,255,0.85) 50%, transparent 52%), radial-gradient(1.1px 1.1px at 68% 20%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 80% 10%, rgba(255,255,255,0.9) 50%, transparent 52%), radial-gradient(1.1px 1.1px at 90% 22%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.2px 1.2px at 15% 33%, rgba(255,255,255,0.65) 50%, transparent 52%), radial-gradient(1.2px 1.2px at 55% 30%, rgba(255,255,255,0.65) 50%, transparent 52%); transition: opacity 3s ease; z-index: 0; } html[data-sky-phase="night"] .sky-stars { opacity: 1; } /* stars stay hidden through overcast/rain/storm/fog/snow -- clouds cover them */ html[data-weather="overcast"] .sky-stars, html[data-weather="rain"] .sky-stars, html[data-weather="storm"] .sky-stars, html[data-weather="fog"] .sky-stars, html[data-weather="snow"] .sky-stars { opacity: 0; } /* ── Sun / moon (relocated from the old .garden-sky strip) ── */ /* Fallback position (JS overrides with celestialPos() arc math once SKY.sunrise_ts/sunset_ts loads) -- fixed px, matching the open-sky strip between the header (52px) and the hero's treeline (~150px), not a % of the much-taller 60vh backdrop band. */ .sky-sun { position: absolute; top: 70px; left: 75%; width: 64px; height: 64px; border-radius: 50%; background: #ffd94a; box-shadow: 0 0 46px 16px rgba(255,220,50,0.5); z-index: 1; transition: opacity 2s ease, background 2s ease, box-shadow 2s ease, left 2s ease, top 2s ease; } .sky-moon { position: absolute; top: 70px; left: 75%; width: 46px; height: 46px; filter: drop-shadow(0 0 8px rgba(220,215,180,0.5)); overflow: visible; opacity: 0; z-index: 1; transition: opacity 2s ease, left 2s ease, top 2s ease; } .sky-moon svg { width: 100%; height: 100%; } @media (prefers-reduced-motion: no-preference) { .sky-sun { animation: sky-sun-shimmer 3.8s ease-in-out infinite; } @keyframes sky-sun-shimmer { 0%, 100% { box-shadow: 0 0 46px 16px rgba(255,220,50,0.5); } 50% { box-shadow: 0 0 64px 22px rgba(255,220,50,0.68); } } /* Soft god-rays on a clear day -- subtle, low-opacity conic wash from the sun's general position, not a hard beam. */ .sky-band::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0; background: conic-gradient(from 200deg at 75% 8%, rgba(255,240,200,0.16) 0deg, transparent 40deg, transparent 320deg, rgba(255,240,200,0.16) 360deg); transition: opacity 3s ease; } html[data-weather="clear"][data-sky-phase="day"] .sky-band::before, html[data-weather="partly-cloudy"][data-sky-phase="day"] .sky-band::before { opacity: 1; } } /* ── Clouds (injected by JS, reused from the old sky strip) ── */ .sky-cloud { position: absolute; height: 30px; border-radius: 50px; background: rgba(255,255,255,0.85); filter: blur(2px); z-index: 1; transition: opacity 3s ease, background 3s ease; } .sky-cloud::before, .sky-cloud::after { content: ''; position: absolute; background: inherit; border-radius: 50%; } .sky-cloud::before { width: 55%; height: 160%; top: -50%; left: 18%; } .sky-cloud::after { width: 40%; height: 130%; top: -35%; right: 18%; } @media (prefers-reduced-motion: no-preference) { .sky-cloud { animation: sky-cloud-drift var(--g-cdur, 70s) linear infinite; animation-delay: var(--g-cdelay, 0s); } @keyframes sky-cloud-drift { 0% { transform: translateX(-320px); } 100% { transform: translateX(calc(100vw + 320px)); } } } /* ── Overcast/rain/storm grey veil ── */ .sky-veil { position: absolute; inset: 0; background: rgba(190,197,205,0.32); opacity: 0; z-index: 1; transition: opacity 3s ease; } html[data-weather="overcast"] .sky-veil, html[data-weather="rain"] .sky-veil, html[data-weather="storm"] .sky-veil { opacity: 1; } html[data-weather="storm"] .sky-veil { background: rgba(120,126,138,0.42); } /* ── Fog / freezing fog ── */ .sky-fog { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(220,224,224,0.55), rgba(220,224,224,0.15)); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); opacity: 0; z-index: 2; transition: opacity 3s ease; } html[data-weather="fog"] .sky-fog { opacity: 1; } /* ── Storm lightning flash ── */ .sky-flash { position: absolute; inset: 0; background: rgba(255,255,255,0.55); opacity: 0; z-index: 3; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { html[data-weather="storm"] .sky-flash { animation: sky-lightning 7s ease-in-out infinite; } @keyframes sky-lightning { 0%, 92%, 100% { opacity: 0; } 93% { opacity: 0.85; } 94% { opacity: 0.1; } 95% { opacity: 0.6; } 96%, 99% { opacity: 0; } } } /* ── Rain streaks -- taller fall distance than the old 86px strip; the per-drop fall distance is set inline by garden.js (--rfall) to match the live .sky-band height. Slant speeds up with data-sky-wind. ── */ @media (prefers-reduced-motion: no-preference) { .sky-rain-drop { position: absolute; top: -12px; width: 1.5px; height: 16px; border-radius: 1px; background: linear-gradient(180deg, rgba(190,210,255,0) 0%, rgba(190,210,255,0.85) 100%); z-index: 4; animation: sky-rain-fall var(--rdur, 1s) linear var(--rdelay, 0s) infinite; } html[data-weather="storm"] .sky-rain-drop { height: 22px; opacity: 0.95; } @keyframes sky-rain-fall { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 0.9; } 90% { opacity: 0.9; } 100% { opacity: 0; transform: translate(var(--rdrift, 0px), var(--rfall, 420px)); } } } /* ── Snow flakes ── */ @media (prefers-reduced-motion: no-preference) { .sky-snowflake { position: absolute; top: -12px; color: rgba(255,255,255,0.92); font-size: var(--sfsize, 10px); z-index: 4; animation: sky-snow-fall var(--sdur, 9s) linear var(--sdelay, 0s) infinite; } @keyframes sky-snow-fall { 0% { opacity: 0; transform: translate(0, 0) rotate(0deg); } 8% { opacity: 0.9; } 92% { opacity: 0.9; } 100% { opacity: 0; transform: translate(var(--sdrift, 20px), var(--sfall, 420px)) rotate(140deg); } } } /* Reduced motion: everything above is gated out of existence rather than just frozen mid-frame -- the sky still shows the right gradient/veil/fog, it just doesn't move. */ @media (max-width: 720px) { .sky-band { height: 46vh; min-height: 260px; } .sky-sun, .sky-moon { transform: scale(0.8); } }