/* ============================================================ DECLARE — Scroll atmosphere (atmosphere.css) The page background morphs slowly as the reader descends through the narrative: darkness → the 2am low → light breaking through at the Word → fullest light at prayer → settled dusk at the coda. How it works: atmosphere.js writes the active zone to and injects one fixed layer (#db-atmos). CSS does the morph (~1200ms). Every colour references a declare.css token, so light/dark themes are automatic. Reverent pace, never a scrub — it morphs at the same dignified speed no matter how fast you scroll, like dawn. Stands down to a quick cross-fade under prefers-reduced-motion (colour only, no movement). ============================================================ */ /* Lenis smooth-scroll support rules (were missing site-wide). */ html.lenis, html.lenis body{ height:auto; } .lenis.lenis-smooth{ scroll-behavior:auto !important; } .lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; } .lenis.lenis-stopped{ overflow:hidden; } /* Typed custom props so the colour morph is smooth (Safari 16.4+, Chrome, Firefox 128+). Where @property is unsupported the swap is instant — still correct, just no tween. */ @property --atmos-tint{ syntax:''; inherits:true; initial-value:transparent; } @property --atmos-glow{ syntax:''; inherits:true; initial-value:transparent; } :root{ --atmos-tint:transparent; --atmos-glow:var(--topglow, transparent); transition:--atmos-tint 1200ms var(--ease-reveal, cubic-bezier(.16,1,.3,1)), --atmos-glow 1200ms var(--ease-calm, cubic-bezier(.4,0,.2,1)); } /* The single morphing layer, injected once by atmosphere.js as the first child of . Sits BEHIND all content (z-index:-1), above the base body bg, so it tints the air around the cards and never touches text legibility. */ #db-atmos{ position:fixed; inset:0; z-index:-1; pointer-events:none; contain:layout style paint; background: /* the light breaking through — a glow that blooms larger/brighter toward the sacred zones */ radial-gradient(135% 92% at 50% -8%, var(--atmos-glow), transparent 58%), /* a soft ambient tint that warms or deepens the field — radial so it never flat-darkens */ radial-gradient(120% 80% at 50% 38%, var(--atmos-tint), transparent 78%); } /* ---- Zones → existing mood tokens (theme-agnostic; per-page --accent flows in). --atmos-glow drives the bloom, --atmos-tint the ambient warmth. Tuned so the arc reads clearly: dim/cool hero → light at the Word → fullest at prayer. ---- */ html[data-atmos="hero"] { --atmos-glow:color-mix(in srgb, var(--topglow) 55%, transparent); --atmos-tint:transparent; } html[data-atmos="answer"] { --atmos-glow:var(--glow1); --atmos-tint:color-mix(in srgb, var(--accent, var(--gold)) 12%, transparent); } html[data-atmos="night"] { --atmos-glow:transparent; --atmos-tint:color-mix(in srgb, #040a07 42%, transparent); } html[data-atmos="word"] { --atmos-glow:var(--glow2); --atmos-tint:color-mix(in srgb, var(--return) 30%, transparent); } html[data-atmos="prayer"] { --atmos-glow:var(--pglow); --atmos-tint:color-mix(in srgb, var(--prayer) 34%, transparent); } html[data-atmos="coda"] { --atmos-glow:color-mix(in srgb, var(--rglow) 90%, transparent); --atmos-tint:color-mix(in srgb, var(--return) 18%, transparent); } /* Reduced motion: keep the dawn-arc MEANING (the colour still shifts per zone) but make it a quick cross-fade with no movement and no parallax. */ @media (prefers-reduced-motion: reduce){ :root{ transition-duration:240ms; transition-timing-function:linear; } }