/* ============================================================
   motion.css — появление блоков, счётчики, акцентные детали
   ------------------------------------------------------------
   Идея: сайт — измерительный инструмент. Движение короткое и «приборное»:
   значения набираются, панели встают на своё место, ничего не прыгает и не пружинит.
   Длительности 220–520 мс, смещения 10–16 px, никаких вращений на 360° и параллаксов.

   Разметку НЕ трогаем: motion.js сам расставляет data-reveal по списку селекторов.
   Поэтому правила ниже действуют только при body.motion — класс ставит сам скрипт.
   Если JS не выполнился, ни один элемент не будет скрыт.
   ============================================================ */

/* ---------- базовое появление ---------- */
body.motion [data-reveal]{
  opacity:0;
  transform:translate3d(0, var(--rv-y, 14px), 0) scale(var(--rv-s, 1));
  transition:opacity .42s cubic-bezier(.22,.61,.36,1), transform .52s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--rv-d, 0ms);
  will-change:opacity, transform;
}
body.motion [data-reveal].rv-in{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
/* после проигрывания снимаем will-change, чтобы не держать слои в памяти */
body.motion [data-reveal].rv-done{ will-change:auto; transition-delay:0ms; }

/* варианты направления — назначаются скриптом по типу блока */
body.motion [data-reveal="left"]  { transform:translate3d(-18px,0,0); }
body.motion [data-reveal="right"] { transform:translate3d(18px,0,0); }
body.motion [data-reveal="depth"] { --rv-y:10px; --rv-s:.965; }   /* «из глубины вперёд» */
body.motion [data-reveal="rise"]  { --rv-y:16px; }

/* ---------- оркестровка первого экрана (без прокрутки) ---------- */
body.motion.home-min .hx-kicker,
body.motion.home-min .hx-h1,
body.motion.home-min .hx-sub,
body.motion.home-min .hx-form,
body.motion.home-min .hx-trust,
body.motion.home-min .top-link{
  animation:rvHero .62s cubic-bezier(.22,.61,.36,1) both;
}
body.motion.home-min .hx-kicker{ animation-delay:.04s; }
body.motion.home-min .hx-h1    { animation-delay:.10s; }
body.motion.home-min .hx-sub   { animation-delay:.18s; }
body.motion.home-min .hx-form  { animation-delay:.26s; }
body.motion.home-min .hx-trust { animation-delay:.34s; }
body.motion.home-min .top-link { animation-delay:.42s; }
@keyframes rvHero{
  from{ opacity:0; transform:translate3d(0,18px,0); }
  to  { opacity:1; transform:translate3d(0,0,0); }
}

/* заголовок страницы на внутренних страницах — тот же приём, короче */
body.motion:not(.home-min) .pageTitle{
  animation:rvHero .5s cubic-bezier(.22,.61,.36,1) both; animation-delay:.05s;
}

/* ---------- счётчики ---------- */
/* Цифра фиксированной ширины: при наборе значения строка не «дышит» */
.hx-stat .n, [data-count]{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* ---------- акцентные детали ---------- */
/* Значения статистики — от чернильного к сигнальному цвету: единственное место
   на главной, где цвет работает как «данные», а не как украшение. */
body.motion .hx-stat .n,
body.sp-site .hx-stat .n{
  background:linear-gradient(180deg, var(--ink) 38%, var(--link) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--ink);
}

/* Тонкая акцентная черта под заголовками разделов */
body.sp-site .hx-sec h2,
body.sp-site .category_heading{ position:relative; }
body.sp-site .hx-sec h2::after,
body.sp-site .category_heading::after{
  content:""; display:block; width:0; height:2px; margin:14px auto 0; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--link), transparent);
  transition:width .6s cubic-bezier(.22,.61,.36,1) .12s;
}
body.motion .hx-sec.rv-in h2::after,
body.motion .category_heading.rv-in::after{ width:112px; }
body:not(.motion) .hx-sec h2::after,
body:not(.motion) .category_heading::after{ width:112px; }

/* Карточки инструментов: иконка чуть «подаётся вперёд» при наведении на карточку */
body.sp-site .thumbnail .seotoolico{ transition:background .22s ease, color .22s ease, transform .28s cubic-bezier(.22,.61,.36,1); }
body.sp-site .thumbnail:hover .seotoolico{ transform:translateY(-2px) scale(1.04); }

/* Плитки на главной: стрелка выезжает, рамка подсвечивается сигнальным цветом */
body.home-min .hx-tool{ transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
body.home-min .hx-tool-go{ transition:transform .22s cubic-bezier(.22,.61,.36,1), color .18s ease; }
body.home-min .hx-tool:hover{ border-color:var(--link) !important; }

/* Кнопки: короткий отклик на нажатие — ощущение физической клавиши */
body.sp-site .btn,
body.sp-site .dash2-btn,
body.home-min .hx-cta .btn-green{ transition:background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .18s ease; }
body.sp-site .btn:active,
body.sp-site .dash2-btn:active{ transform:translateY(1px); }

/* Поле анализа на главной: при фокусе рамка становится акцентной с мягким ореолом */
body.home-min .hx-form .input-group.review{ transition:border-color .2s ease, box-shadow .25s ease; }
body.home-min .hx-form .input-group.review:focus-within{
  border-color:var(--link) !important;
  box-shadow:0 10px 34px rgba(11,16,32,.10), 0 0 0 4px var(--focus-ring);
}

/* Строки таблиц отчёта и карточки: мягкая подсветка при наведении */
body.sp-site .table > tbody > tr{ transition:background .16s ease; }
body.sp-site .table-hover > tbody > tr:hover{ background:var(--surface-2); }

/* Сноска-подсказка «прибор считает» — используется в блоках, которые ждут данных */
.rv-pulse{ position:relative; }
.rv-pulse::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--surface-2), transparent);
  background-size:200% 100%; animation:rvSweep 1.5s linear infinite; opacity:.55;
}
@keyframes rvSweep{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

/* ---------- уважение к системной настройке ---------- */
@media (prefers-reduced-motion: reduce){
  body.motion [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  body.motion.home-min .hx-kicker,
  body.motion.home-min .hx-h1,
  body.motion.home-min .hx-sub,
  body.motion.home-min .hx-form,
  body.motion.home-min .hx-trust,
  body.motion.home-min .top-link,
  body.motion:not(.home-min) .pageTitle{ animation:none !important; }
  body.sp-site .hx-sec h2::after,
  body.sp-site .category_heading::after{ width:112px; transition:none; }
  .rv-pulse::after{ animation:none; }
}