@layer backgrounds { /* When a bg mode is active: set base color on , make transparent so the fixed ::before layer (z-index:-1) is visible through the body. data-bg lives on ; body defaults to background:var(--bg) in structure.css. */ [data-bg]:not([data-bg="none"]) { background: var(--bg); } [data-bg]:not([data-bg="none"]) body { background: transparent; } /* Fixed full-viewport layer — sits behind all content. Each mode lists the contrast scrim gradient FIRST so it renders on top of the visual layers; this folds the old body::after scrim in and frees ::after for the FX layer (E3). */ [data-bg]:not([data-bg="none"]) body::before { content: ""; position: fixed; inset: 0; z-index: -1; background-size: cover; background-position: center; } [data-bg="aurora"] body::before { background: linear-gradient( var(--bg-scrim, color-mix(in oklab, var(--bg) 72%, transparent)), var(--bg-scrim, color-mix(in oklab, var(--bg) 88%, transparent)) ), radial-gradient(60% 50% at 75% 20%, color-mix(in oklab, var(--accent-base) 55%, transparent), transparent 70%), radial-gradient(50% 50% at 20% 80%, color-mix(in oklab, var(--accent-base) 35%, transparent), transparent 70%), var(--bg); filter: blur(var(--bg-blur, 0.5rem)) saturate(1.1); } [data-bg="mesh"] body::before { background: linear-gradient( var(--bg-scrim, color-mix(in oklab, var(--bg) 72%, transparent)), var(--bg-scrim, color-mix(in oklab, var(--bg) 88%, transparent)) ), radial-gradient(40% 40% at 15% 25%, color-mix(in oklab, var(--accent-base) 45%, transparent), transparent 70%), radial-gradient(45% 45% at 85% 35%, color-mix(in oklab, var(--accent-base) 30%, transparent), transparent 70%), radial-gradient(50% 50% at 50% 100%, color-mix(in oklab, var(--accent-base) 25%, transparent), transparent 70%), var(--bg); } [data-bg="cover"] body::before { background: linear-gradient( var(--bg-scrim, color-mix(in oklab, var(--bg) 72%, transparent)), var(--bg-scrim, color-mix(in oklab, var(--bg) 88%, transparent)) ), var(--page-cover); filter: blur(var(--bg-blur, 1.25rem)) brightness(0.6) saturate(1.1); transform: scale(1.1); } /* image mode keeps a lighter scrim than the token default (~20% less dark) so a hero photo reads brighter behind glass/content. */ [data-bg="image"] body::before { background: linear-gradient( color-mix(in oklab, var(--bg) 60%, transparent), color-mix(in oklab, var(--bg) 68%, transparent) ), var(--page-bg); filter: brightness(0.76) saturate(1.05); } } @media (prefers-reduced-motion: reduce) { [data-bg] body::before { filter: none; } } @layer backgrounds { /* landing layout: cinematic dim — deeper than standard image mode, fading to near-solid at the foot so long-form sections read on art-heavy backdrops (ephemera house style). */ [data-layout="landing"][data-bg="image"] body::before { background: linear-gradient(180deg, color-mix(in oklab, var(--bg) 38%, transparent), color-mix(in oklab, var(--bg) 72%, transparent) 45%, color-mix(in oklab, var(--bg) 94%, transparent)), var(--page-bg); /* the shorthand above resets these — restate, or the art tiles instead of covering */ background-size: cover; background-position: center; filter: brightness(0.55) saturate(0.7); } }