/* ========================================================================== DS v3 — Ambient Background System (utilities/ambient-bg.css) ========================================================================== `data-glass-bg` continua suportado por compatibilidade com os layouts, mas agora é estático e operacional por padrão. Orbs animados exigem opt-in explícito para contextos não operacionais. Defaults: - aplica apenas fundo base estável. - adiciona gradientes estáticos sutis. - permite animação. ========================================================================== */ @layer ds-utilities { [data-glass-bg] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--ds-bg-primary); } [data-glass-bg][data-theme="dark"] body::before, :root[data-glass-bg][data-theme-effective="dark"] body::before { background: var(--ds-bg-primary); } [data-glass-bg="ambient"] body::before, [data-glass-bg="motion"] body::before { background: radial-gradient( ellipse 60vw 50vh at 15% 15%, color-mix(in oklch, var(--ds-primary) 10%, transparent) 0%, transparent 70% ), radial-gradient( ellipse 50vw 40vh at 85% 10%, color-mix(in oklch, var(--ds-info) 8%, transparent) 0%, transparent 70% ), var(--ds-bg-primary); } [data-glass-bg="motion"][data-motion="expressive"] body::before { animation: dsAmbientShift 24s ease-in-out infinite alternate; will-change: background-position; } @keyframes dsAmbientShift { from { background-position: 0% 0%, 100% 0%, 0% 0%; } to { background-position: 4% 4%, 96% 4%, 0% 0%; } } @media (prefers-reduced-motion: reduce), (max-width: 768px), (prefers-contrast: more) { [data-glass-bg] body::before { animation: none; will-change: auto; background: var(--ds-bg-primary); } } }