/* ========================================================================== DS v3 — Ambient Background System (utilities/ambient-bg.css) Issue: #234 · Parent: #189 (FASE-1) ========================================================================== Background de ambiência opt-in via `data-glass-bg` no . Uso: ← ativa o background animado (dark por padrão) ← variante clara estática Arquitetura: - `body::before` fixed, inset 0, z-index -1 (atrás de todo conteúdo) - 3 orbs radiais: cyan primário, indigo, teal — sem requisição HTTP - Animação `ambientShift` 20s ease-in-out infinite alternate - Desativada automaticamente: prefers-reduced-motion + mobile (≤768px) - `will-change: background-position` para promoção a GPU compositor Performance: - Zero requisições externas — gradientes CSS puros - `will-change` apenas no elemento do orb, não global - Animação pausada em dispositivos que não suportam bem ========================================================================== */ @layer ds-utilities { /* ─── Dark Theme (padrão Aether quando tema efetivo é dark) ─── */ [data-glass-bg] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; /* Fundo base escuro com tint de slate-blue */ background: oklch(10% 0.015 260); /* 3 orbs radiais: 1. Cyan primário (top-left) — identidade Aether 2. Indigo (top-right) — profundidade fria 3. Teal (bottom-left) — contraponto quente-frio */ background-image: radial-gradient( ellipse 60vw 50vh at 15% 15%, oklch(62% 0.22 210 / 0.12) 0%, transparent 70% ), radial-gradient( ellipse 50vw 40vh at 85% 10%, oklch(45% 0.18 250 / 0.13) 0%, transparent 70% ), radial-gradient( ellipse 40vw 60vh at 20% 80%, oklch(55% 0.16 190 / 0.08) 0%, transparent 70% ); animation: ambientShift 20s ease-in-out infinite alternate; will-change: background-position; } @keyframes ambientShift { from { background-position: 0% 0%, 100% 0%, 0% 100%; } to { background-position: 5% 5%, 95% 5%, 5% 95%; } } /* ─── Light Theme ─── */ [data-glass-bg][data-theme="light"] body::before { background: oklch(96% 0.006 220); background-image: radial-gradient( ellipse 60vw 50vh at 15% 15%, oklch(95% 0.030 210 / 0.80) 0%, transparent 70% ), radial-gradient( ellipse 50vw 40vh at 85% 10%, oklch(96% 0.020 240 / 0.60) 0%, transparent 70% ); /* Light theme: gradientes suaves, sem animação para não distrair */ animation: none; will-change: auto; } /* ─── Acessibilidade + Performance Mobile ─── */ @media (prefers-reduced-motion: reduce), (max-width: 768px) { [data-glass-bg] body::before { animation: none; will-change: auto; } } }