/* ============================================================ Ultima Checker — слой движения (motion layer) Токены живут в base.css: --ease-out, --ease-in-out, --d-press, --d-ui, --d-enter, --d-reveal. Фолбэки в var() — на случай загрузки файла в отрыве от base.css. Анимируем только transform и opacity. ============================================================ */ /* --- 1. Scroll reveal -------------------------------------------------- Скрытое состояние навешивает ТОЛЬКО скрипт: класс .js-reveal на . Без JS (и при prefers-reduced-motion) страница видима целиком. */ .js-reveal [data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity var(--d-reveal, 420ms) var(--ease-out, cubic-bezier(.23, 1, .32, 1)), transform var(--d-reveal, 420ms) var(--ease-out, cubic-bezier(.23, 1, .32, 1)); will-change: opacity, transform; } .js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; will-change: auto; } /* --- 2. Навбар: хеирлайн + тень появляются при скролле ----------------- Меняется одна опасити на псевдоэлементе — ни layout, ни лишнего пейнта. .nav sticky => уже позиционирован, absolute внутри цепляется к нему. */ .nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1px; background: var(--line, #242a36); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity var(--d-ui, 180ms) var(--ease-out, cubic-bezier(.23, 1, .32, 1)); } .nav.is-scrolled::after { opacity: 1; } /* --- 3. Отклик на нажатие --------------------------------------------- Кнопка обязана отвечать на палец/мышь мгновенно. */ .btn, button { transition: transform var(--d-press, 120ms) var(--ease-out, cubic-bezier(.23, 1, .32, 1)); } .btn:active, button:active { transform: scale(.97); } /* --- 4. Якоря: отступ под липкую шапку -------------------------------- --nav-h проставляет motion.js по факту измерения шапки. */ html { scroll-padding-top: calc(var(--nav-h, 62px) + 12px); } /* --- 5. prefers-reduced-motion: движение выключено полностью ---------- Остаётся мгновенное появление. Дублируем JS-ветку, чтобы состояние не залипло, даже если класс js-reveal уже успел проставиться. */ @media (prefers-reduced-motion: reduce) { /* :root добавлен намеренно — перебиваем html{scroll-behavior:smooth} из base.css независимо от порядка подключения файлов */ html:root { scroll-behavior: auto; } .js-reveal [data-reveal], [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto; } .nav::after { transition: none; } .btn, button { transition: none; } .btn:active, button:active { transform: none; } }