/* ==========================================================================
   Движение и графика.
   Одна грамматика: кривая cubic-bezier(.16,1,.3,1), каскад 0/90/180/270 мс.
   ========================================================================== */

:root{
  --ease:cubic-bezier(.16,1,.3,1);
  --d-fast:.22s;
  --d-mid:.42s;
  --d-slow:.72s;
}

/* ---------- Бегущая строка поверхностей ---------- */
.tick{background:var(--steel-2);border-block:1px solid var(--steel-line);
  overflow:hidden;padding:13px 0;user-select:none}
.tick__row{display:flex;width:max-content;animation:tickrun 34s linear infinite}
.tick__set{display:flex;align-items:center;gap:26px;padding-right:26px;flex:none}
.tick__set span{color:#B5B1A8;font-weight:700;font-size:14.5px;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap}
.tick__set i{width:5px;height:5px;border-radius:50%;background:var(--ochre);flex:none}
@keyframes tickrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick:hover .tick__row{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.tick__row{animation:none}}

/* ---------- Два числа в масштабе ---------- */
.sec--scale{background-color:var(--paper);padding-block:clamp(44px,6vw,76px)}
.scale{display:grid;gap:clamp(26px,4vw,52px)}
@media (min-width:820px){.scale{grid-template-columns:1fr 1fr}}
.scale__c{margin:0}
.scale__t{font-size:clamp(21px,2.6vw,26px);font-weight:900;letter-spacing:-.025em;line-height:1.1}
.scale__svg{width:100%;height:auto;margin-top:18px;display:block;overflow:visible}
.scale__lbl{fill:var(--paper-ink-2);font-size:12px;font-weight:500;letter-spacing:.02em}
.scale__num{fill:var(--paper-ink-2);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.scale__num--on{fill:var(--ink)}
.scale__bar--muted{fill:rgba(20,21,23,.14)}
.scale__bar--on{fill:var(--ochre)}
.scale__axis{stroke:rgba(20,21,23,.18);stroke-width:1.5}
.scale__range{fill:var(--ochre);opacity:.92}
.scale__tickline{stroke:var(--ink);stroke-width:2}
.scale__d{margin-top:16px;font-size:15.5px;line-height:1.6;color:var(--paper-ink-2);max-width:44ch}

/* Полосы вырастают, когда блок входит в кадр */
.scale__bar,.scale__range{transform-origin:left center;transform:scaleX(0)}
.in .scale__bar,.in .scale__range{transform:scaleX(1);transition:transform var(--d-slow) var(--ease)}
.in .scale__bar--on{transition-delay:.16s}
@media (prefers-reduced-motion:reduce){
  .scale__bar,.scale__range{transform:none}
  .in .scale__bar,.in .scale__range{transition:none}
}

/* ---------- Сравниватель «до / после» ---------- */
.ba__stage{display:flex;flex-direction:column;align-items:center;gap:12px}
.ba__slider{position:relative;width:min(100%,420px);aspect-ratio:1;border-radius:50%;
  overflow:hidden;background:#FFFCF6;box-shadow:0 0 0 1px rgba(20,21,23,.14),var(--shadow-drop);
  touch-action:pan-y;cursor:ew-resize}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;
  -webkit-user-drag:none}
.ba__clip{position:absolute;inset:0;width:50%;overflow:hidden}
.ba__clip .ba__img{width:auto;height:100%;aspect-ratio:1;max-width:none}
.ba__line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--paper);
  transform:translateX(-1px);pointer-events:none;box-shadow:0 0 0 1px rgba(20,21,23,.25)}
.ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:var(--paper);display:grid;place-items:center;
  box-shadow:0 6px 16px -4px rgba(20,21,23,.5),0 0 0 1px rgba(20,21,23,.18);
  transition:transform var(--d-fast) var(--ease)}
.ba__slider:hover .ba__grip,.ba__slider.drag .ba__grip{transform:translate(-50%,-50%) scale(1.08)}
.ba__grip svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.ba__legend{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:min(100%,420px)}
.ba__tag{font-size:11.5px;font-weight:900;letter-spacing:.09em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;
  background:rgba(20,21,23,.82);color:var(--paper);white-space:nowrap}
.ba__tag--r{background:var(--ochre);color:var(--ink)}
.ba__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba__slider:has(.ba__range:focus-visible){outline:3px solid var(--ochre);outline-offset:4px}
.ba__hint{font-size:13px;color:var(--paper-ink-2);font-weight:500;text-align:center}

/* ---------- Каскадное появление ---------- */
.rise{opacity:0;transform:translateY(18px);filter:blur(6px)}
.rise.in{opacity:1;transform:none;filter:blur(0);
  transition:opacity var(--d-slow) var(--ease),transform var(--d-slow) var(--ease),
             filter var(--d-slow) var(--ease)}
.stg>*{opacity:0;transform:translateY(14px)}
.stg.in>*{opacity:1;transform:none;
  transition:opacity var(--d-mid) var(--ease),transform var(--d-mid) var(--ease)}
.stg.in>*:nth-child(1){transition-delay:0ms}
.stg.in>*:nth-child(2){transition-delay:90ms}
.stg.in>*:nth-child(3){transition-delay:180ms}
.stg.in>*:nth-child(4){transition-delay:270ms}
.stg.in>*:nth-child(5){transition-delay:360ms}
.stg.in>*:nth-child(6){transition-delay:450ms}
.stg.in>*:nth-child(7){transition-delay:520ms}
.stg.in>*:nth-child(8){transition-delay:580ms}
.stg.in>*:nth-child(n+9){transition-delay:640ms}
@media (prefers-reduced-motion:reduce){
  .rise,.stg>*{opacity:1;transform:none;filter:none}
  .rise.in,.stg.in>*{transition:none}
}

/* Каскад первого экрана */
.hero__left>*{animation:heroUp .78s var(--ease) both}
.hero__left>*:nth-child(1){animation-delay:.02s}
.hero__left>*:nth-child(2){animation-delay:.10s}
.hero__left>*:nth-child(3){animation-delay:.18s}
.hero__left>*:nth-child(4){animation-delay:.26s}
.hero__left>*:nth-child(5){animation-delay:.34s}
.hero__board{animation:boardIn .9s var(--ease) both;animation-delay:.08s}
@keyframes heroUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes boardIn{from{opacity:0;transform:translateY(20px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero__left>*,.hero__board{animation:none}
}

/* ---------- Шапка при прокрутке ---------- */
.hdr{transition:box-shadow var(--d-mid) var(--ease),background-color var(--d-mid) var(--ease)}
.hdr.scrolled{background-color:rgba(25,26,28,.9);backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
/* Высоту шапки не анимируем: transition на height даёт перерасчёт раскладки
   на каждом кадре прокрутки. Меняются только фон, размытие и тень. */

/* Счётчик корзины подпрыгивает при добавлении */
@keyframes bump{0%{transform:scale(1)}38%{transform:scale(1.32)}100%{transform:scale(1)}}
.hdr__cart-n.bump{animation:bump .42s var(--ease)}
@media (prefers-reduced-motion:reduce){.hdr__cart-n.bump{animation:none}}

/* Строки таблицы проявляются по очереди */
.cmp tbody tr{opacity:0;transform:translateY(8px)}
.cmp.in tbody tr{opacity:1;transform:none;
  transition:opacity var(--d-mid) var(--ease),transform var(--d-mid) var(--ease)}
.cmp.in tbody tr:nth-child(1){transition-delay:60ms}
.cmp.in tbody tr:nth-child(2){transition-delay:120ms}
.cmp.in tbody tr:nth-child(3){transition-delay:180ms}
.cmp.in tbody tr:nth-child(4){transition-delay:240ms}
.cmp.in tbody tr:nth-child(5){transition-delay:300ms}
.cmp.in tbody tr:nth-child(6){transition-delay:360ms}
.cmp.in tbody tr:nth-child(7){transition-delay:420ms}
@media (prefers-reduced-motion:reduce){
  .cmp tbody tr{opacity:1;transform:none}
  .cmp.in tbody tr{transition:none}
}

/* Мелкая моторика */
.rv,.cr,.use,.q{transition:transform var(--d-fast) var(--ease),
  box-shadow var(--d-fast) var(--ease),background-color var(--d-fast) var(--ease),
  border-color var(--d-fast) var(--ease)}
.rv:hover{transform:translateY(-2px);box-shadow:0 12px 28px -14px rgba(20,21,23,.4)}
.q summary{transition:background-color var(--d-fast) var(--ease)}
.q summary:hover{background-color:rgba(20,21,23,.04)}
.gal figure{transition:box-shadow var(--d-mid) var(--ease)}
.gal figure:hover{box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}

/* В финальном блоке кнопки стоят рядом, главная не растягивается на всю строку */
.fin__b .btn--primary{flex:0 0 auto}

/* Области нажатия вторичных ссылок — не меньше 40 пикселей по высоте */
.hdr__logo{padding-block:12px}
.hero__rate a{display:inline-block;padding-block:10px}
.rv__proofwrap summary{padding-block:10px}
.ft a{display:inline-block;padding-block:10px}
.hdr__tel{padding-block:10px}