/* ==========================================================================
anim.css — VD3 ANIM-FRAMEWORK · new-sst.ru редизайн-волна (2026-09-19)
Единый слой микроанимаций поверх светлой темы.
Палитра волны: navy #0B1F3A · red #E30613 · bg #F5F7FA (переопределяется
токенами --an-* ниже или токенами темы VD1, если она их отдаёт).
ПОДКЛЮЧЕНИЕ (VD6): последним в , ПОСЛЕ cro.css и
header-neon.css (важно для каскада паузы CTA-пульсации при hover).
Все движения — transform/opacity (+box-shadow на hover). см. PERF_NOTES.md.
prefers-reduced-motion: reduce — полное отключение (§15).
========================================================================== */
/* ---------- 0. Токены ---------- */
:root {
--an-red: #E30613;
--an-navy: #0B1F3A;
--an-bg: #F5F7FA;
--an-ease: cubic-bezier(.2, .7, .3, 1);
--an-shadow-card: 0 12px 28px rgba(11, 31, 58, .14), 0 2px 6px rgba(11, 31, 58, .08);
--an-shadow-btn: 0 8px 20px rgba(11, 31, 58, .16);
--an-ring: 0 0 0 4px rgba(227, 6, 19, .22);
--an-offset: 80px; /* scroll-margin-top под sticky-хедер */
--an-skel: #E6EBF2;
}
/* ---------- 1. Фокус-ring (а11и, работает и при reduce) ---------- */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--an-red);
outline-offset: 2px;
border-radius: 6px;
}
/* поля формы: мягкий navy-ring поверх своей обводки */
:where(.v-field input, .v-field textarea, .v-field select):focus-visible {
outline: none;
box-shadow: var(--an-ring), 0 0 0 1px rgba(11, 31, 58, .35);
}
@media (prefers-reduced-motion: no-preference) {
/* ---------- 2. Кнопки: hover-lift / active-scale ---------- */
/* hover: гарантированный lift 2px + тень (тема может перебить — :where) */
:where(.v-btn, .mp-btn, .btn, .mn-cta, .an-btn):hover {
transform: translateY(-2px);
box-shadow: var(--an-shadow-btn);
}
/* active: прижатие — без :where, чтобы выиграть каскад у :hover-правил тем */
.v-btn:active, .mp-btn:active, .btn:active, .mn-cta:active,
.cro-fab__btn:active, .an-btn:active {
transform: translateY(0) scale(.97);
box-shadow: 0 3px 10px rgba(11, 31, 58, .18);
transition-duration: .1s;
}
/* ---------- 3. Ripple (JS: anim.js вешает .an-ripple + span) ---------- */
.an-ripple { position: relative; overflow: hidden; }
.an-ripple__ink {
position: absolute;
border-radius: 50%;
pointer-events: none;
transform: scale(0);
opacity: .55;
will-change: transform, opacity;
animation: an-ripple .6s var(--an-ease) forwards;
}
.an-ripple--navy .an-ripple__ink { background: rgba(11, 31, 58, .22); }
.an-ripple--red .an-ripple__ink { background: rgba(227, 6, 19, .28); }
.an-ripple--light .an-ripple__ink { background: rgba(255, 255, 255, .45); }
/* ---------- 4. CTA: мягкая пульсация тени 2.5s, пауза при hover ---------- */
/* пауза сильнее cro.css-правила «:hover → 1s loop» за счёт порядка файлов */
.v-btn--cta, .mp .mp-btn--primary, .sticky-cta .v-btn--cta,
.mn-cta--desktop, [data-an-pulse] {
animation: an-pulse-shadow 2.5s var(--an-ease) infinite;
}
.v-btn--cta:hover, .v-btn--cta:focus-visible,
.mp .mp-btn--primary:hover, .mp .mp-btn--primary:focus-visible,
.sticky-cta .v-btn--cta:hover,
.mn-cta--desktop:hover, [data-an-pulse]:hover {
animation-play-state: paused;
}
/* ---------- 5. Карточки: hover-lift -4px + тень + рамка; иконки ×1.06 ---------- */
:where(.v-card, .v-hub-card, .mp-card, .mp-service-card, .mp-case,
.mp-step, .mp-why, .mp-lic, .svc-card, .price-card) {
transition: transform .3s var(--an-ease), box-shadow .3s var(--an-ease),
border-color .3s var(--an-ease);
}
:where(.v-card, .v-hub-card, .mp-card, .mp-service-card, .mp-case,
.mp-step, .mp-why, .mp-lic, .svc-card, .price-card):hover {
transform: translateY(-4px);
box-shadow: var(--an-shadow-card);
border-color: rgba(227, 6, 19, .38);
}
:where(.v-card, .v-hub-card, .mp-card, .mp-service-card, .mp-case,
.mp-step, .mp-why, .mp-lic, .svc-card, .price-card):hover
:where(.v-card__icon, .mp-card__icon, .mp-service-card__marker,
.mp-why__icon, .mp-lic__h, .v-hub-card .hub-ico) {
transform: scale(1.06);
}
:where(.v-card__icon, .mp-card__icon, .mp-service-card__marker,
.mp-why__icon, .v-hub-card .hub-ico) {
transition: transform .3s var(--an-ease);
}
/* ---------- 6. Меню: underline-рост слева-направо 200ms ---------- */
/* .mn-link уже имеет scaleX-underline в header-neon.css — НЕ дублируем. */
/* Утилита для VD2-хедера и ссылок .v-nav: */
:where(.an-underline, [data-an-underline], .v-nav__links > a) {
position: relative;
}
:where(.an-underline, [data-an-underline], .v-nav__links > a)::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 2px;
border-radius: 2px;
background: var(--an-red);
transform: scaleX(0);
transform-origin: left center;
transition: transform .2s var(--an-ease);
}
:where(.an-underline, [data-an-underline], .v-nav__links > a):hover::after,
:where(.an-underline, [data-an-underline], .v-nav__links > a)[aria-current="page"]::after {
transform: scaleX(1);
}
/* ---------- 7. Мега-панель: fade + translateY(8→0) + scale(.98→1) ------- */
/* Утилита для VD2 (mn-mega уже анимируется своим header-neon.css). */
.an-pop {
opacity: 0;
transform: translateY(8px) scale(.98);
pointer-events: none;
transition: opacity .22s var(--an-ease), transform .22s var(--an-ease);
}
.an-pop.is-open {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* ---------- 8. Scroll-reveal: [data-an] (тегирует anim.js) ---------- */
html.an-js [data-an] { opacity: 0; }
html.an-js [data-an].an-in {
opacity: 1;
animation: an-fade-up .5s var(--an-ease) both;
animation-delay: var(--an-delay, 0ms);
}
/* после завершения — снимаем animation, чтобы не мешать hover-transform */
html.an-js [data-an].an-done { animation: none; opacity: 1; }
/* ---------- 9. Таблицы: подсветка строки ---------- */
:where(.v-table) td { transition: background-color .18s var(--an-ease); }
.v-table tbody tr:hover td { background: rgba(11, 31, 58, .05); }
/* ---------- 10. FAQ: плавное раскрытие (anim.js) ---------- */
details.an-acc > *:not(summary) { }
.an-acc-body {
overflow: hidden;
transition: height .3s var(--an-ease);
}
details[open].mp-faq__item .mp-faq__a,
details[open][data-an-acc] > *:not(summary) {
animation: an-fade-up .35s var(--an-ease) both;
}
/* ---------- 11. FAB «Задать вопрос»: дыхание + микроподпрыгивание ------ */
.cro-fab.is-on { animation: an-pop-in .5s var(--an-ease); }
.cro-fab.is-on .cro-fab__btn:not(:hover):not(:focus-visible) {
animation: an-breath 3s ease-in-out infinite;
}
/* ---------- 12. Тосты/алерты: slide-in справа ---------- */
:where(.v-form-note, [role="alert"], .an-toast) {
animation: an-slide-right .4s var(--an-ease) both;
}
/* ---------- 13. Скелетоны и картинки ---------- */
.an-skeleton {
position: relative;
overflow: hidden;
background: var(--an-skel);
}
.an-skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
animation: an-shimmer 1.4s infinite;
}
img.an-loading {
background: var(--an-skel);
animation: an-skel-pulse 1.2s ease-in-out infinite;
border-radius: inherit;
}
img.an-loaded { animation: an-fade-in .4s var(--an-ease) both; }
/* ---------- 14. Хедер: тень при скролле (класс вешает anim.js) --------- */
.an-header-shadow { transition: box-shadow .2s var(--an-ease); }
/* ---------- 15а. Плавный скролл (дубль с cro.css — идемпотентно) ------- */
html { scroll-behavior: smooth; }
}
/* Тень хедера — вне motion-media (это состояние, не движение) */
:where(.mn-header, .v-nav, header[data-an-header], .an-header).an-scrolled {
box-shadow: 0 10px 30px rgba(11, 31, 58, .14);
}
/* Отступ якорей под sticky-хедер (80px по умолчанию) */
:where([id]) { scroll-margin-top: var(--an-offset, 80px); }
/* ---------- Кейфреймы ---------- */
@keyframes an-fade-up {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes an-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes an-pulse-shadow {
0%, 100% { box-shadow: 0 6px 20px rgba(227, 6, 19, .28); }
50% { box-shadow: 0 12px 32px rgba(227, 6, 19, .46); }
}
@keyframes an-ripple {
to { transform: scale(1); opacity: 0; }
}
@keyframes an-shimmer {
to { transform: translateX(100%); }
}
@keyframes an-skel-pulse {
0%, 100% { background-color: #E6EBF2; }
50% { background-color: #F1F5FA; }
}
@keyframes an-breath {
0%, 100% { box-shadow: 0 8px 22px rgba(227, 6, 19, .30); }
50% { box-shadow: 0 14px 36px rgba(227, 6, 19, .46); }
}
@keyframes an-pop-in {
0% { opacity: 0; transform: translateY(24px) scale(.92); }
60% { opacity: 1; transform: translateY(-5px) scale(1.02); }
80% { transform: translateY(2px) scale(.99); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes an-slide-right {
from { opacity: 0; transform: translateX(24px); }
to { opacity: 1; transform: translateX(0); }
}
/* ---------- 16. prefers-reduced-motion: reduce — полное отключение ------- */
@media (prefers-reduced-motion: reduce) {
html.an-js [data-an] { opacity: 1 !important; animation: none !important; }
.v-btn--cta, .mp .mp-btn--primary, .sticky-cta .v-btn--cta,
.mn-cta--desktop, [data-an-pulse],
.cro-fab.is-on, .cro-fab.is-on .cro-fab__btn,
.an-ripple__ink, .an-skeleton::after, img.an-loading, img.an-loaded,
:where(.v-form-note, [role="alert"], .an-toast),
details[open].mp-faq__item .mp-faq__a,
details[open][data-an-acc] > *:not(summary) {
animation: none !important;
}
:where(.v-card, .v-hub-card, .mp-card, .mp-service-card, .mp-case,
.mp-step, .mp-why, .mp-lic, .svc-card, .price-card),
:where(.v-btn, .mp-btn, .btn, .mn-cta, .an-btn),
.an-underline, [data-an-underline], .v-nav__links > a,
.an-pop, .an-acc-body, .an-header-shadow,
:where(.v-card__icon, .mp-card__icon, .mp-service-card__marker, .mp-why__icon) {
transition: none !important;
}
:where(.v-card, .v-hub-card, .mp-card, .mp-service-card, .mp-case,
.mp-step, .mp-why, .mp-lic, .svc-card, .price-card):hover,
:where(.v-btn, .mp-btn, .btn, .mn-cta, .an-btn):hover {
transform: none;
}
.an-pop { opacity: 1; transform: none; pointer-events: auto; }
html { scroll-behavior: auto; }
}