/* ============================================================================ * performance-overrides.css * * Purely additive overrides. Load LAST in so these rules win by cascade * order. Nothing here removes functionality — it only disables heavy animation * for users who opt out and caps the bubble count on small viewports to save * GPU/battery. * ============================================================================ */ /* ---------------------------------------------------------------------------- * 1. Respect the OS "Reduce Motion" setting. * All decorative animations freeze in place; content is still readable. * ---------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .bubble, .bubbles .bubble { animation: none !important; opacity: 0 !important; } /* Keep the typewriter still so screen readers aren't overwhelmed */ .typewriter, .typewriter-text { animation: none !important; border-right: none !important; } } /* ---------------------------------------------------------------------------- * 2. On small viewports (phones) hide the majority of bubbles. * The JS that spawns bubbles appends 128 of them; this CSS hides all but * the first 24 so the effect is still present but GPU load drops ~80%. * ---------------------------------------------------------------------------- */ @media (max-width: 640px) { .bubbles .bubble:nth-child(n + 25) { display: none !important; } } /* ---------------------------------------------------------------------------- * 3. On very small viewports (phones in portrait, low-power devices) hide them * entirely. The footer still reads fine without the effect. * ---------------------------------------------------------------------------- */ @media (max-width: 420px) { .bubbles .bubble { display: none !important; } } /* ---------------------------------------------------------------------------- * 4. Save-Data: if the user has the Data Saver flag on, kill the effect * regardless of viewport. * ---------------------------------------------------------------------------- */ @media (prefers-reduced-data: reduce) { .bubbles .bubble { display: none !important; } }