/* ===== АНИМАЦИИ ПОЯВЛЕНИЯ ГЛАВНОЙ СТРАНИЦЫ ===== Включаются классом .anim на (инлайн-скрипт в начале body). Без JS страница отображается сразу — ничего не скрыто навсегда. */ @keyframes homeFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } @keyframes homeFadeDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } } /* ── Герой: «Адвокат Чесалина Ю.А.» — буквы проявляются из дымки ── */ @keyframes heroChar { to { opacity: 1; transform: none; filter: blur(0); } } .hero-split .hero-ch { display: inline-block; opacity: 0; transform: translateY(0.45em); filter: blur(12px); animation: heroChar 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: calc(0.2s + var(--i) * 0.05s); will-change: transform, filter; } @keyframes heroPhoto { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } } html.anim .ConMenu { animation: homeFadeDown 0.8s ease 0.1s both; } html.anim .Zagalovok p { animation: homeFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.25s both; } html.anim .Conbtn2 { animation: homeFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.45s both; } html.anim .PhotoOne img { animation: heroPhoto 1.6s ease 0.35s both; } /* ── Секции: всплытие при попадании в кадр ── */ html.anim .rv { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } html.anim .rv.in { opacity: 1; transform: none; } /* ── Подписи: как буквы имени — поднимаются снизу из дымки ── */ html.anim .sig { opacity: 0; transform: translateY(26px); filter: blur(10px); transition: opacity 0.7s ease 0.15s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s, filter 0.9s ease 0.15s; will-change: transform, filter; } html.anim .sig-wrap.in .sig { opacity: 1; transform: none; filter: blur(0); } /* ── Уважение к «уменьшить движение» ── */ @media (prefers-reduced-motion: reduce) { html.anim .ConMenu, html.anim .Zagalovok p, html.anim .Conbtn2, html.anim .PhotoOne img, .hero-split .hero-ch { animation: none; opacity: 1; transform: none; filter: none; } html.anim .rv, html.anim .sig { opacity: 1; transform: none; filter: none; transition: none; } }