/* * perf.css — performance escape hatches. * * Two ladders of optimization, applied independently: * * 1. prefers-reduced-motion: reduce * Honors the OS-level accessibility setting. Mostly used by users on * slow machines or low-end laptops where every animation costs frame * budget. Kills infinite animations and shortens long transitions. * Standard accessibility hygiene; no opt-in needed from us. * * 2. html.bc-lite ("lite" mode) * Hard kill-switch attached to by public/js/theme.js at boot * time when device hints suggest a slow client (navigator.deviceMemory * < 4, connection.saveData, prefers-reduced-motion). Also user- * flippable via the ?lite=1 query string and persisted in localStorage * key 'bc-lite'. Disables the expensive GPU-bound effects entirely: * backdrop-filter, large soft shadows, and the infinite-scroll * marquee on the landing logos strip. * * Visual fidelity drops a notch (solid panels instead of frosted * glass, no parallax glow shifts) but the app stays responsive on * machines without hardware acceleration. */ /* ─────────────────────────────────────────────────────────────── Ladder 1: OS-level reduced motion. Cheap and universally good. ─────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { /* Wipe transitions and animations across the board — anything that moved or faded will now jump straight to its target state. We deliberately use !important here because there's no graceful way to opt out per-component: the user has asked the system for less motion, and they should get it everywhere. */ *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ─────────────────────────────────────────────────────────────── Ladder 2: html.bc-lite — opt-in (auto-detected or user-flipped) "low-fidelity high-performance" mode. ─────────────────────────────────────────────────────────────── */ /* Backdrop filters are the single biggest GPU cost on this app — every frosted navbar / modal scrim / drawer composes a full re-blur of whatever sits behind it. On a software renderer that's 30-60ms per frame. Swap them for a solid translucent fill that reads almost the same against our dark palette. */ html.bc-lite *, html.bc-lite *::before, html.bc-lite *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.bc-lite .navbar, html.bc-lite .lp-nav, html.bc-lite .sp-nav, html.bc-lite .auth-nav { background: var(--bg-surface) !important; } /* Tone down soft shadows. They're not GPU-bound per se, but on a software path each pixel of the blur radius costs time. Halving the spread keeps the depth cue without thrashing repaints. */ html.bc-lite { --shadow-pop: 0 2px 8px rgba(0,0,0,0.4); --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); } /* The landing-page logos marquee runs an infinite transform animation over a wide track. Painful on every frame without GPU. In lite mode we freeze the track at its starting offset — the row still reads as "logos in a strip," just no longer auto-scrolling. */ html.bc-lite .logos-row, html.bc-lite [class*="marquee"] { animation: none !important; } /* The two ambient body backgrounds (dot grid + corner glows) are static but they still get re-rasterized on every scroll on some browsers because the body itself paints. Disabling them in lite mode saves a full-viewport repaint each scroll tick. */ html.bc-lite body::before, html.bc-lite body::after { display: none !important; } /* Decorative infinite pulses (pulse-dot, dotPulse, dsSavingPulse) are small but they keep the compositor active. Kill them in lite mode — the "live" / "saving" labels still read fine without the pulse. */ html.bc-lite .pulse, html.bc-lite .tab-dot, html.bc-lite .drawings-save-status[data-state="saving"] { animation: none !important; }