/* ============================================================ BeauTips — Живость и премиальность Блок 1 · Большая ставка. Подключать ПОСЛЕ tokens.css. Мягкие микроанимации появления, stagger, плавные переходы. Всё уважает prefers-reduced-motion. Классы-утилиты добавляются к элементам по желанию — аддитивно. ============================================================ */ /* ---------------- Keyframes ---------------- */ @keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ui-fade-in-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes ui-fade-in-down { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } } @keyframes ui-scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes ui-pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* ---------------- Утилиты появления ---------------- */ .animate-fade { animation: ui-fade-in var(--transition-slow) both; } .animate-fade-up { animation: ui-fade-in-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) both; } .animate-fade-down { animation: ui-fade-in-down 0.5s cubic-bezier(0.4, 0, 0.2, 1) both; } .animate-scale-in { animation: ui-scale-in 0.45s cubic-bezier(0.4, 0, 0.2, 1) both; } .animate-pulse { animation: ui-pulse-soft 1.6s ease-in-out infinite; } /* Задержка старта — для последовательного «проявления» */ .animate-delay-1 { animation-delay: 0.06s; } .animate-delay-2 { animation-delay: 0.12s; } .animate-delay-3 { animation-delay: 0.18s; } .animate-delay-4 { animation-delay: 0.24s; } .animate-delay-5 { animation-delay: 0.30s; } .animate-delay-6 { animation-delay: 0.36s; } /* ---------------- Stagger для списков/сеток ---------------- Повесить .stagger на контейнер — прямые дети появляются каскадом. Работает до 12 элементов. */ .stagger > * { animation: ui-fade-in-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) both; } .stagger > *:nth-child(1) { animation-delay: 0.04s; } .stagger > *:nth-child(2) { animation-delay: 0.10s; } .stagger > *:nth-child(3) { animation-delay: 0.16s; } .stagger > *:nth-child(4) { animation-delay: 0.22s; } .stagger > *:nth-child(5) { animation-delay: 0.28s; } .stagger > *:nth-child(6) { animation-delay: 0.34s; } .stagger > *:nth-child(7) { animation-delay: 0.40s; } .stagger > *:nth-child(8) { animation-delay: 0.46s; } .stagger > *:nth-child(9) { animation-delay: 0.52s; } .stagger > *:nth-child(10) { animation-delay: 0.58s; } .stagger > *:nth-child(11) { animation-delay: 0.64s; } .stagger > *:nth-child(12) { animation-delay: 0.70s; } /* ---------------- Reveal on scroll ---------------- Скрытое стартовое состояние применяется ТОЛЬКО когда работает JS (ux-enhance.js добавляет класс .js на ). Без JS контент виден всегда — так он никогда не «пропадёт». Наблюдатель IntersectionObserver добавляет .is-visible при попадании в вьюпорт. */ html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); will-change: opacity, transform; } html.js .reveal.is-visible { opacity: 1; transform: none; } /* ---------------- Мягкий ховер-лифт ---------------- */ .hoverable { transition: transform var(--transition), box-shadow var(--transition); } .hoverable:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } /* На тач-устройствах нет настоящего hover — состояние может «залипать» после тапа (палец поднялся, а :hover ещё активен). Отключаем ховер-лифт там, где устройство не сообщает о поддержке hover. */ @media (hover: none) { .hoverable:hover { transform: none; box-shadow: none; } } /* ---------------- Уважение к «меньше движения» ---------------- */ @media (prefers-reduced-motion: reduce) { .animate-fade, .animate-fade-up, .animate-fade-down, .animate-scale-in, .animate-pulse, .stagger > * { animation: none !important; } html.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .hoverable:hover { transform: none !important; box-shadow: none !important; } }