/* ========================================================= Поява елементів при скролі. Початковий стан застосовується лише коли є .phm-js на . Клас ставить інлайновий скрипт у і НЕ ставить, якщо в системі увімкнено «зменшити рух» — тоді нічого не ховається й не анімується. ========================================================= */ .phm-js [data-phm-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--phm-ease-out), transform 0.7s var(--phm-ease-out); } /* Варіант без зсуву — для великих зображень, щоб не «стрибало» */ .phm-js [data-phm-reveal="fade"] { transform: none; } /* Дрібніший зсув для елементів усередині щільних сіток */ .phm-js [data-phm-reveal="soft"] { transform: translateY(10px); } .phm-js [data-phm-reveal].is-revealed { opacity: 1; transform: none; } /* * У редакторі Elementor нічого не ховаємо: клієнтка має бачити блоки * одразу, а не чекати на спрацювання спостерігача в айфреймі. */ .elementor-editor-active [data-phm-reveal], .elementor-editor-preview [data-phm-reveal] { opacity: 1 !important; transform: none !important; } /* Подвійна страховка на випадок, якщо .phm-js усе-таки з'явився */ @media (prefers-reduced-motion: reduce) { .phm-js [data-phm-reveal] { opacity: 1; transform: none; transition: none; } }