/* ── Движение ──
   Три скорости: быстрая для цвета и нажатий, средняя для появления панелей, медленная для раскрытия и роста полос.
   Одна кривая — с быстрым стартом и мягким торможением. */
:root {
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .15s ease;
  --t-press: .1s ease;
  --t-pop: .18s;
  --t-enter: .35s;
  --t-slow: .28s var(--ease-out);
  --t-grow: .7s;
  --t-theme: .25s ease;
  --row-hover: color-mix(in srgb, var(--surface) 96.5%, var(--ink));
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes popOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fillIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes toastIn { from { opacity: 0; transform: translate(var(--tx), 10px); } to { opacity: 1; transform: translate(var(--tx), 0); } }
@keyframes toastOut { from { opacity: 1; transform: translate(var(--tx), 0); } to { opacity: 0; transform: translate(var(--tx), 6px); } }

/* смена темы: поверхности перекрашиваются плавно, а не скачком */
body, .panel, .card, .kpi, .tile, .seg, .theme-seg, .search-field, .tabs, .drop-panel, .tooltip, .modal, table.t th, table.t td.first, .pill, .banner, .verdict, .meter, .hbar .track, .leader .bar, .heat .c { transition-property: background-color, color, border-color, box-shadow; transition-duration: var(--t-theme); }
.card, .kpi, .tile, .panel { transition-timing-function: ease; }

/* появление страницы: верхние карточки — с небольшой задержкой друг за другом */
.page-in > :not(.grid), .page-in > .grid > :not(.reveal) { animation: fadeUp var(--t-enter) var(--ease-out) both; }
.page-in > .grid > :nth-child(2) { animation-delay: .04s; }
.page-in > .grid > :nth-child(3) { animation-delay: .08s; }
.page-in > .grid > :nth-child(4) { animation-delay: .12s; }
.page-in > .grid > :nth-child(5) { animation-delay: .16s; }
.page-in > .grid > :nth-child(6) { animation-delay: .2s; }
.page-in > .grid > :nth-child(n + 7) { animation-delay: .24s; }
/* карточки ниже первого экрана ждут прокрутки */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s var(--ease-out), background-color var(--t-theme), color var(--t-theme), border-color var(--t-theme); }
.reveal.in { opacity: 1; transform: none; }
html { scroll-behavior: smooth; }
.table-wrap { overscroll-behavior-x: contain; }
.table-wrap.tall { overscroll-behavior: contain; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}
@media print { .reveal { opacity: 1; transform: none; } }