Layers must be inserted as children inside the stage:

...

etc. Prefer atmosphere-presets from talpek-moments.css or course.css for curated compositions (summit, quiet, editorial, focus, live, moment). ═══════════════════════════════════════════════════════ */ :root { --atm-cream: #f4f1e8; --atm-accent-1: #a8c4b4; --atm-accent-2: #3e7361; --atm-violet: #8b80ff; --atm-cool: #6b8eae; --atm-warm: #d4a463; } /* Standard container for the atmosphere — fixed-position, full viewport, sits behind stage content but above body background. */ .stage-atmosphere { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* Ensure .stage (main content area) stacks above the atmosphere layers. Other chrome (topbar, bottom-nav, drawer, settings-panel, scrim) already have their own positioning rules in course.css — do NOT override those, or fixed-position panels will collapse inline and lose their overlay behavior. */ .stage { position: relative; z-index: 5; } /* On desktop, widen the stage-inner for Talpek Moment slides so the signal card + flow fan don't wrap to multiple rows. The phone-first 480px cap is right for content slides but cramped for Moment layouts that need horizontal breathing room (Learner → Talpek → Warehouse → three stakeholders). */ @media (min-width: 820px) { .stage-inner:has(> .tm) { max-width: 920px; } } /* ───── Effect 1: Soft orbs (STATIC) ───── */ .layer-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.6s ease; } .atm-orbs .layer-orbs { opacity: 1; } .layer-orbs .orb { position: absolute; width: 560px; height: 560px; border-radius: 50%; filter: blur(100px); } .layer-orbs .orb:nth-child(1) { background: var(--atm-accent-2); top: -12%; left: -12%; opacity: 0.05; } .layer-orbs .orb:nth-child(2) { background: var(--atm-accent-1); bottom: -16%; right: -12%; opacity: 0.05; } .layer-orbs .orb:nth-child(3) { background: var(--atm-violet); top: 40%; right: 20%; opacity: 0.03; } /* ───── Effect 2: Film grain (STATIC) ───── Applied to so its pseudo-element escapes any stacking context created by .stage-atmosphere and truly overlays all content. */ body.atm-grain::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background-image: url("data:image/svg+xml;utf8,"); background-size: 200px 200px; opacity: 0.05; mix-blend-mode: overlay; } /* ───── Effect 3: Ambient dust (SPARING · MOTION) ───── */ .layer-dust { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.6s ease; overflow: hidden; } .atm-dust .layer-dust { opacity: 1; } .layer-dust .mote { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--atm-cream); opacity: 0; box-shadow: 0 0 4px rgba(244, 241, 232, 0.6); animation: atm-dust-float linear infinite; } @keyframes atm-dust-float { 0% { transform: translateY(105vh) translateX(0); opacity: 0; } 5%, 95% { opacity: 0.4; } 100% { transform: translateY(-5vh) translateX(40px); opacity: 0; } } /* ───── Effect 4: Vignette (STATIC) ───── */ .layer-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.55) 100%); transition: opacity 0.6s ease; } .atm-vignette .layer-vignette { opacity: 0.85; } /* ───── Effect 5: Ghost imagery (STATIC) ───── */ .layer-ghost { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.8s ease; background-size: cover; background-position: center; filter: grayscale(1) blur(3px) brightness(0.6) contrast(1.1); mix-blend-mode: screen; } .atm-ghost .layer-ghost { opacity: 0.10; } /* Hero-slide ghost: 12 individual mountains — solid gray fills, balanced directional leans (left/centered/right), varied profiles (domes, rolling, asymmetric, double-summits). Distinct gray per mountain = clean edges where they overlap, no see-through. */ [data-ghost="summit"] .layer-ghost { background-image: url("data:image/svg+xml;utf8,"); } /* Content-slide ghost: handwriting */ [data-ghost="notebook"] .layer-ghost { background-image: url("data:image/svg+xml;utf8,"); } /* Moment ghost: concentric signal rings */ [data-ghost="signal"] .layer-ghost { background-image: url("data:image/svg+xml;utf8,"); } /* Section-break ghost: layered cityscape silhouette migrated to the solid-fill technique (Top Vibe #8). Each building now uses a distinct gray value instead of opacity, giving clean edges where towers overlap. Cityscapes ARE man-made so straight edges are correct here (per the "no straight lines in nature" rule — the inverse applies: cityscapes SHOULD use straight geometry). */ [data-ghost="cityscape"] .layer-ghost { background-image: url("data:image/svg+xml;utf8,"); } /* Forest ghost: layered tree silhouettes. Organic subject — NO straight edges. Solid-fill individual shapes per Top Vibe #8. */ [data-ghost="forest"] .layer-ghost { background-image: url("data:image/svg+xml;utf8,"); } /* Ocean ghost: layered wave silhouettes. Organic subject — curves, no straight edges. */ [data-ghost="ocean"] .layer-ghost { background-image: url("data:image/svg+xml;utf8,"); } /* Clockwork ghost: nested gears. Man-made subject — straight geometry + perfect circles OK. */ [data-ghost="clockwork"] .layer-ghost { background-image: url("data:image/svg+xml;utf8,"); } /* Quote-slide ghost: parchment/journal lines */ [data-ghost="journal"] .layer-ghost { background-image: url("data:image/svg+xml;utf8,"); } /* ───── Effect 6: Aurora mesh (STATIC) ───── */ .layer-aurora { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.8s ease; background: radial-gradient(ellipse 60% 40% at 20% 30%, rgba(62, 115, 97, 0.22), transparent 60%), radial-gradient(ellipse 50% 50% at 80% 70%, rgba(168, 196, 180, 0.16), transparent 60%), radial-gradient(ellipse 40% 60% at 50% 50%, rgba(139, 128, 255, 0.08), transparent 70%); filter: blur(40px); } .atm-aurora .layer-aurora { opacity: 1; } /* ───── Effect 7: Star drift (SPARING · MOTION) ───── */ .layer-stars { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.6s ease; background-image: radial-gradient(1px 1px at 13% 19%, rgba(244, 241, 232, 0.9), transparent), radial-gradient(1px 1px at 27% 38%, rgba(244, 241, 232, 0.7), transparent), radial-gradient(1.2px 1.2px at 42% 12%, rgba(244, 241, 232, 1), transparent), radial-gradient(1px 1px at 58% 71%, rgba(244, 241, 232, 0.6), transparent), radial-gradient(1px 1px at 71% 29%, rgba(244, 241, 232, 0.8), transparent), radial-gradient(1.4px 1.4px at 86% 52%, rgba(244, 241, 232, 0.9), transparent), radial-gradient(1px 1px at 18% 61%, rgba(244, 241, 232, 0.5), transparent), radial-gradient(1.2px 1.2px at 35% 83%, rgba(244, 241, 232, 0.7), transparent), radial-gradient(1px 1px at 49% 47%, rgba(244, 241, 232, 0.6), transparent), radial-gradient(1.3px 1.3px at 64% 8%, rgba(244, 241, 232, 0.85), transparent), radial-gradient(1px 1px at 78% 77%, rgba(244, 241, 232, 0.7), transparent), radial-gradient(1px 1px at 91% 88%, rgba(244, 241, 232, 0.6), transparent), radial-gradient(1px 1px at 4% 44%, rgba(244, 241, 232, 0.8), transparent); background-size: 100% 100%; animation: atm-star-drift 180s linear infinite; } .atm-stars .layer-stars { opacity: 0.6; } @keyframes atm-star-drift { 0% { background-position: 0 0; } 100% { background-position: 40px 40px; } } /* ───── Effect 8: Horizon sweep — RETIRED 2026-04-18 ─────── Removed from the library at Mark's direction. Dust particles alone carry the meditative slide beat effectively; the horizon line added motion without clear purpose for the courses we're building. If a future course genuinely needs a slow cinematic sweep beat, we can restore from git history. */ /* ───── Effect 9: Edge glow (STATIC) ───── */ .layer-edge { position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0; transition: opacity 0.8s ease; box-shadow: inset 0 0 80px 20px rgba(62, 115, 97, 0.22), inset 0 0 160px 40px rgba(62, 115, 97, 0.10); } .atm-edge .layer-edge { opacity: 1; } /* ───── Effect 10: Caustic light (STATIC · RARE) ───── */ .layer-caustic { position: absolute; inset: -20%; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.8s ease; background: radial-gradient(circle at 20% 30%, rgba(168, 196, 180, 0.14), transparent 18%), radial-gradient(circle at 70% 20%, rgba(168, 196, 180, 0.11), transparent 20%), radial-gradient(circle at 40% 60%, rgba(168, 196, 180, 0.14), transparent 15%), radial-gradient(circle at 80% 70%, rgba(168, 196, 180, 0.10), transparent 22%), radial-gradient(circle at 15% 80%, rgba(168, 196, 180, 0.12), transparent 16%), radial-gradient(circle at 55% 45%, rgba(168, 196, 180, 0.09), transparent 20%); filter: blur(20px); } .atm-caustic .layer-caustic { opacity: 1; } /* ───── Effect 11: Spotlight (STATIC) ───── */ .layer-spotlight { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.6s ease; background: radial-gradient(ellipse 60% 60% at center, rgba(244, 241, 232, 0.05) 0%, transparent 70%); } .atm-spotlight .layer-spotlight { opacity: 1; } /* ───── Effect 12: Color grade (STATIC) ───── */ .layer-grade { position: absolute; inset: 0; pointer-events: none; z-index: 90; opacity: 0; transition: opacity 1.2s ease, background-color 1.2s ease; mix-blend-mode: overlay; } .atm-grade-warm .layer-grade { opacity: 1; background: rgba(212, 164, 99, 0.14); } .atm-grade-cool .layer-grade { opacity: 1; background: rgba(107, 142, 174, 0.14); } /* ═══════════════════════════════════════════════════════ PRESETS — curated compositions Applied by setting the preset class on the stage. Each preset sets the atm-* classes it needs. ═══════════════════════════════════════════════════════ */ .atm-preset-summit { /* Hero · ghost + stars + edge + cool */ /* Apply via JS: atm-ghost atm-stars atm-edge atm-grade-cool */ } .atm-preset-quiet { /* Content baseline · orbs + grain */ /* Apply via JS: atm-orbs atm-grain */ } .atm-preset-editorial { /* Content with place · orbs + grain + ghost + vignette */ /* Apply via JS: atm-orbs atm-grain atm-ghost atm-vignette */ } .atm-preset-focus { /* KC / quiz · spotlight + vignette + grain */ /* Apply via JS: atm-spotlight atm-vignette atm-grain */ } .atm-preset-live { /* Interactives · orbs + edge + grain */ /* Apply via JS: atm-orbs atm-edge atm-grain */ } .atm-preset-moment { /* Talpek Moments · caustic + spotlight + grain */ /* Apply via JS: atm-caustic atm-spotlight atm-grain */ } .atm-preset-celestial { /* Alternate hero · stars + aurora + grain */ /* Apply via JS: atm-stars atm-aurora atm-grain */ } .atm-preset-meditative { /* Quote / contemplation · quiet + horizon + dust */ /* Apply via JS: atm-orbs atm-grain atm-horizon atm-dust */ }