/* ============================================================ Motion Правило: контент видим по умолчанию. Прячет его только JS и только когда движение разрешено (см. js/motion.js). ============================================================ */ /* Ни одно из этих правил не действует, пока JS не поставит .js-reveal на . Без JS, на скрытой вкладке и в headless-рендере страница отдаётся полностью видимой. */ .js-reveal [data-reveal] { opacity: 0; } .js-reveal [data-reveal-line] { opacity: 0; } .js-reveal .arc-item { opacity: 0; } /* Лента видео едет через scrollLeft в js/app.js, а не CSS-анимацией: иначе трансформ отнимает у пользователя свайп и трекпад. */ /* ---------- Кольца за телефоном: волна расходится бесконечно ---------- Отрицательные задержки на соседних кольцах (components.css) стартуют цикл уже развёрнутым — иначе первые 5 секунд сцена стоит пустая. */ @keyframes ring-ripple { 0% { transform: scale(1); opacity: 0; } 9% { opacity: .55; } 72% { opacity: .14; } 100% { transform: scale(2.9); opacity: 0; } } .stage-rings span { animation: ring-ripple 7s linear infinite; } /* ---------- Пульс точки в чипе ---------- */ @keyframes chip-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .45; } } .chip-dot { animation: chip-pulse 2.4s var(--ease-out) infinite; } /* ---------- FAQ ---------- */ .faq-answer { animation: faq-open 320ms var(--ease-out); } @keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* ============================================================ prefers-reduced-motion Lenis не инициализируется, скраб-параллакс не вешается, reveal-классы не добавляются (всё это в js/motion.js). Здесь глушим то, что живёт в CSS. ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Волна колец глушится — но сцена не должна опустеть, поэтому раскладываем их статичными концентрическими окружностями. */ .stage-rings span { animation: none !important; opacity: .4 !important; } .stage-rings span:nth-child(1) { transform: scale(1) !important; } .stage-rings span:nth-child(2) { transform: scale(1.5) !important; } .stage-rings span:nth-child(3) { transform: scale(2) !important; } .stage-rings span:nth-child(4) { transform: scale(2.5) !important; } /* Автопрокрутка ленты не запускается (проверка в js/app.js), но листать руками по-прежнему можно — поэтому возвращаем видимый скроллбар. */ .marquee { -webkit-mask-image: none; mask-image: none; scrollbar-width: thin; } .marquee::-webkit-scrollbar { display: block; height: 8px; } /* Страховка: если JS всё же успел спрятать контент — вернуть. */ .js-reveal [data-reveal], .js-reveal [data-reveal-line], .js-reveal .arc-item { opacity: 1 !important; transform: none !important; } }