/* ========================================================== perf-mobile.css — homepage render-cost reducers ---------------------------------------------------------- Why this file exists (measured 2026-07-14): the rendered homepage carries 102 live backdrop-filter elements, 84 blur() filters, 52 running animations and ~2,200 DOM nodes across 29 sections. Desktop GPUs shrug; iPad/phone Safari repaints every frosted chip on every scrolled frame → visible jank. 1) content-visibility (all devices): skip layout/paint of off-screen sections until they approach the viewport. 2) @media (pointer: coarse) — touch devices only: drop per-frame backdrop blurs (the rgba backgrounds beneath stay), freeze the big decorative blurs, stop idle animations. Desktop rendering is untouched. ========================================================== */ /* --- 1. Below-fold sections: render only when near the viewport. Sections are direct children of (29 of them). #home = the hero, always above the fold — keep eager. #manifesto = contains a position:sticky child (.manifesto-image) that paint containment would trap — keep it out. --- */ body > section:not(#home):not(#manifesto) { /* Fallback for Safari 15.4–17 (no content-visibility): layout+style containment still scopes each section's layout work so scrolling doesn't re-lay-out the whole 29-section page. No paint containment → nothing gets clipped. Browsers with content-visibility get the full skip-rendering behaviour below instead. */ contain: layout style; content-visibility: auto; contain-intrinsic-size: auto 900px; /* placeholder height until first render; 'auto' then remembers the real one */ } @media (pointer: coarse) { /* --- 2. backdrop-filter: every frosted element resamples and re-blurs its backdrop each frame while scrolling — the single biggest source of iPad jank. Elements keep their own rgba() backgrounds, so nothing goes invisible. --- */ *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Chips whose translucent backgrounds leaned on the frost for text contrast — nudge them toward opaque. */ .ct-views, .ct-favs { background: rgba(15, 23, 42, 0.85) !important; } .ct-badge { background: rgba(255, 255, 255, 0.95) !important; } .hero .badge { background: rgba(255, 255, 255, 0.22) !important; } /* --- 3. Hero mesh balls: three 600×600 blurred circles. Freezing them (round 2) wasn't enough for low-RAM devices — each still holds a large rasterized GPU layer (measured pain on iPad gen 5 / 2GB RAM). The hero keeps its base gradient; drop the balls. --- */ .mesh-ball { display: none !important; } /* --- 3b. Hero text entrance animation: staggered delays keep the headline invisible for up to ~1.5s after paint. On touch devices show the text instantly — perceived load win on exactly the devices that paint latest. --- */ .hero-home[data-text-anim] .hta { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } .hero-home[data-text-anim="shine"] h1::after { animation: none !important; opacity: 0 !important; } /* --- 4. Hero idle drift: continuously rescales the large slide image layer while it's on display. Slide transitions themselves still play — only the idle zoom stops. --- */ .slider-container .hs-slide.active .hs-media { animation: none !important; } }