/* Единые правила движения калькулятора (23.10.2026): одни длительности и кривые на всех видах работ.
   Подключается в конце <head> на calc.php и страницах calculator*.php; JS-часть - assets/js/ui-components.js
   («таблетка» переключателей, общая длительность autoAnimate, x-count для итогов).
   Префикс html - чтобы правила перекрывали стили страниц независимо от порядка подключения. */
:root{
  --m-fast:.18s;    /* цвет, наведение, нажатие */
  --m-base:.32s;    /* переключатели, «таблетка», списки */
  --m-slow:.45s;    /* схема стенда, доли состава заказа */
  --m-ease:cubic-bezier(.2,.8,.2,1);   /* быстрый старт, мягкая посадка */
  --m-spring:var(--m-ease);             /* без поддержки linear() - просто мягкая кривая */
}
/* пружина: жёсткость 170, демпфирование 20 - перелёт 2 %, без «желе» */
@supports (transition-timing-function: linear(0, 1)){
  :root{
    --m-spring:linear(0, 0.0287, 0.1005, 0.1975, 0.3063, 0.4172, 0.5235, 0.6209, 0.7072, 0.7812, 0.843, 0.8932, 0.9328, 0.9632, 0.9857, 1.0017, 1.0123, 1.0189, 1.0223, 1.0234, 1.0229, 1.0213, 1.0191, 1.0165, 1.0139, 1.0114, 1.0091, 1.0071, 1);
  }
}

/* кнопки, чипы, размеры, вкладки видов - одна скорость отклика */
html .chip, html .size-btn, html .segment-btn, html .stepper button, html .btn,
html .add-slot, html .kind-switch button, html .dd-btn, html .pay-copy{
  transition-duration:var(--m-fast);
  transition-timing-function:var(--m-ease);
}

/* «таблетка»: белая подложка под выбранной кнопкой переезжает к новой.
   Координаты ставит ui-components.js (--pill-*), класс pill-ready - после первой расстановки */
html .segment-ctrl{ position:relative; }
html .segment-ctrl::before{
  content:""; position:absolute; top:0; left:0; z-index:0; pointer-events:none;
  width:var(--pill-w,0); height:var(--pill-h,0);
  transform:translate(var(--pill-x,0), var(--pill-y,0));
  opacity:var(--pill-on,0);
  background:#fff; border-radius:.8rem; box-shadow:0 1px 3px rgba(0,0,0,.1);
}
html .pill-ready::before{
  transition:transform var(--m-base) var(--m-spring), width var(--m-base) var(--m-spring),
             height var(--m-base) var(--m-ease), opacity var(--m-fast) ease;
}
html .segment-ctrl > *{ position:relative; z-index:1; }
html .pill-ready > button[aria-pressed="true"]{ background:transparent; box-shadow:none; }

/* схема стенда: полотно тянется, карманы переезжают с лёгкой пружиной */
html .stand-svg rect{
  transition:x var(--m-slow) var(--m-spring), y var(--m-slow) var(--m-spring),
             width var(--m-slow) var(--m-spring), height var(--m-slow) var(--m-spring),
             opacity var(--m-base) ease, stroke-width var(--m-base) var(--m-ease), stroke var(--m-base) ease;
}

/* состав заказа: доли видов перетекают */
html .mix-bar span{ transition:flex-grow var(--m-slow) var(--m-ease); }

/* выключенные анимации в системе - без движения */
@media (prefers-reduced-motion: reduce){
  html *, html *::before, html *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}