/* motion.css — вся анимация появления на странице. Один приём: opacity 0→1 плюс единственное смещение вверх на --as-reveal-shift. Одна кривая, три длительности, одна лестница задержек. Второго механизма нет — пять разных анимаций от пяти разных блоков и есть главный признак шаблона. */ [data-reveal] { opacity: 0; transform: translate3d(0, var(--as-reveal-shift), 0); transition: opacity var(--as-dur-base) var(--as-ease), transform var(--as-dur-base) var(--as-ease); transition-delay: var(--as-reveal-delay, 0ms); will-change: opacity, transform; } /* Полотно въезжает медленнее — оно крупнее и весит больше */ [data-reveal="bleed"] { transition-duration: var(--as-dur-slow); } /* Класс вешает js/motion.js. Без JS элемент остаётся видимым — см. no-js ниже. */ [data-reveal].is-in { opacity: 1; transform: translate3d(0, 0, 0); will-change: auto; } /* Лестница задержек: шаг один, значений пять. Шестого нет. */ [data-reveal-delay="1"] { --as-reveal-delay: calc(var(--as-delay-step) * 1); } [data-reveal-delay="2"] { --as-reveal-delay: calc(var(--as-delay-step) * 2); } [data-reveal-delay="3"] { --as-reveal-delay: calc(var(--as-delay-step) * 3); } [data-reveal-delay="4"] { --as-reveal-delay: calc(var(--as-delay-step) * 4); } [data-reveal-delay="5"] { --as-reveal-delay: calc(var(--as-delay-step) * 5); } /* Пока движок не поднялся, содержимое не прячется. Класс as-motion ставит инлайн-скрипт в — синхронно, до первой отрисовки, иначе содержимое успевает показаться и тут же спрятаться. Он же снимает класс на событии load, если js/motion.js не отметился атрибутом data-motion-ready: прятать элементы имеет право только тот, кто умеет их показать обратно. Скрипт не доехал или упал — страница просто читается без появления. */ html:not(.as-motion) [data-reveal] { opacity: 1; transform: none; } /* Укачивание — не мелкий шрифт. Движение выключается целиком, остаётся только проявление прозрачности (R12.1). */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal], [data-reveal="bleed"] { transform: none; transition: opacity var(--as-dur-fast) linear; transition-delay: 0ms; } [data-reveal].is-in { transform: none; } *, *::before, *::after { animation-duration: var(--as-dur-fast) !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }