/* Снабжение строек: слой движения лендинга /snab (к snab-motion.js). Здесь — только вставленные скриптом
   элементы и микро-взаимодействия. Ничего из содержимого страницы статически не прячем: стартовые состояния
   анимаций ставит JS. Подключается в head раньше snab-site.css — поэтому селекторы чуть специфичнее. */

/* ---------- A. полоса прогресса прокрутки ---------- */
.mo-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 3px; background: var(--yellow);
               transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* ---------- B. пример КП: скан-линия ---------- */
.mo-scan-host { position: relative; }
.mo-scan { position: absolute; left: -8px; right: -8px; top: 0; height: 2px; background: var(--yellow); opacity: 0;
           box-shadow: 0 0 10px 2px rgba(245,197,24,.55); pointer-events: none; }

/* ---------- C. «Путь заявки»: линия по шагам (только десктоп, класс ставит JS) ---------- */
ol.mo-path { position: relative; }
ol.mo-path > li::before { display: none; }
.mo-path-track { position: absolute; left: 16px; top: 15px; width: 75%; height: 3px; background: var(--line); pointer-events: none; }
.mo-path-fill { display: block; width: 100%; height: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: 0 50%; }
ol.mo-path .path-n { transition: background-color .25s cubic-bezier(.23,1,.32,1), color .25s cubic-bezier(.23,1,.32,1); }
ol.mo-path .path-n.mo-on { background: var(--yellow); color: var(--on-yellow); }

/* ---------- D. ползунок «Сумма закупки» (на тёмном фоне) ---------- */
.money .mo-sum { margin: 0 0 30px; padding-bottom: 22px; border-bottom: 1px solid var(--line-d); }
.mo-sum-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 10px; }
.money .mo-sum label { margin: 0; font: 500 12px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--steel-d); }
.mo-sum-v { font: 600 34px/1.05 var(--f-head); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.money .mo-sum-r { display: block; width: 100%; height: 28px; margin: 0; padding: 0; background: transparent; border: 0;
                   accent-color: var(--yellow); cursor: pointer; }
.money .mo-sum-r:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; border-radius: 4px; }
.mo-sum-scale { display: flex; justify-content: space-between; margin-top: 4px; font: 400 11.5px/1.3 var(--f-mono); color: var(--steel-d); }
@media (min-width: 720px) { .mo-sum-v { font-size: 44px; } }

/* ---------- E. «Как это устроено»: точки, кольцо робота, галочка объекта ---------- */
.mo-flow .flow-bot, .mo-flow .flow-dst { position: relative; }
.mo-dot { position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow);
          box-shadow: 0 0 0 3px rgba(245,197,24,.28); opacity: 0; pointer-events: none; }
.mo-ring { position: absolute; inset: -1px; border: 2px solid var(--yellow); border-radius: inherit; opacity: 0; pointer-events: none; }
.mo-check { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 26px; height: 26px;
            border-radius: 50%; background: var(--yellow); opacity: 0; pointer-events: none; }
.mo-check svg { width: 16px; height: 16px; fill: none; stroke: var(--on-yellow); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mo-flow .flow-src li { transition: background-color .3s cubic-bezier(.23,1,.32,1), border-color .3s cubic-bezier(.23,1,.32,1); }
.mo-flow .flow-src li.mo-on { background: var(--yellow-soft); border-color: var(--yellow); }

/* ---------- F. поиск по каталогу ---------- */
.mo-find { margin: 0 0 16px; }
.mo-find .mo-find-i { display: block; width: 100%; max-width: 520px; min-height: 48px; padding: 12px 16px; font: 400 16px/1.3 var(--f-text);
                      color: var(--text); background: var(--card); border: 1px solid var(--field); border-radius: var(--radius); }
.mo-find .mo-find-i:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.mo-find-empty { margin: 14px 0 0; color: var(--muted); }
.mo-find-empty a { color: var(--ink); text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tiles.mo-flipping > li { transition: none; }
@media (hover: hover) {
  .tiles .tile { transition: border-color .15s, box-shadow .2s cubic-bezier(.23,1,.32,1), transform .2s cubic-bezier(.23,1,.32,1); }
  .tiles .tile:hover { box-shadow: 0 12px 24px -14px rgba(18,18,20,.4); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tiles .tile:hover { transform: translateY(-3px); }
}

/* ---------- G. надзаголовок: квадрат-акцент вытягивается (переменную ставит JS, без JS — 1) ---------- */
.mo-eb::before { transform: scaleX(var(--mo-eb, 1)); transform-origin: 0 50%; }

/* ---------- H. нажатие кнопок (липкую кнопку не трогаем — у неё свой transform «спрятать») ---------- */
@media (prefers-reduced-motion: no-preference) {
  body .btn:not(.sticky-cta) { transition: background-color .15s, border-color .15s, color .15s, transform .16s cubic-bezier(.23,1,.32,1); }
  body .btn:not(.sticky-cta):active, body .linkbtn:active, body .seg button:active { transform: scale(.97); }
  body .linkbtn, body .seg button { transition: transform .16s cubic-bezier(.23,1,.32,1); }
}

/* ---------- печать: всё видно, ничего лишнего ---------- */
@media print {
  .mo-progress, .mo-scan, .mo-dot, .mo-ring, .mo-check, .mo-find, .mo-find-empty, .mo-sum { display: none !important; }
  .mo-anim { opacity: 1 !important; transform: none !important; }
  .mo-eb::before { transform: none !important; }
  .tiles > li { display: block !important; opacity: 1 !important; transform: none !important; }
}