/* ========================= LOAD ANIMATIONS — HERO (LCP-safe) работает только когда и включается ========================= */ /* ❗️НЕ прячем текст (h1/lead/cta/meta) — иначе LCP будет ждать */ html.js:not(.is-loaded) .hero .hero-bg, html.js:not(.is-loaded) .hero .hero-card{ opacity: 0; filter: blur(14px); } /* фон/карточка можно двигать */ html.js:not(.is-loaded) .hero .hero-bg{ transform: translateY(-14px) scale(1.03); filter: blur(18px); } html.js:not(.is-loaded) .hero .hero-card{ transform: translateX(56px) translateY(12px) scale(.985); filter: blur(16px); } /* delays оставляем только для того, что анимируем */ .hero .hero-bg { --d: 0ms; } .hero .hero-card { --d: 320ms; } html.js.is-loaded .hero .hero-bg{ animation: heroBgIn 1.2s cubic-bezier(.16,1,.22,1) var(--d) both; } html.js.is-loaded .hero .hero-card{ animation: heroCardIn 1.0s cubic-bezier(.16,1,.22,1) var(--d) both; } @keyframes heroCardIn{ 0%{ opacity: 0; transform: translateX(56px) translateY(12px) scale(.985); filter: blur(16px); } 75%{ opacity: 1; filter: blur(0); } 100%{ opacity: 1; transform: translateX(0) translateY(0) scale(1); filter: blur(0); } } @keyframes heroBgIn{ 0%{ opacity: 0; transform: translateY(-14px) scale(1.03); filter: blur(18px); } 100%{ opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @media (prefers-reduced-motion: reduce){ html.js:not(.is-loaded) .hero *{ opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; } }