/* ===== ambient page background (behind everything, whole page, not just the hero) ===== */ /* controlled by , set in /admin → Settings */ /* ---------- variant A: soft drifting image (default) ---------- */ html[data-ambient="drift"] body { position: relative; } html[data-ambient="drift"] body::before { content: ""; position: fixed; inset: -12%; z-index: -1; background: var(--hero) center 35% / cover no-repeat; filter: blur(70px) saturate(1.15) brightness(.45); opacity: .4; will-change: transform; animation: ambientDrift 120s ease-in-out infinite alternate; pointer-events: none; } @keyframes ambientDrift { 0% { transform: scale(1.06) translate(-1.5%, -1%); } 50% { transform: scale(1.12) translate(1.5%, 1.5%); } 100% { transform: scale(1.06) translate(-1%, 1.2%); } } /* ---------- variant C: floating particles (canvas, driven by ambient.js) ---------- */ .ambient-canvas { display: none; } html[data-ambient="particles"] .ambient-canvas { display: block; position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; } /* motion-sensitive visitors get a still frame instead of an animated one */ @media (prefers-reduced-motion: reduce) { html[data-ambient="drift"] body::before { animation: none; } }