/* Базовые motion primitives. По умолчанию элементы видимы. Скрытие для reveal включается только когда на есть .js */ .reveal { opacity: 1; transform: none; } html.js .reveal { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); will-change: opacity, transform; } html.js .reveal--left { transform: translate3d(-20px, 0, 0); } html.js .reveal--right { transform: translate3d(20px, 0, 0); } html.js .reveal--scale { transform: scale(0.98); } html.js .reveal.is-visible { opacity: 1; transform: none; } .reveal--delay-1 { transition-delay: 0.08s; } .reveal--delay-2 { transition-delay: 0.16s; } .reveal--delay-3 { transition-delay: 0.24s; } .reveal--delay-4 { transition-delay: 0.32s; } .hover-lift { transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); } .hover-fade { transition: opacity var(--transition-base), color var(--transition-base), background-color var(--transition-base); } .motion-float { animation: float-y 6s var(--ease-in-out) infinite; } .arrow-shift { transition: transform var(--transition-base); } a:hover .arrow-shift, button:hover .arrow-shift, .btn:hover .arrow-shift { transform: translateX(2px); } @keyframes float-y { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -6px, 0); } } @keyframes fade-up-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } } @media (hover: hover) and (pointer: fine) { .hover-lift:hover { transform: translateY(-2px); } } @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; } html.js .reveal { opacity: 1 !important; transform: none !important; will-change: auto !important; } }