/* ============================================================================ perf.css — адаптивная деградация тяжёлых эффектов. Подключается на всех страницах. Ничего не меняет на мощных ПК. Срабатывает в двух случаях: 1) Системная настройка «уменьшить движение» (prefers-reduced-motion). 2) Класс .perf-lite на — его ставит inline-детектор слабых устройств (мало ядер CPU / мало ОЗУ / режим экономии трафика). Главные источники лагов на слабых GPU: backdrop-filter, filter: blur и бесконечные CSS-анимации. Их и снимаем. ============================================================================ */ /* 1) Уважаем системную настройку «уменьшить движение» — на ВСЕХ устройствах. */ @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; } } /* 2) Режим экономии ресурсов для слабых устройств. */ html.perf-lite *, html.perf-lite *::before, html.perf-lite *::after { /* Размытие фона — убийца №1 производительности на встроенных видеокартах. */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; /* Останавливаем все бесконечные/декоративные анимации и переходы. */ animation: none !important; transition: none !important; /* Освобождаем GPU-память от заранее зарезервированных слоёв. */ will-change: auto !important; } /* Декоративные blur-фильтры (свечения, размытые подложки) — самые дорогие. Снимаем их со всего, КРОМЕ картинок/видео, чтобы не трогать фото-обработку. */ html.perf-lite *:not(img):not(video):not(canvas) { filter: none !important; } /* Многослойные тени тоже нагружают композитор — упрощаем до лёгкой. */ html.perf-lite [class], html.perf-lite [style*="box-shadow"] { box-shadow: 0 1px 2px rgba(0,0,0,0.12) !important; } html.perf-lite { scroll-behavior: auto !important; }