/* STARTAPIX — слой движения. Та же физика, что в Creonix ID:
   анимируются только transform и opacity, единый ease, всё глушится
   при prefers-reduced-motion. Цвета и размеры — только из TOKENS.css. */

:root {
  /* фирменное «мягкое торможение» — как в Creonix ID */
  --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --motion-fast: 180ms;
  --motion-mid: 320ms;
  --motion-slow: 520ms;
  /* свечение кнопки: тень строится из акцентного тинта */
  --motion-glow: 0 12px 30px -12px var(--color-accent-tint-25);
}

html { scroll-behavior: smooth; }

/* ---------- Появление страницы ---------- */
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
body { animation: page-in var(--motion-mid) var(--motion-ease) both; }

/* ---------- Кнопки: подъём + свечение ---------- */
.btn {
  transition: transform var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease),
              background var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
.btn:not(:disabled):not(.btn--disabled):hover { transform: translateY(-1px); }
.btn--primary:not(:disabled):hover { box-shadow: var(--motion-glow); }
.btn:not(:disabled):not(.btn--disabled):active { transform: translateY(0) scale(.985); box-shadow: none; }

/* ---------- Карточки: подъём при наведении ---------- */
.card,
.project-card,
.qa-item,
.accordion__item {
  transition: transform var(--motion-mid) var(--motion-ease),
              border-color var(--motion-mid) var(--motion-ease),
              background var(--motion-mid) var(--motion-ease),
              box-shadow var(--motion-mid) var(--motion-ease);
}
.project-card:hover,
.accordion__item:hover { transform: translateY(-3px); }
.project-card:hover { box-shadow: var(--motion-glow); }
/* панели-контейнеры не «прыгают»: поднимаются только карточки-объекты */
.card--large:hover, .filters:hover, .modal:hover, .chat:hover, .table:hover { transform: none; }

/* ---------- Пункты меню, вкладки, чипы ---------- */
.nav-item, .tabs__item, .chip, .steps-bar__item, .mobile-menu__item, .fav-btn, .tabbar__item {
  transition: transform var(--motion-fast) var(--motion-ease),
              background var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease);
}
.nav-item:hover, .mobile-menu__item:hover { transform: translateX(2px); }
.chip:hover, .steps-bar__item:hover { transform: translateY(-1px); }
.fav-btn:hover { transform: scale(1.15); }
.table__row--clickable { transition: background var(--motion-fast) var(--motion-ease); }

/* ---------- Поля ввода ---------- */
.input, .textarea, .select, .dropzone {
  transition: border-color var(--motion-fast) var(--motion-ease),
              background var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease);
}
.input:focus, .textarea:focus, .select:focus { box-shadow: 0 0 0 3px var(--color-accent-tint-10); }

/* ---------- Модальные окна ---------- */
.modal-overlay { opacity: 0; transition: opacity var(--motion-mid) var(--motion-ease); }
.modal-overlay .modal {
  transform: translateY(14px) scale(.98);
  transition: transform var(--motion-mid) var(--motion-ease);
}
.modal-overlay.is-open { opacity: 1; }
.modal-overlay.is-open .modal { transform: translateY(0) scale(1); }

/* ---------- Мобильное меню и шторка фильтров ---------- */
.mobile-menu { opacity: 0; transform: translateY(-8px); transition: opacity var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); }
.mobile-menu.is-open { opacity: 1; transform: none; }
@media (max-width: 1024px) {
  .filters--open { animation: sheet-up var(--motion-mid) var(--motion-ease) both; }
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.filters-backdrop { opacity: 0; transition: opacity var(--motion-fast) var(--motion-ease); }
.filters-backdrop.is-open { opacity: 1; }

/* ---------- Переключение вкладок и шагов мастера ---------- */
@keyframes step-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
[data-tab-panel].is-switching { animation: step-in var(--motion-mid) var(--motion-ease); }
[data-state].is-switching { animation: fade-up var(--motion-mid) var(--motion-ease); }

/* ---------- Аккордеон FAQ: плавное раскрытие ---------- */
.accordion__sign { transition: transform var(--motion-mid) var(--motion-ease); }
.accordion__body-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--motion-mid) var(--motion-ease);
}
.accordion__item--open .accordion__body-wrap { grid-template-rows: 1fr; }
.accordion__body-wrap > .accordion__body { overflow: hidden; min-height: 0; }

/* ---------- Появление блоков при прокрутке ----------
   Прячем только когда движение реально управляется скриптом (html.js-motion).
   Без JS или при сбое наблюдателя контент остаётся видимым. */
.js-motion .reveal { opacity: 0; transform: translateY(18px); }
.js-motion .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--motion-slow) var(--motion-ease), transform var(--motion-slow) var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

/* ---------- Прогресс-бары: заливка «набегает» ---------- */
.progress__fill {
  transform-origin: left center;
  transition: transform var(--motion-slow) var(--motion-ease);
}
.progress__fill.is-filling { transform: scaleX(0); }

/* ---------- Плашки-счётчики и бейджи ---------- */
.counter, .badge--verified, .status { transition: transform var(--motion-fast) var(--motion-ease); }
.nav-item:hover .counter { transform: scale(1.06); }

/* ---------- Логотип ---------- */
.logo__mark { transition: transform var(--motion-mid) var(--motion-ease), box-shadow var(--motion-mid) var(--motion-ease); }
.logo:hover .logo__mark { transform: rotate(-8deg) scale(1.06); box-shadow: var(--motion-glow); }

/* ---------- Уважение к системной настройке ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}