/* ============================================ ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ Элемент с классом .reveal стартует чуть ниже своего места и прозрачным. Когда он входит в зону видимости, скрипт вешает .is-visible — элемент всплывает на место. ============================================ */ /* Прячем только если JS работает: класс .js вешается скриптом в . Без него страница просто видна целиком — при отключённом или упавшем JS контент не пропадёт. */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); /* Подсказка браузеру заранее подготовить слой — движение плавнее */ will-change: opacity, transform; } .js .reveal.is-visible { opacity: 1; transform: none; /* Анимация отыграла — снимаем нагрузку с видеокарты */ will-change: auto; } /* Ступенчатые задержки: соседние карточки появляются одна за другой, а не все разом */ .js .reveal--d1 { transition-delay: 0.09s; } .js .reveal--d2 { transition-delay: 0.18s; } .js .reveal--d3 { transition-delay: 0.27s; } /* Если в системе выключены анимации, показываем всё сразу. Правило из base.css обнуляет длительность, но задержки оно не снимает — убираем их здесь. */ @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } .js .reveal--d1, .js .reveal--d2, .js .reveal--d3 { transition-delay: 0s; } }