/** * LUA — послідовна поява (staggered reveal) на мобільному. * * Еталон — «павук-схема» .specialization-card-reveal на /marketyngova-komanda/: * IntersectionObserver ставить .is-visible по одному елементу кожні 120 мс. * Той самий принцип переноситься на футер, список «що буде після заявки» * і довгі переліки в картках тарифів. * * Правило файлу: нуль !important, нуль правок батьківської теми. * Усе живе під (max-width: 1023px) — десктоп має власну систему і не чіпається. */ /* ── 1. Перший екран: анімація не має грати за завісою лоадера ────────── Батьківська тема ховає контент через [data-preload] { visibility: hidden }, але CSS-анімації на visibility:hidden все одно програються. luaHeroRise (lua-page-fixes.css) встигав відпрацювати, поки лоадер ще на екрані, — і користувач бачив уже зібраний перший екран без жодного руху. Тримаємо анімацію на паузі, поки лоадер не поїхав. Класи lua-hero-armed і lua-hero-go ставить інлайн-скрипт у (functions.php). */ @media (max-width: 1023px) { html.lua-hero-armed:not(.lua-hero-go) .hero--v2 .hero-anim { animation-play-state: paused; } } /* ── 2. Стрілка в CTA першого екрана ─────────────────────────────────── Батьківська тема дає усередині .hero__connect_btn окремий пружинний виліт: scale(.45) + зсув, overshoot-крива, затримка .42s, старт — лише коли animation.js додасть .visible, тобто вже після лоадера. Кнопка на той момент давно на місці, тому стрілка «вистрілює» окремо. Рішення власника 17.09: цієї анімації не робимо ніде — ні на мобільному, ні на десктопі. */ @media (prefers-reduced-motion: no-preference) { .hero__connect_btn.fade-in > i, .hero__connect_btn.fade-in.visible > i { opacity: 1; transform: none; transition: none; } } /* ── 3. Футер ──────────────────────────────────────────────── .footer-anim вже має transition-duration і сходинку transition-delay (--1 … --8) на всіх ширинах, а стартовий стан — лише від 1024px. На мобільному рухатися не було чому. Додаємо стартовий стан. Зсув вертикальний, не горизонтальний: -4.4rem убік на вузькому екрані дає горизонтальний скрол. transition-property прописуємо явно — базовий .fade-in віддає в перехід лише opacity, і transform інакше стрибне без анімації. */ @media (max-width: 1023px) and (prefers-reduced-motion: no-preference) { .footer .footer-anim { opacity: 0; transform: translate3d(0, 1.4rem, 0); transition-property: opacity, transform; } .footer .footer-anim.visible { opacity: 1; transform: translate3d(0, 0, 0); } } /* ── 4. Спільний клас для послідовних списків ──────────────────────── Вішає lua-reveal.js тільки на ті списки, які реально спостерігає. Тайминг узятий з .specialization-card-reveal, щоб відчуття було те саме. */ @media (max-width: 1023px) and (prefers-reduced-motion: no-preference) { .lua-rv { opacity: 0; transform: translate3d(0, 1rem, 0); transition: opacity 0.56s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .lua-rv.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } }