/* ============================================================================ * Уровни движения: во что превращаются фон и курсор на слабом железе. * * На стоит один из классов — dl-motion-full / dl-motion-lite / * dl-motion-min. Его ставит ранний скрипт в (см. _early_boot в * backend/main.py) ещё до первой отрисовки, а патч уровней движения может * понизить уровень позже, если замер реального FPS оказался низким. * * full — сильная машина: всё как задумано дизайном, ничего не трогаем. * lite — слабый ПК или ноутбук: картинка та же по смыслу, но убрано то, что * заставляет браузер ПЕРЕРИСОВЫВАТЬ пиксели каждый кадр. * min — reduced-motion или экономия трафика: фон замирает совсем. * * Правило отбора простое. Дёшево анимировать transform и opacity: их считает * композитор, слой уже растрирован. Дорого анимировать filter, box-shadow, * background-position и stroke-dashoffset: каждый кадр браузер заново рисует * пиксели, причём на центральном процессоре. Ещё дороже, когда сверху лежит * mix-blend-mode — он запрещает слою композиться независимо, и весь стек * пересобирается целиком. * * Почему здесь так много !important. В dl-desktop-chat.css есть блок, который * НАСИЛЬНО возвращает все фоновые слои и их анимации на больших экранах — * он появился как лечение от мобильных правил, которые срабатывали не там. * Те правила написаны через !important, поэтому перебить их можно только * своим !important. Специфичность у нас одинаковая, а этот файл в * _PATCH_STYLES стоит последним, значит при равных условиях выигрывает он. * * Почему класс уровня написан дважды — html.dl-motion-lite.dl-motion-lite. * Это приём для специфичности. Правила в dl-desktop-chat.css выглядят как * `html.dl-desktop .bg-fx .a1{animation:… !important}` — это один тип и три * класса. Одиночный `html.dl-motion-lite .bg-fx .a1` даёт ровно столько же, и * спор решался бы порядком подключения файлов, то есть держался бы на честном * слове. Повтор класса поднимает вес на один класс и делает исход однозначным * независимо от порядка в _PATCH_STYLES. * * Существующий класс dl-lowfx (dl-fix.css) не подходит для нашей задачи: * dl-fix.js ставит его только при ОТСУТСТВИИ точного указателя, то есть * фактически лишь на сенсорных устройствах, а dl-desktop-chat.js на десктопе * его ещё и снимает. Слабый настольный ПК с обычной мышью под него никогда не * попадал — ровно та дыра, которую закрывают уровни движения. * ========================================================================= */ /* ───────────────────────────────────────────────────────────────────────────── * ВСЕ УРОВНИ: фон под открытым конструктором не нужен никому. * .editor — это position:fixed;inset:0 с непрозрачным фоном, то есть он * полностью закрывает .bg-fx. Анимации при этом продолжали крутиться: четыре * aurora, SVG-«ток», звёзды, комета, скан-линия и шум рисовались в никуда * ровно в тот момент, когда процессор нужен генерации и превью. * display:none — единственное, что действительно останавливает CSS-анимации. * ──────────────────────────────────────────────────────────────────────────── */ body:has(.editor.on) .bg-fx{display:none!important} /* Вкладка не на виду — фон замирает. Класс ставит патч уровней движения. */ html.dl-motion-hold.dl-motion-hold .bg-fx, html.dl-motion-hold.dl-motion-hold .bg-fx *{animation-play-state:paused!important} /* ───────────────────────────────────────────────────────────────────────────── * LITE — слабый ПК и ноутбук. * ──────────────────────────────────────────────────────────────────────────── */ /* Aurora. mix-blend-mode:screen на чёрном фоне почти равен обычному наложению белого свечения, но лишает слой права композиться отдельно: пока пятно едет, пересобирается весь стек .bg-fx. Убираем режим наложения и немного поднимаем прозрачность, чтобы яркость осталась прежней. Заодно переводим траектории на flat-варианты — без scale, чтобы растр слоя переиспользовался. */ html.dl-motion-lite.dl-motion-lite .bg-fx .aurora{mix-blend-mode:normal!important;opacity:.62!important} html.dl-motion-lite.dl-motion-lite .bg-fx .a1{animation-name:drift1Flat,auroraBreathe!important} html.dl-motion-lite.dl-motion-lite .bg-fx .a2{animation-name:drift2Flat,auroraBreathe!important} html.dl-motion-lite.dl-motion-lite .bg-fx .a3{animation-name:drift3Flat,auroraBreathe!important} html.dl-motion-lite.dl-motion-lite .bg-fx .a4{animation-name:drift1Flat,auroraBreathe!important} /* Halo: пульсация только по прозрачности, без scale. */ html.dl-motion-lite.dl-motion-lite .bg-fx .halo{animation-name:haloFade!important} @keyframes haloFade{0%,100%{opacity:.7}50%{opacity:1}} /* SVG-«ток». stroke-dashoffset и так перерисовывает линию каждый кадр, а два drop-shadow поверх означают две гауссовы размывки на кадр по всей площади слоя 1406×729. Сияние отдаём градиенту обводки — он уже белый в середине. */ html.dl-motion-lite.dl-motion-lite .bg-fx .current-grid{mix-blend-mode:normal!important;opacity:.6!important} html.dl-motion-lite.dl-motion-lite .bg-fx .current-grid .charge{filter:none!important;stroke-width:1.6} html.dl-motion-lite.dl-motion-lite .bg-fx .current-grid .spark{filter:none!important} /* Звёзды: количество режет скрипт страницы (38 → 14), здесь снимаем свечение — box-shadow на каждой из них это отдельная размывка при каждой перерисовке. */ html.dl-motion-lite.dl-motion-lite .bg-fx .stars .st{box-shadow:none!important;background:rgba(240,243,255,.98)} /* Комета: тонкая полоска, но drop-shadow пересчитывается всю дорогу полёта. */ html.dl-motion-lite.dl-motion-lite .bg-fx .comets i{filter:none!important} /* Шум и скан-линия — чистая косметика поверх всего экрана. Шум вдобавок смешивается режимом overlay, то есть заставляет пересобирать весь стек. */ html.dl-motion-lite.dl-motion-lite .bg-fx .noise, html.dl-motion-lite.dl-motion-lite .bg-fx .scanline{display:none!important} /* Бесконечные «дыхания» и «блики». Все они анимируют filter, box-shadow или background-position — самые дорогие для перерисовки свойства. Останавливаем анимацию, но оставляем сам градиент и тень: текст по-прежнему хромированный, просто блик по нему больше не бегает. Наведение и клик не трогаем — они живут доли секунды и двигают transform. */ /* Полный список «вечных» украшений страницы. Каждое из них анимирует background-position (бегущий блик по хромированному тексту), filter: drop-shadow (пульсирующее свечение) или box-shadow — то есть заставляет браузер перерисовывать пиксели каждый кадр, и не по разу: на странице таких анимаций больше сорока, и они не прекращаются никогда. Останавливаем анимацию, но НЕ убираем сами градиенты и тени: текст остаётся хромированным и со свечением, просто блик по нему больше не бегает. Наведение и клик не трогаем: они живут доли секунды и двигают transform. */ html.dl-motion-lite.dl-motion-lite .bn-amp, html.dl-motion-lite.dl-motion-lite .hero h1 .grad, html.dl-motion-lite.dl-motion-lite .silver-glow, html.dl-motion-lite.dl-motion-lite .sec-title, html.dl-motion-lite.dl-motion-lite .eyebrow, html.dl-motion-lite.dl-motion-lite .pp, html.dl-motion-lite.dl-motion-lite .t, html.dl-motion-lite.dl-motion-lite .tt, html.dl-motion-lite.dl-motion-lite .foot-mark, html.dl-motion-lite.dl-motion-lite .footer::before, html.dl-motion-lite.dl-motion-lite #scrollBar, html.dl-motion-lite.dl-motion-lite .badge::after, html.dl-motion-lite.dl-motion-lite .prompt-box, html.dl-motion-lite.dl-motion-lite .btn-solid, html.dl-motion-lite.dl-motion-lite .btn-grad, html.dl-motion-lite.dl-motion-lite .plan .pick.g, html.dl-motion-lite.dl-motion-lite .plan.hot::before, html.dl-motion-lite.dl-motion-lite .send, html.dl-motion-lite.dl-motion-lite .feat:not(:hover) .fi, html.dl-motion-lite.dl-motion-lite .step .n, html.dl-motion-lite.dl-motion-lite .brand .logo, html.dl-motion-lite.dl-motion-lite .brand .logo .shine::before, html.dl-motion-lite.dl-motion-lite .brand .logo .trace .tr-run{animation:none!important} /* backdrop-filter — самая дорогая вещь на слабой встроенной графике: браузер копирует пиксели под элементом и размывает их. У шапки он ещё и sticky, поэтому пересчитывается при каждом кадре прокрутки. Радиус меньше — размывка дешевле, а визуально почти не отличить. */ html.dl-motion-lite.dl-motion-lite .nav{backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important} /* ───────────────────────────────────────────────────────────────────────────── * MIN — reduced-motion или включённая экономия данных: фон стоит. * ──────────────────────────────────────────────────────────────────────────── */ html.dl-motion-min.dl-motion-min .bg-fx .current-grid, html.dl-motion-min.dl-motion-min .bg-fx .comets, html.dl-motion-min.dl-motion-min .bg-fx .scanline, html.dl-motion-min.dl-motion-min .bg-fx .stars, html.dl-motion-min.dl-motion-min .bg-fx .noise{display:none!important} html.dl-motion-min.dl-motion-min .bg-fx .aurora{mix-blend-mode:normal!important;opacity:.55!important;animation:none!important} html.dl-motion-min.dl-motion-min .bg-fx .halo, html.dl-motion-min.dl-motion-min .bg-fx .grid{animation:none!important} /* Параллакса на этом уровне нет, поэтому подсказка браузеру держать слои в памяти видеокарты только тратит эту память. */ html.dl-motion-min.dl-motion-min .bg-fx .grid, html.dl-motion-min.dl-motion-min .bg-fx .stars, html.dl-motion-min.dl-motion-min .bg-fx .current-grid, html.dl-motion-min.dl-motion-min .bg-fx .comets{will-change:auto!important} html.dl-motion-min.dl-motion-min .bn-amp, html.dl-motion-min.dl-motion-min .hero h1 .grad, html.dl-motion-min.dl-motion-min .silver-glow, html.dl-motion-min.dl-motion-min .sec-title, html.dl-motion-min.dl-motion-min .eyebrow, html.dl-motion-min.dl-motion-min .pp, html.dl-motion-min.dl-motion-min .t, html.dl-motion-min.dl-motion-min .tt, html.dl-motion-min.dl-motion-min .foot-mark, html.dl-motion-min.dl-motion-min .footer::before, html.dl-motion-min.dl-motion-min #scrollBar, html.dl-motion-min.dl-motion-min .badge::after, html.dl-motion-min.dl-motion-min .prompt-box, html.dl-motion-min.dl-motion-min .btn-solid, html.dl-motion-min.dl-motion-min .btn-grad, html.dl-motion-min.dl-motion-min .plan .pick.g, html.dl-motion-min.dl-motion-min .plan.hot::before, html.dl-motion-min.dl-motion-min .send, html.dl-motion-min.dl-motion-min .feat:not(:hover) .fi, html.dl-motion-min.dl-motion-min .step .n, html.dl-motion-min.dl-motion-min .brand .logo, html.dl-motion-min.dl-motion-min .brand .logo .shine::before, html.dl-motion-min.dl-motion-min .brand .logo .trace .tr-run{animation:none!important} html.dl-motion-min.dl-motion-min .nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#07070a} /* Курсор на min стоит ровно под мышью (движок не запускает кадров), а его косметические слои не создаются вовсе. */ html.dl-motion-min.dl-motion-min #cursorGlow, html.dl-motion-min.dl-motion-min .cursor-trail, html.dl-motion-min.dl-motion-min .click-ripple{display:none!important} /* Галерея шаблонов — около сотни карточек, и почти все они далеко ниже экрана. Пока превью не загрузилось, в каждой крутится спиннер; плюс у каждой свои слои, тени и градиенты. content-visibility:auto разрешает браузеру вообще не обслуживать карточку, которой нет на экране: ни стилей, ни раскладки, ни анимаций. contain-intrinsic-size обязателен — иначе высота страницы и полоса прокрутки будут прыгать при пролистывании. */ html.dl-motion-lite.dl-motion-lite .gallery .card, html.dl-motion-min.dl-motion-min .gallery .card{content-visibility:auto;contain-intrinsic-size:auto 288px}