/* ============================================================================ perf.css — runtime performance tiers + universal animation throttle. Two independent mechanisms, both driven from src/shared/platform/perf/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"] [class*="wipx-"], /* WIP-tab placeholders: blink / float / slide / orbit loops */ html[data-perf="lite"] [class*="eq-"], /* Equipment tab: ~13 always-on SVG micro-animations */ html[data-perf="lite"] .perc-row-dot, /* Personnel: online-status dot 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; } /* ── 1b. BOOT GATE ─────────────────────────────────────────────────────────── While the page is still loading (html.booting, set pre-paint in index.html and removed on window.load), suppress the decorative / GPU-heavy animation layer so the browser spends the load window on the critical path — data + dashboards — not on drifting orbs, the starfield or shimmer loops. Mirrors the lite kill-list so it stays curated: functional motion (the boot-loader spinner .bl-*, loading states, data) is deliberately NOT matched and keeps running. Lifts on load. */ html.booting .orb { display: none !important; filter: none !important; } html.booting body::before { animation: none !important; } /* gradient / hue-rotate drift */ html.booting body::after { display: none !important; } /* starfield */ html.booting #overview-canvas { display: none !important; } /* Three.js dashboard canvas */ html.booting .wip-banner-dot, html.booting [class*="shimmer"], html.booting [class*="glow-line"], html.booting [class*="-pulse"], html.booting [class*="wipx-"], html.booting [class*="eq-"], html.booting .perc-row-dot, html.booting .live-pill, html.booting .live-indicator { animation: 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 ─────────────────────────────────────────── */ /* src/styles/2-generic/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; } } /* ── MOBILE (2026-07-06 overhaul) — scoped, desktop untouched ── */ /* Coarse-pointer tablets (769–1024px) keep the FULL tier by default, so the 4 fixed blur(16px) orbs run for the first ~10s until the FPS watchdog reacts. Kill the orbs outright on touch devices up to 1024px — cheapest single win; the rest of the full tier stays intact. Also covers landscape phones (~844px wide) that dodge the ≤768 auto-lite gate at boot. */ @media (pointer: coarse) and (max-width: 1024px) { .orb { display: none !important; filter: none !important; } } /* Lite mode strips backdrop-filter but NOT element-level filters: the Easy View modal's two 240px aurora blobs each animate under filter:blur(16px). Drop them on touch/phone lite — mirrors the .orb treatment above. Desktop lite (pointer:fine, wide) is left byte-identical. */ @media (max-width: 768px), (pointer: coarse) { html[data-perf="lite"] .ev-aurora { display: none !important; } }