/* ═══════════════════════════════════════════════════════════════════════════ ⏱️ ЕДИН РИТЪМ — моторните токени на приложението ═══════════════════════════════════════════════════════════════════════════ Наръчникът за immersive web (§1.1 „една метафора, една светлина, един ритъм" и §53 motion tokens). Измерено в проекта преди тях: cubic-bezier(0.34, 1.56, 0.64, 1) 59 употреби (пружина) cubic-bezier(0.22, 1, 0.36, 1) 26 употреби (плавно спиране) cubic-bezier(0.4, 0, 0.3, 1) 5 употреби токени: НУЛА Тоест системата вече съществуваше — просто беше написана по три различни начина за една и съща крива. Тук е извадена наяве, БЕЗ да се мени. ⚠️ Тези var() се ползват от 92 правила в 11 файла. Ако някой ден се преименуват, правилата стават невалидни и движението изчезва наведнъж. Проверчик: node dev/motion_tokeni.js (казва колко ги ползват). ═══════════════════════════════════════════════════════════════════════════ */ :root { /* криви — точно тези, които проектът вече ползваше */ --bl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --bl-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --bl-ease-in-out: cubic-bezier(0.4, 0, 0.3, 1); /* времена — четирите роли на движението в това приложение */ /* ⚠️ ВРЕМЕНАТА ЗА ИНТЕРФЕЙСА ЖИВЕЯТ В css/anim.css (--bl-t-press/soft/enter) и НЕ се дублират тук. Първата ми версия въведе успоредна система за едно и също нещо — точно бъркотията, срещу която е целият този файл. Тук стоят САМО двете роли, които в проекта наистина липсваха: */ /* 🔴 08.09 — ЕДНА ЧЕСТНОСТ: първите ми стойности тук (480ms и 6s) бяха ИЗМИСЛЕНИ. Живото приложение работи с 350ms за мехура и ~2.5s за пулса, и работи ДОБРЕ. Токенът съществува, за да има ЕДИН ритъм — не за да сменя доказано поведение по мой вкус. Затова стойностите идват от кода, който вече е издържал, а не обратното. ⚠️ И двата бяха дефинирани с НУЛА потребители — тоест системата твърдеше, че има ритъм, който никъде не звучи. Сега звучи. */ --bl-dur-otgovor: 350ms; /* пристигането на ОТГОВОРА (беше вграден в style.css) */ --bl-dur-dish: 2.5s; /* „живо" пулсира — обединява 2.4s и 2.6s */ } /* 🤍 Изключено движение: РИТЪМЪТ СПИРА НА ЕДНО МЯСТО. Дотук това ставаше на 66 отделни правила. Сега всяко, което ползва токен, утихва оттук — а онези, които не ползват, ги хваща общата мрежа по-горе. Двата слоя се допълват. */ html[data-motion='reduce'] { /* заварените от css/anim.css утихват ТУК, на едно място */ --bl-t-press: 0ms; --bl-t-soft: 0ms; --bl-t-enter: 0ms; --bl-dur-otgovor: 0ms; --bl-dur-dish: 0s; } /* ═══════════════════════════════════════════════════════════════════════════ 📶 СЛАБИЯТ ТЕЛЕФОН — украсата олеква, съдържанието НЕ се пипа ═══════════════════════════════════════════════════════════════════════════ Чете отметките, които js/tier.js слага на : data-motion = reduce | full data-quality = low | medium | high ИЗМЕРЕНО ЖИВО ПРЕДИ ТОЗИ ФАЙЛ (само началният екран): 542 анимирани елемента · 162 с will-change · 16 blur филтъра нула capability tiers · data-motion изобщо липсваше Наръчникът за immersive web: „will-change е диагностична оптимизация, не стандартен CSS reset. Не го слагай на body или всички cards — може да увеличи паметта." ⚠️ ГРАНИЦАТА, КОЯТО ТОЗИ ФАЙЛ НЕ ПРЕМИНАВА: нищо тук не крие съдържание, не маха бутон, не сваля контраст и не променя нито един отговор. Майка на слаб телефон вижда СЪЩИТЕ карти, същите флагове и същия текст — само без украсата, която ѝ топли телефона в 3 през нощта. ⚠️ КАКВО НАРОЧНО НЕ Е ТУК, макар да го измерих: · backdrop-filter (~20 правила, 3–12px, в 7 файла). Смаляването му иска токен-рефакторинг във всички тях. Общо правило върху `*` би ДОБАВИЛО филтър на 1900 елемента вместо да смали съществуващите — точно обратното на целта. Отделен, измерен проход. · 4-те интерактивни неща под 44px. Проектът вече има обмислен css/touch.css с поименни решения; общо правило би се били с него. И двете са записани като находки, не поправени на сляпо. ПЪТ НАЗАД: махни реда за css/tier.css от index.html. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1 · СЛАБ ТЕЛЕФОН: will-change слиза от паметта ─────────────────────── will-change държи слой в паметта на GPU за всеки елемент. На телефон с 2 GB това е скъпо, а печалбата е незабележима. Безопасно е да се махне: will-change е ПОДСКАЗКА към браузъра, не поведение — махането ѝ никога не променя какво се вижда, само как браузърът се готви. */ html[data-quality='low'] * { will-change: auto !important; } /* ── 2 · ИЗКЛЮЧЕНО ДВИЖЕНИЕ: украсата спира, отговорът остава ──────────── `prefers-reduced-motion` вече се уважава на 66 места в проекта. Тук е само общата мрежа за онова, което е било пропуснато. ⚠️ НЕ пипа `transition` — преходите показват СЪСТОЯНИЕ (отворено/затворено, натиснато/ненатиснато). Без тях интерфейсът става неразбираем, а това е дефект за достъпност, не пестене. Спират се повтарящите се АНИМАЦИИ. */ html[data-motion='reduce'] * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; will-change: auto !important; } /* поименно за постоянно движещата се украса, която измерих */ html[data-motion='reduce'] .ld-pilot, html[data-motion='reduce'] .ld-pilot-live, html[data-motion='reduce'] .land-hills, html[data-motion='reduce'] .st-cloud, html[data-motion='reduce'] .scrollfly-b { animation: none !important; transform: none !important; } /* ── 3 · ВЛАЧЕНЕТО С ПРЪСТ Е ИЗКЛЮЧЕНИЕТО ──────────────────────────────── Докато човек наистина влачи нещо, will-change върши точно работата, за която е измислен. Класът се слага за момента на влаченето, не завинаги. */ html[data-quality='low'] .bl-vlache, html[data-motion='reduce'] .bl-vlache { will-change: transform !important; } /* ── 4 · 🚨 ПАНИКА НЕ СЕ УКРАСЯВА ───────────────────────────────────────── js/tier.js слага data-alarm на за 30 секунди, когато излезе спешен отговор (закача се за готовото събитие bl:alarm). Жена, която чете „обади се на 112", не бива да гледа подскачащ балон и дишащ фон. Движението в този миг не е топлина, а шум върху най-важното изречение в приложението. ⚠️ ГРАНИЦАТА: спира се САМО повтарящата се украса — поименно, същият списък като при изключено движение. Отговорът СИ ВЛИЗА нормално (иначе майката не вижда, че нещо се е случило), преходите на интерфейса остават, бутонът за 112 работи точно както преди. */ html[data-alarm] .ld-pilot, html[data-alarm] .ld-pilot-live, html[data-alarm] .land-hills, html[data-alarm] .st-cloud, html[data-alarm] .scrollfly-b, /* 🚨 08.09 — И САМИЯТ ОТГОВОР. Когато на екрана излиза „това е за ЛЕКАР, веднага", мехурът няма какво да подскача 350ms. Майката чете, не гледа анимация. Спира се САМО влизането; текстът, бутонът 112 и всичко останало са непокътнати и идват МОМЕНТАЛНО. */ html[data-alarm] .msg-bubble { animation: none !important; } html[data-alarm] { --bl-dur-dish: 0s; /* фонът спира да диша */ }