/* ============================================================ BagEngine — ambient depth layer (be-ambient.css) Enterprise finish for flagship article pages. Design constraints this file deliberately respects: - The reading column must stay calm. The wash is masked OUT of the centre so body copy never sits on moving colour. - Motion is slow enough to read as depth, not animation. - Honours prefers-reduced-motion, and disappears entirely in print. - Zero JS, zero layout impact: fixed layer, pointer-events:none, behind all content, so it cannot cause CLS or block LCP. - Colours are pulled from the existing brand tokens, not new ones. ============================================================ */ /* ⛔ LIGHT-THEME PAGES ONLY. Do not add .amb-layer to a dark page. The rules below force the root canvas to light paper and make transparent. On a dark template that either washes the page out or, worse, hides behind an inner dark wrapper and only flashes white on over-scroll bounce, which is the kind of bug nobody catches in review. (Removed from ai-assistant-amazon-account-access-2026 on 2026-08-03 for exactly this reason.) A negative-z-index layer paints above the root canvas but BELOW an opaque body background. So the page that opts in must let the canvas show through, or the whole effect is invisible. */ html:has(.amb-layer) { background: var(--paper, #fafaf9); } body:has(> .amb-layer) { background: transparent; } .amb-layer { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; } /* ---- colour wash: four soft brand-tinted pools, slowly drifting ---- */ .amb-layer::before { content: ""; position: absolute; inset: -25%; background: radial-gradient(44rem 32rem at 10% 16%, rgba(124, 106, 247, .30), transparent 62%), radial-gradient(38rem 28rem at 90% 10%, rgba(8, 145, 178, .24), transparent 60%), radial-gradient(48rem 36rem at 82% 84%, rgba(180, 83, 9, .17), transparent 62%), radial-gradient(34rem 26rem at 6% 86%, rgba(124, 106, 247, .22), transparent 60%); filter: blur(22px); transform-origin: 50% 50%; animation: amb-drift 54s ease-in-out infinite alternate; /* Keep the centre clear: transparent over the reading column, opaque out in the gutters. 44rem ~= the 720px article column plus air. (Do NOT reach for mask-composite here: a single mask layer with exclude inverts the intent and confines the wash to the centre, which is precisely backwards.) */ -webkit-mask-image: radial-gradient(ellipse 44rem 130% at 50% 45%, transparent 0%, transparent 30%, rgba(0, 0, 0, .65) 48%, #000 68%); mask-image: radial-gradient(ellipse 44rem 130% at 50% 45%, transparent 0%, transparent 30%, rgba(0, 0, 0, .65) 48%, #000 68%); } /* ---- fine grain: what actually reads as "texture" rather than gradient ---- */ .amb-layer::after { content: ""; position: absolute; inset: 0; opacity: .30; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,\ "); background-size: 180px 180px; } @keyframes amb-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-1.6%, 1.1%, 0) scale(1.045); } 100% { transform: translate3d(1.4%, -1.3%, 0) scale(1.02); } } /* ---- a hairline grid, very faint, for the "engineered" feel ---- */ .amb-layer .amb-grid { position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(to right, rgba(63, 63, 70, .07) 1px, transparent 1px), linear-gradient(to bottom, rgba(63, 63, 70, .07) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 52rem 120% at 50% 50%, transparent 0%, transparent 40%, #000 72%); mask-image: radial-gradient(ellipse 52rem 120% at 50% 50%, transparent 0%, transparent 40%, #000 72%); } /* ---- accessibility + media ---- */ @media (prefers-reduced-motion: reduce) { .amb-layer::before { animation: none; } } /* On narrow screens the gutters do not exist, so the wash would sit directly under body copy. Drop it and keep only flat paper. */ @media (max-width: 1100px) { .amb-layer::before, .amb-layer .amb-grid { display: none; } .amb-layer::after { opacity: .18; } } @media print { .amb-layer { display: none !important; } }