/* ============================================================================ perf.css — runtime performance tiers + universal animation throttle. Two independent mechanisms, both driven from js/perf-mode.js (+ the pre-paint inline detector in index.html ): 1. html[data-perf="lite"] — "low-power mode". Auto-applied on weak hardware (few CPU cores / little RAM), when the user prefers reduced motion, when a runtime FPS watchdog detects sustained jank, or when the user picks it manually. Kills the GPU-expensive layers site-wide so the app stays smooth "even on a potato": backdrop-filter blur, the 4 drifting orbs, the starfield, the animated cosmic gradient, and the always-on decorative animations. Glass tokens are swapped for near-opaque dark fills so panels stay readable WITHOUT the blur doing the work. 2. body.tab-hidden — applied to EVERY user (any tier) while the tab is in the background. Pauses all CSS animations so a backgrounded tab costs ~0 GPU/ CPU (the browser keeps compositing infinite animations otherwise). This file is loaded LAST in the CSS cascade so its overrides win ties. It touches no layout — only paint/animation — so it can't break a component. ============================================================================ */ /* ── 1. LITE MODE ────────────────────────────────────────────────────────── */ /* Near-opaque glass so panels read as solid dark cards once blur is gone. Every component that uses var(--glass-*) inherits this automatically — one place instead of chasing 200+ backdrop-filter sites. Higher specificity than :root, so it wins regardless of stylesheet load order. */ html[data-perf="lite"]:not([data-theme="light"]) { --glass-1: rgba(14, 19, 38, 0.86); --glass-2: rgba(18, 24, 48, 0.88); --glass-3: rgba(24, 30, 58, 0.90); --glass-4: rgba(30, 38, 70, 0.92); } /* Light theme on a weak device: keep light panels, just more opaque (no blur). */ html[data-perf="lite"][data-theme="light"] { --glass-1: rgba(255, 255, 255, 0.88); --glass-2: rgba(255, 255, 255, 0.90); --glass-3: rgba(255, 255, 255, 0.93); --glass-4: rgba(255, 255, 255, 0.95); } /* Kill the single most expensive paint op (backdrop blur) everywhere. */ html[data-perf="lite"] *, html[data-perf="lite"] *::before, html[data-perf="lite"] *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Drop the decorative background layers entirely. */ html[data-perf="lite"] .orb { display: none !important; } html[data-perf="lite"] body::before { animation: none !important; } /* stop hue-rotate / gradient drift */ html[data-perf="lite"] body::after { display: none !important; } /* starfield */ html[data-perf="lite"] #overview-canvas { display: none !important; } /* Three.js dashboard canvas */ /* Stop always-on decorative loops that keep the compositor awake. These are purely cosmetic (shimmer / glow sweeps / pulses). Functional motion (spinners, reveals, toasts) is left alone. */ html[data-perf="lite"] .wip-banner-dot, html[data-perf="lite"] [class*="shimmer"], html[data-perf="lite"] [class*="glow-line"], html[data-perf="lite"] [class*="-pulse"], html[data-perf="lite"] .live-pill, html[data-perf="lite"] .live-indicator { animation: none !important; } /* Heavy blur filters on decorative elements (not backdrop — the element's own filter) are cheap to drop too. */ html[data-perf="lite"] .orb { filter: none !important; } /* ── 2. UNIVERSAL: pause everything while the tab is hidden ───────────────── */ /* Applies to all tiers. The browser does NOT stop infinite CSS animations on a backgrounded tab on its own; this makes a hidden tab effectively free. */ body.tab-hidden *, body.tab-hidden *::before, body.tab-hidden *::after { animation-play-state: paused !important; } /* ── 3. Reduced-motion hardening ─────────────────────────────────────────── */ /* css/animations.css already neutralises durations under reduced-motion; this additionally drops the heavy background layers for those users (they also get data-perf="lite" from the detector, but this is belt-and-suspenders for any path that sets reduced-motion after load). */ @media (prefers-reduced-motion: reduce) { .orb { display: none !important; } body::before { animation: none !important; } }