/* * animations.css — анимации и переходы лендинга. * * Здесь описаны: * - начальные/целевые состояния элементов с классом .reveal (появление при * скролле, добавляется класс .is-visible из js/animations.js); * - keyframes для hero (intro-shine CTA, мягкая пульсация свечения, плавающие * бейджи активов); * - блок @media (prefers-reduced-motion: reduce), который полностью отключает * движение и оставляет только мгновенные/opacity-состояния. * * Принцип: «медленно, тяжело, дорого», не больше одного крупного эффекта на * экран, на мобильных — меньше движения. */ /* ---------- Появление при скролле ---------- * * Начальное «скрытое» состояние применяется ТОЛЬКО когда доступен JavaScript * (на добавлен класс .js инлайн-скриптом из ). Без JS контент * виден сразу — это защищает от пустой страницы при отключённом/упавшем JS и * корректно индексируется. Задержка stagger берётся из переменной --reveal-i. */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--fb-dur-reveal) var(--fb-ease-out), transform var(--fb-dur-reveal) var(--fb-ease-out); transition-delay: calc(var(--reveal-i, 0) * 90ms); will-change: opacity, transform; } .js .reveal.is-visible { opacity: 1; transform: none; } /* ---------- Hero: свечение и продукт ---------- */ .hero__glow { animation: fbGlowPulse 6s var(--fb-ease) infinite; } @keyframes fbGlowPulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } /* Лёгкое «парение» бейджей активов в орбите. */ .hero__orbit .badge-pill { animation: fbFloat 7s var(--fb-ease) infinite; } .hero__orbit .badge-pill:nth-child(2) { animation-delay: 1.2s; } .hero__orbit .badge-pill:nth-child(3) { animation-delay: 2.4s; } .hero__orbit .badge-pill:nth-child(4) { animation-delay: 3.6s; } @keyframes fbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* Intro-shine на primary CTA — однократный пробег блика после загрузки. */ .btn--primary.is-intro::after { animation: fbIntroShine 1.1s var(--fb-ease) 0.4s 1; } @keyframes fbIntroShine { from { left: -120%; } to { left: 130%; } } /* Появление продукта в hero при загрузке (scale 0.96 -> 1). */ .hero__bottle { animation: fbBottleIn 1s var(--fb-ease-out) both; } @keyframes fbBottleIn { from { opacity: 0; transform: scale(0.96) translateY(10px); } to { opacity: 1; transform: none; } } /* ---------- prefers-reduced-motion: отключаем движение ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .js .reveal { opacity: 1 !important; transform: none !important; } .timeline__progress { transform: scaleX(1) !important; } .hero__glow, .hero__orbit .badge-pill, .hero__bottle { animation: none !important; } }