/* ========================================================================== АМО — система анимаций (anim.css) Чистый CSS, без библиотек. Фирменный стиль: тёплая пастель, слива, лаванда. JS-движок: assets/js/anim.js (IntersectionObserver, параллакс, аккордеоны). Всё отключается при prefers-reduced-motion (см. конец файла). ========================================================================== */ /* Фирменная кривая плавности и базовые длительности */ :root { --anim-ease: cubic-bezier(0.22, 1, 0.36, 1); --anim-dur: 0.7s; --anim-stagger: 80ms; } /* -------------------------------------------------------------------------- 1. Появление страницы (page fade) -------------------------------------------------------------------------- */ @keyframes anim-page-in { from { opacity: 0; } to { opacity: 1; } } body { animation: anim-page-in 0.4s ease both; } /* -------------------------------------------------------------------------- 2. Хедер: появление сверху при загрузке -------------------------------------------------------------------------- */ @keyframes anim-header-in { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .b-header { animation: anim-header-in 0.6s var(--anim-ease) both; } /* Ссылки меню: анимированное подчёркивание (scaleX) при hover */ .b-header__nav-link { position: relative; } .b-header__nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform 0.35s var(--anim-ease); } .b-header__nav-link:hover::after, .b-header__nav-link:focus-visible::after { transform: scaleX(1); } /* Логотип: лёгкое «дыхание» рукописной рамки при hover */ @keyframes anim-logo-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: 0.8; } } .b-header__logo-link:hover .b-header__logo-frame, .b-header__logo-link:focus-visible .b-header__logo-frame { animation: anim-logo-breathe 1.6s ease-in-out infinite; transform-origin: center; } /* -------------------------------------------------------------------------- 3. Scroll-reveal: секции и стаггер детей Атрибуты расставляет build_pages.py, класс .is-visible — anim.js. -------------------------------------------------------------------------- */ /* Скрытые состояния включаются только когда anim.js загрузился (.anim на ), чтобы при отключённом JS контент не остался невидимым */ .anim [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--anim-dur) var(--anim-ease), transform var(--anim-dur) var(--anim-ease); } .anim [data-reveal].is-visible { opacity: 1; transform: translateY(0); } /* Дети появляются каскадом; задержку ставит anim.js через --anim-delay */ .anim [data-reveal-child] { opacity: 0; transform: translateY(28px); transition: opacity var(--anim-dur) var(--anim-ease), transform var(--anim-dur) var(--anim-ease); transition-delay: var(--anim-delay, 0ms); } .anim .is-visible [data-reveal-child], .anim [data-reveal-child].is-visible { opacity: 1; transform: translateY(0); } /* Возрастные пилюли в philosophy: лёгкий bounce вместо простого подъёма */ @keyframes anim-bounce-in { 0% { opacity: 0; transform: translateY(26px) scale(0.85); } 60% { opacity: 1; transform: translateY(-5px) scale(1.04); } 80% { transform: translateY(2px) scale(0.99); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .anim .is-visible .b-philosophy__age[data-reveal-child] { animation: anim-bounce-in 0.65s var(--anim-ease) both; animation-delay: var(--anim-delay, 0ms); /* Отменяем конфликтующий transition-вариант, пилюля играется keyframes */ transition: none; } /* -------------------------------------------------------------------------- 4. Герой главной: каскадное появление при загрузке Классы .anim-hero-* и inline-задержки ставит anim.js. -------------------------------------------------------------------------- */ @keyframes anim-hero-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .anim-hero-rise { opacity: 0; animation: anim-hero-rise 0.8s var(--anim-ease) forwards; animation-delay: var(--anim-delay, 0ms); } /* Слова заголовка: anim.js оборачивает каждое слово в span.anim-hero-word */ .anim-hero-word { display: inline-block; opacity: 0; animation: anim-hero-rise 0.7s var(--anim-ease) forwards; animation-delay: var(--anim-delay, 0ms); } /* Рамка героя «рисуется»: dashoffset анимирует anim.js через Web Animations, здесь — только мягкое начальное состояние */ .b-hero-main__frame path { will-change: stroke-dashoffset; } /* Фото и веточки в герое: появление + лёгкий поплавок */ @keyframes anim-hero-media-in { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* fill backwards: после появления transform возвращается под контроль курсорного параллакса (anim.js), без «залипшего» fill: both */ .b-hero-main__media { animation: anim-hero-media-in 0.9s var(--anim-ease) 0.25s backwards; } @keyframes anim-sprig-sway { 0%, 100% { rotate: -2deg; } 50% { rotate: 2.5deg; } } .b-hero-main__sprig { transform-origin: bottom center; animation: anim-sprig-sway 7s ease-in-out infinite; } .b-hero-main__sprig--right { animation-delay: -3.5s; animation-duration: 8.5s; } /* Элементы с курсорным параллаксом: трансформ ставит anim.js (lerp) */ [data-cursor-parallax] { will-change: transform; } /* -------------------------------------------------------------------------- 5. Карточки товаров: приподнятие, тень, зум фото (усиливает существующие hover-стили блоков) -------------------------------------------------------------------------- */ .b-bestsellers__card, .b-product-grid__card, .b-similar-products__card, .b-category-tiles__card { transition: transform 0.45s var(--anim-ease), box-shadow 0.45s var(--anim-ease); } .b-bestsellers__card:hover, .b-product-grid__card:hover, .b-similar-products__card:hover, .b-category-tiles__card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(110, 90, 126, 0.14); } /* Плавный зум фото с фирменной кривой */ .b-bestsellers__img, .b-product-grid__img, .b-similar-products__img, .b-category-tiles__img { transition: transform 0.7s var(--anim-ease); } .b-bestsellers__card:hover .b-bestsellers__img, .b-product-grid__card:hover .b-product-grid__img, .b-similar-products__card:hover .b-similar-products__img, .b-category-tiles__card:hover .b-category-tiles__img { transform: scale(1.05); } /* Кнопка «В корзину» выезжает снизу чуть живее */ .b-bestsellers__add, .b-product-grid__add, .b-similar-products__add { transition: transform 0.4s var(--anim-ease), opacity 0.4s var(--anim-ease), background-color var(--transition); } /* -------------------------------------------------------------------------- 6. Сердечко избранного: pop при клике (класс ставит anim.js, логику избранного по-прежнему ведёт app.js) -------------------------------------------------------------------------- */ @keyframes anim-fav-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 70% { transform: scale(0.92); } 100% { transform: scale(1); } } .anim-fav-pop { animation: anim-fav-pop 0.45s var(--anim-ease); } /* Активное сердечко залито сливой (подстраховка к стилям блоков) */ [data-fav-toggle].is-active { color: var(--accent); } /* -------------------------------------------------------------------------- 7. Кнопки: shine у accent, заливка слева у outline, press-эффект -------------------------------------------------------------------------- */ .btn { position: relative; overflow: hidden; transition: transform 0.2s var(--anim-ease), background-color var(--transition), color var(--transition), border-color var(--transition); } /* Нажатие — лёгкое сжатие */ .btn:active { transform: scale(0.97); } /* Shine: блик пробегает по accent-кнопке при hover */ .btn--accent::after { content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 45%; background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%); transform: skewX(-18deg); transition: none; pointer-events: none; } .btn--accent:hover::after { left: 130%; transition: left 0.7s var(--anim-ease); } /* Outline: заливка сливой слева направо */ .btn--outline::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform 0.45s var(--anim-ease); z-index: -1; } /* isolation: заливка (z-index: -1) остаётся внутри кнопки, поверх фона секции */ .btn--outline { isolation: isolate; } .btn--outline:hover, .btn--outline:focus-visible { color: #FFF; border-color: var(--accent); } .btn--outline:hover::before, .btn--outline:focus-visible::before { transform: scaleX(1); } /* -------------------------------------------------------------------------- 8. Аккордеоны (faq, product-hero): поворот иконок. Плавную высоту анимирует anim.js (Web Animations API). -------------------------------------------------------------------------- */ .b-faq__chevron { transition: transform 0.4s var(--anim-ease), margin-top 0.4s var(--anim-ease); } .b-product-hero__accordion-summary::after { transition: transform 0.4s var(--anim-ease); } .b-faq__question, .b-product-hero__accordion-summary { transition: color var(--transition); } /* Во время JS-анимации высоты контент не должен вылезать */ details.anim-accordion-animating .b-faq__answer, details.anim-accordion-animating .b-product-hero__accordion-body { overflow: hidden; } /* -------------------------------------------------------------------------- 9. Drawer корзины и мобильное меню: более мягкая кривая (усиливаем существующие transition, логика — app.js) -------------------------------------------------------------------------- */ .b-cart-drawer__overlay { transition: opacity 0.45s var(--anim-ease); } .b-cart-drawer__panel { transition: transform 0.5s var(--anim-ease); } .b-header__mobile-overlay { transition: opacity 0.4s var(--anim-ease); } .b-header__mobile-panel { transition: transform 0.45s var(--anim-ease); } /* -------------------------------------------------------------------------- 10. Скролл-параллакс: элементы помечает anim.js через [data-drift], трансформ ставится из JS по rAF (см. anim.js) -------------------------------------------------------------------------- */ [data-drift] { will-change: transform; } /* -------------------------------------------------------------------------- 11. prefers-reduced-motion: ВСЕ анимации отключены -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } /* Reveal-элементы должны быть видимы сразу */ [data-reveal], [data-reveal-child] { opacity: 1 !important; transform: none !important; } .anim-hero-rise, .anim-hero-word { opacity: 1 !important; animation: none !important; } }