Section atmosphere: radial wash + warm bloom (reusable per chapter)
Chapter
Film grain: fixed, faintly drifting noise over the entire page
Two reusable ambient pieces. The section atmosphere is a soft radial wash plus an optional warm gold bloom that sits behind a chapter, never intercepting pointer events, reusing the hero overlay recipe so new sections live inside the same air. The film grain is a fixed, faintly drifting noise field laid over the whole page for a cinematic texture.
Drop the atmosphere behind every chapter so the page reads as one continuous space. Lay the grain once, fixed, at the root. Both are decorative and aria-hidden.
Never let an ambient layer intercept pointer events. Keep grain opacity near five percent; any higher reads as static. Under reduced motion the grain stops drifting but stays; the bloom is static already.
<style>
:root{
--bg:#0b0a08;--surface:#14110b;--ivory:#efe8d6;--muted:#9c9078;--faint:#5a5446;
--line:#2a2519;--line-faint:rgba(239,232,214,.08);--gold:#c9a24b;--gold-soft:#e7cd8c;
--font-display:'Instrument Serif',ui-serif,Georgia,'Times New Roman',serif;
--font-title:'Libre Caslon Condensed',ui-serif,Georgia,'Times New Roman',serif;
--font-body:'Inter',system-ui,-apple-system,sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,monospace;
--ease:cubic-bezier(.22,1,.36,1);--dur-fast:200ms;--dur-base:400ms;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ivory);font-family:var(--font-body);min-height:100vh;padding:64px 48px}
@keyframes hf-grain{0%{transform:translate(0,0)}25%{transform:translate(-5%,4%)}50%{transform:translate(4%,-5%)}75%{transform:translate(-3%,-4%)}100%{transform:translate(5%,3%)}}
.grain-layer{
position:fixed;inset:-55%;z-index:60;pointer-events:none;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:170px 170px;
animation:hf-grain 12s ease-in-out infinite;
}
.atm{position:relative;width:100%;height:60svh;overflow:hidden;border:1px solid var(--line);border-radius:1.5rem;background:var(--bg);margin-bottom:32px}
.atm .layer{position:absolute;inset:0;pointer-events:none}
.atm .wash{background:radial-gradient(120% 90% at 50% 0%,rgba(20,17,11,.85) 0%,transparent 60%)}
.atm .bloom{opacity:.6;mix-blend-mode:screen;background:radial-gradient(46% 38% at 50% 42%,rgba(201,162,75,.10),transparent 70%)}
.atm .vignette{background:radial-gradient(120% 90% at 50% 100%,rgba(11,10,8,.9),transparent 55%)}
.atm .fg{position:relative;z-index:10;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px}
.atm .kick{font-family:var(--font-mono);font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.42em;color:var(--gold)}
.atm h2{margin-top:20px;font-family:var(--font-title);font-weight:400;font-size:clamp(1.75rem,4vw,2.75rem);line-height:1.04;color:var(--ivory)}
.cap{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--faint);text-align:center;margin-bottom:8px}
@media(prefers-reduced-motion:reduce){
.grain-layer{animation:none}
}
</style>
<p class="cap">Section atmosphere: radial wash + warm bloom (reusable per chapter)</p>
<div class="atm">
<div class="layer wash" aria-hidden="true"></div>
<div class="layer bloom" aria-hidden="true"></div>
<div class="layer vignette" aria-hidden="true"></div>
<div class="fg">
<p class="kick">Chapter</p>
<h2>The same atmosphere the hero lives in</h2>
</div>
</div>
<p class="cap">Film grain: fixed, faintly drifting noise over the entire page</p>