/* ============================================================ mobile-thermal.css · thermal mitigation for phones (≤ 640px) ------------------------------------------------------------ Phones were overheating because the page runs ~48 infinite CSS animations + backdrop-filter on a sticky topnav + animated `filter: blur(40px)` on the hero halo. None of that improved the FIRST impression — it just kept the GPU painting forever after the page had settled. What this file does, on phones only: 01 · turn every infinite animation into a one-shot 02 · drop backdrop-filter on the sticky topnav 03 · hide JS-spawned decorative swarms (fireflies / sparks) 04 · drop animated blur filters whose animation is now dead 05 · release will-change promotions 06 · park the filament-thread + light-registers sweeps 08 · drop text-sheen background-position sweeps The visual feel survives: strike-on-load, halos, sheens all play once on entry and then everything goes quiet. Load LAST in so its !important rules win the cascade. Pair with the boot-time bail in animations.js + the inline firefly spawner so the JS timers don't keep ticking. ============================================================ */ @media (max-width: 640px) { /* 01 · Convert every infinite animation to a one-shot. `animation-iteration-count: 1` overrides the iteration count regardless of whether the original rule used the shorthand `animation: foo 2s infinite`. Finite anims (`forwards`, count: 1) are unaffected. */ *, *::before, *::after { animation-iteration-count: 1 !important; } /* 02 · Kill backdrop-filter on the sticky topnav. backdrop-filter is the most expensive composite on a mobile GPU because it re-blurs everything behind the nav on every scroll frame. Swap for a near-opaque paper bg that reads the same. */ .topnav, .topnav-inner, .m-topnav, .m-topnav-inner, .scarcity-bar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .topnav { background: rgba(244, 236, 218, 0.97) !important; } /* 03 · Hide JS-spawned decorative swarms. Even one-shot, each of these nodes is a composited layer on a phone. The fireflies alone produce 10–14 layers per page-header. */ .__spark.firefly, .__spark.firefly::before, .__spark.firefly::after, .__ph-firefly, .page-header-sparks, .page-header-flash, .__spine-spark, .__hero-firefly, .hero-spark, .hero-spark .spark, #title-sparks, #title-sparks .__spark { display: none !important; } /* 04 · Heavy static blurs whose animation we just killed. A 40px Gaussian blur is still expensive even when static; drop or soften it. */ .hero-title .openssl::after, .__brand-halo, .topnav .brand::after, .page-header-halo { animation: none !important; filter: none !important; opacity: 0.4 !important; } /* 05 · Release will-change promotion. Each promoted layer costs VRAM; with the animation gone, the promotion is just waste. */ .hero-title .word, .hero-title .openssl::after, .__spark.firefly, .__lr-target { will-change: auto !important; } /* 06 · Park always-on flicker pseudos. */ .filament-thread::before, .filament-thread::after { animation: none !important; } /* 07 · Light-registers sweep (added per-paragraph by animations.js). Module bails on mobile via our JS patch, but old class leftovers may linger; hide the ::after. */ .__lr-target::after { display: none !important; } /* 08 · Text-sheen sweeps repaint background-clip:text every frame. One-shot still wipes once on entry which still paints the whole word. Drop them entirely. */ .cfp-banner .meta b, .tm-bind .sentence em, .sp-head h2 em, .trip-head h2 em, .tier-card .tier-name-display em, .opening-keynote .ok-title em.gilt, .opening-keynote .once-h .gilt, .hero-subtitle .city::after, .hero-subtitle .dates::after { animation: none !important; background-position: 50% 0 !important; } /* 09 · Arc-lamp triple stack on the brand mark (breathe + core + orbit). All three are infinite paint loops in the always-visible topnav — the worst kind of waste. */ .topnav .brand .mark, .topnav .brand .mark::before, .topnav .brand .mark::after { animation: none !important; filter: none !important; } } /* prefers-reduced-motion already applies the same intent across the site; we don't need to duplicate it here. */