/* ========================================================================== * w2-reveal.css — хвиля 2, 26.09.2026. Кінцевий стан появи теми. * * Під html.lua-w2.lua-motion появою контенту володіє lua-motion (дочірня тема). * Системи появи теми тоді не стартують у джерела: animation.js, десять * *SequentialReveal у scripts.js, lua-reveal.js дочки, інлайн-скрипти * #lua-faq-anim-js, #lua-lp-anim-js (inc/lp-mobile-anim.php) і lua-fade * (inc/img-lazyload.php). Тому все, що тема ховала «до класу з JS», тут одразу * в кінцевому стані: контент видно без жодного зовнішнього JS (defer, повільна * мережа). lua-motion сам ховає лише те, що на старті нижче екрана. * * Підключається лише під lua_w2_on() (functions.php), одразу після animation.css. * * 1. Прозорість — префіксом html.lua-w2.lua-motion (0,3,1): сильніше за будь-яке * правило теми, що ховає (найсильніше — (0,2,0)). !important не потрібен: * жодне правило, що ховає, його не має. * 2. Зсув — через :where(html.lua-w2.lua-motion, html:not(.lua-w2)): вага дорівнює вазі стартового * стану, перемагає порядком (файл після animation.css). transform розкладки * зі style.css (.testing-content--six .testing-item--7 translateY(-50%)) і * ховер-підйоми (.lp-kase:hover, .lp-type:hover) лишаються — як у стані .visible. * Браузер без :where() (до 2021) пропустить лише блок зсувів: контент видно. * Виняток — розділ 5 (стартовий стан у пізнішому файлі дочки). * * Селектори зсувів — дзеркало animation.css (номери рядків у коментарях). * Вимкнути: add_filter( 'lua_w2', '__return_false' ); * ========================================================================== */ /* ── 1. Прозорість ─────────────────────────────────────────────────────── */ html.lua-w2.lua-motion .fade-in:where(:not(.footer *)), html.lua-w2.lua-motion .fade-in-hero, html.lua-w2.lua-motion .reviews-logo-anim, html.lua-w2.lua-motion .journal-post-reveal, html.lua-w2.lua-motion .stages-item-reveal, html.lua-w2.lua-motion .other-card-reveal, html.lua-w2.lua-motion .get-card-reveal, html.lua-w2.lua-motion .identity-card-reveal, html.lua-w2.lua-motion .need-card-reveal, html.lua-w2.lua-motion .smm-card-reveal, html.lua-w2.lua-motion .specialization-card-reveal, html.lua-w2.lua-motion .more-card-reveal, html.lua-w2.lua-motion .create-item-reveal, html:not(.lua-w2) .fade-in, html:not(.lua-w2) .fade-in-hero, html:not(.lua-w2) .reviews-logo-anim, html:not(.lua-w2) .journal-post-reveal, html:not(.lua-w2) .stages-item-reveal, html:not(.lua-w2) .other-card-reveal, html:not(.lua-w2) .get-card-reveal, html:not(.lua-w2) .identity-card-reveal, html:not(.lua-w2) .need-card-reveal, html:not(.lua-w2) .smm-card-reveal, html:not(.lua-w2) .specialization-card-reveal, html:not(.lua-w2) .more-card-reveal, html:not(.lua-w2) .create-item-reveal { opacity: 1; } /* ── 2. Перший екран ─────────────────────────────────────────────────── heroFadeIn (animation.css:985) і luaHeroRise дочки (lua-page-fixes.css, fill-mode both, пауза до html.lua-hero-go) — CSS-поява першого екрана. Рух першого екрана веде lua-motion після лоадера. */ html.lua-w2.lua-motion .hero .fade-in, html.lua-w2.lua-motion .hero .hero-anim, html.lua-w2.lua-motion .hero__main .fade-in, html.lua-w2.lua-motion .hero__main .hero-anim { animation: none; } /* ── 3. Зсуви появи, усі ширини ───────────────────────────────────────── */ :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .reviews .reviews-logo-anim, /* :87 */ :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .journal .journal-post-reveal, /* :167 */ :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .stages .stages-item-reveal, /* :182 */ :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .other .other-card-reveal, /* :196 */ :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .get .get-card-reveal, /* :210 */ :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .identity .identity-card-reveal, /* :224 */ :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .need .need-card-reveal, /* :251 */ :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .smm .smm-card-reveal, /* :261 */ :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .specialization .specialization-card-reveal, /* :275 */ :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .more .more-card-reveal, /* :289 */ :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .create--v2 .create-item-reveal { /* :303 */ transform: none; } /* ── 4. Зсуви появи, десктоп (animation.css ховає рух від 1024px) ──── */ @media screen and (min-width: 1024px) { :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .swiper-wrapper .fade-in, /* :590 */ :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .fade-in:where(:not(.footer *)), :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .hero--v2 .hero-anim--eyebrow, /* :618 */ :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .hero--v2 .hero-anim--title, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .hero--v2 .hero-anim--card, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .hero--v2 .hero-anim--text, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .hero--v2 .hero-anim--button, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .hero--v2 .hero-anim--partners, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .hero--v2 .hero-anim--media, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .reviews .reviews-anim, /* :651 */ :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .reviews .reviews-anim--2, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .reviews .reviews-anim--3, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .reviews .reviews-anim--4, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .reviews .reviews-anim--5, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .reviews .reviews-platform-anim, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .single_posts .blog-card-anim, /* :682 */ :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .blog_hero .blog-page-anim, /* :691 */ :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .blog_list .blog-page-card-anim, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .faq .faq-anim, /* :702 */ :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .faq .faq-item-anim, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .proposition .fade-in, /* :716 */ :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .propos .fade-in, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .cases_contact .fade-in, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .propos .propos__media--bg.fade-in, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .propos .propos__title.fade-in, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .propos .propos__text.fade-in, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .propos .propos__after.fade-in, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .propos .propos__right.fade-in, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .proposition .proposition__feature.fade-in, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .propos .propos__feature.fade-in, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .identity .identity-anim, /* :748 */ :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .identity .identity-card-reveal, :where(html:not(.lua-w2)) .footer .footer-anim, /* :759, лише без JS */ :where(html:not(.lua-w2)) .footer .fade-in, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .retainers__title.fade-in, /* :913 */ :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .retainers__head-text.fade-in, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .bundles__title.fade-in, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .bundles__head-text.fade-in, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .smm__title.fade-in, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .smm__text.fade-in, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .smm__tags.fade-in, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .smm__addons.fade-in, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .fractional__card.fade-in, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .retainers__grid .price-card.fade-in, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .smm__grid .price-card.fade-in, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .fractional__video.fade-in, /* :928 */ :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .benefit-title.fade-in, /* :963 */ :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .benefit-text.fade-in, :where(html.lua-w2.lua-motion, html:not(.lua-w2)) .benefit-list .benefit-item.fade-in { transform: none; } } /* ── 5. Футер на телефоні (лише без JS) ────────────────────────────── 26.09.2026: з JS появою футера далі керує animation.js (рішення власника — анімації лишаються всі), тут — тільки кінцевий стан без JS. Стартовий стан — у дочці (lua-reveal.css:49, розділ 3), а вона підключається пізніше за цей файл: порядком не перемогти, тому повний префікс (0,4,1). Безпечно: transform розкладки чи ховеру на блоках .footer-anim немає (перевірено по всіх CSS теми й дочки). Прозорість — у розділі 1. */ @media (max-width: 1023px) and (prefers-reduced-motion: no-preference) { html:not(.lua-w2) .footer .footer-anim { transform: none; } } /* ── 6. Сторінка аудиту без JS (26.09.2026, рев'ю W2-1) ────────────── Аркуші .lp-sheet і стовпчики .lp-bar стартують прихованими до JS (landing-ads.css:232). Без JS (нема класу lua-w2) — кінцевий стан. Вимкнути: прибрати цей розділ. */ html:not(.lua-w2) .lp-sheet { opacity: 1; transform: translateY(0); } html:not(.lua-w2) .lp-sheet + .lp-sheet { transform: translateX(2.4rem); } html:not(.lua-w2) .lp-bar i { transform: scaleY(1); }