/* Движение. Правило проекта: базовое состояние = конечное.
   Скрытие включается только классом .motion-ready, который ставит сам js/motion.js
   после всех своих ранних выходов. Не доехал скрипт, отключено движение системой,
   нет IntersectionObserver — страница просто видна целиком. */

:root {
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 560ms;
}

/* ——— Появление секций ——— */
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}
.motion-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

/* ——— Steps: золотая черта прочерчивается ——— */
.motion-ready .step .step__bar {
  transform: scaleX(0);
  transform-origin: left center;
}
.motion-ready .step.is-in .step__bar {
  transform: scaleX(1);
  transition: transform 720ms var(--ease);
  transition-delay: calc(var(--reveal-delay, 0ms) + 160ms);
}

/* ——— Карточки категорий: кадр оживает под курсором ——— */
.cat__media img,
.services__photo img,
.intro__photo > img {
  transition: transform 640ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .cat:hover .cat__media img,
  .services__photo:hover img { transform: scale(1.04); }
}

/* ——— Услуги: строка отзывается на курсор ——— */
.svc { transition: transform 320ms var(--ease); }
.svc__bar { transition: transform 320ms var(--ease), background-color 320ms var(--ease); transform-origin: center; }
.svc__arrow { transition: transform 320ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .svc:hover { transform: translateX(6px); }
  .svc:hover .svc__bar { transform: scaleY(1.12); }
  .svc--active:hover .svc__arrow { transform: translateX(8px); }
}

/* ——— Колесо RAL: медленный оборот объясняет «100+ цветов» ——— */
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .ral__mark--raster img {
    animation: ral-spin 28s linear infinite;
  }
  .motion-ready .ral__mark--raster:hover img { animation-play-state: paused; }
}
@keyframes ral-spin { to { transform: rotate(360deg); } }

/* ——— FAQ: знак поворачивается, ответ проявляется ——— */
.qa__mark { transition: transform 320ms var(--ease), color 320ms var(--ease); }
.qa[open] .qa__mark { transform: rotate(180deg); }
.qa { transition: background-color 320ms var(--ease), border-color 320ms var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .qa[open] .qa__a { animation: qa-in 320ms var(--ease) both; }
}
@keyframes qa-in { from { opacity: 0; transform: translateY(-6px); } }

/* ——— Смета: изменившееся число коротко подсвечивается ——— */
[data-calc] { transition: color 400ms var(--ease); }
[data-calc].is-updating { color: var(--gold-from); }

/* ——— Рубильник ——— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-timeline: auto !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .motion-ready [data-reveal] { opacity: 1; transform: none; }
  .motion-ready .step .step__bar { transform: none; }
}

/* Печать и снятие страницы: движение выключено, всё видно */
@media print {
  .motion-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
  .motion-ready .step .step__bar { transform: none !important; }
}

/* ——— Страницы по механизму ——— */
/* Схема появляется целиком, без сдвига: внутри неё уже идёт собственная
   анимация механизма, и второй источник движения спорил бы с первым. */
.motion-ready .pdiag__frame[data-reveal] { transform: none; }

/* Строки характеристик проявляются по очереди — список читается сверху вниз,
   и порядок появления совпадает с порядком чтения. */
.motion-ready .pspecs--iconic > div[data-reveal] { transform: translateY(14px); }

/* Плитки полотна: кадр оживает под курсором, как в остальных карточках сайта */
.mcard__media img { transition: transform 640ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .mcard:hover .mcard__media img { transform: scale(1.05); }
}
.mcard { transition: border-color 320ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .mcard:hover { border-color: var(--border-gold); }
}