/* =============================================================================
   anim.css — тактичные премиум-анимации для админ-панели /new/
   -----------------------------------------------------------------------------
   Назначение: только ДВИЖЕНИЕ и ПОЯВЛЕНИЕ. Цвета/фоны/размеры/раскладку НЕ трогаем.
   Анимируем строго transform + opacity (GPU), без layout-trashing.

   ПОДКЛЮЧАТЬ ПОСЛЕДНИМ — после style.css / pset.css / *-theme.css, чтобы hover-
   эффекты могли при необходимости перебить существующий `transform: none`.

   Контур: только desktop (≥1024px) для появлений секций и stagger; мелкие hover/
   transition безопасны глобально и не ломают мобилу.

   НЕ дублирует и не конфликтует с уже существующими в проекте анимациями:
   navTabPopDesktop / hbPulse / nf-open / adminFade / ud-panel reveal / theme VT.

   Easing: cubic-bezier(0.32, 0.72, 0, 1) — мягкий «финтех»-выход, без пружин.
   Длительности: hover/active 120–180ms, появление секций 300–420ms.
   В конце файла — обязательный prefers-reduced-motion: reduce, гасящий ВСЁ ниже.
   ============================================================================= */

:root {
  --anim-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* -----------------------------------------------------------------------------
   1. Keyframes — единый «fade + lift» (opacity 0→1, translateY 6px→0).
   Используется и для страницы, и для stagger-детей.
   -------------------------------------------------------------------------- */
/* Page-level reveal is OPACITY-ONLY (no lift). Some pages render a skeleton .page
   first, then replace it with a data .page once the fetch resolves — each mount
   replays this animation. A short opacity-only fade replays imperceptibly; a
   translateY would read as a jarring "re-slide" flash when data lands. */
@keyframes anim-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes anim-rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -----------------------------------------------------------------------------
   2. Hover/active «живость» — глобально (безопасно для мобилы: это лишь жесты
   указателя, раскладку не меняют). Перечисляем свойства явно, без transition:all.
   -------------------------------------------------------------------------- */
.admin-main .summary-card,
.admin-main .user-card,
.admin-main .domain-cube,
.admin-main .activity-row {
  transition: transform 0.15s var(--anim-ease), box-shadow 0.15s var(--anim-ease);
}

.admin-main .summary-card:hover,
.admin-main .user-card:hover,
.admin-main .domain-cube:hover,
.admin-main .activity-row:hover {
  transform: translateY(-1px);
}

/* .list-row: в style.css стоит `transform: none !important` на :hover — перебиваем
   точечно (единственный оправданный !important, как разрешено в брифе). Фон-hover
   из style.css не трогаем. */
.admin-main .list-row {
  transition: transform 0.15s var(--anim-ease);
}
.admin-main .list-row:hover {
  transform: translateY(-1px) !important;
}

/* :focus-visible ring для кликабельных строк/кубов, где его нет — клавиатурная
   доступность. Цвет — производная от accent через color-mix, новых цветов нет. */
.admin-main .list-row:focus-visible,
.admin-main .domain-cube:focus-visible,
.admin-main .user-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Кнопки — тонкий lift на hover для ghost/dark (у primary .btn тень-hover уже есть
   в style.css, его не трогаем). active scale там, где его нет. */
.admin-main .btn-ghost,
.admin-main .btn-dark,
.admin-main .btn-link {
  transition: transform 0.13s var(--anim-ease),
              border-color 0.15s var(--anim-ease),
              color 0.15s var(--anim-ease),
              background 0.15s var(--anim-ease);
}
.admin-main .btn-ghost:hover,
.admin-main .btn-dark:hover {
  transform: translateY(-1px);
}
.admin-main .btn-ghost:active,
.admin-main .btn-dark:active,
.admin-main .btn-link:active {
  transform: scale(0.97);
}

/* api-docs summary: лёгкий сдвиг текста при наведении — «реагирует» на курсор. */
.admin-main .api-docs summary {
  transition: transform 0.15s var(--anim-ease);
}
.admin-main .api-docs summary:hover {
  transform: translateX(2px);
}

/* -----------------------------------------------------------------------------
   3. Появление страницы и stagger секций — ТОЛЬКО desktop (≥1024px).
   На мобиле появлений нет — экономим внимание и батарею, ничего не дёргается.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

  /* NB: НЕТ reveal-анимации на самом `.admin-main .page`. Многие страницы
     рендерят skeleton-`.page`, затем заменяют его data-`.page` после fetch — фейд
     всей страницы при этом проигрывался дважды и «застревал» выцветшим, пока шла
     загрузка. Появление даём только КАРТОЧКАМ дашборда/статистики (рендерятся
     один раз, await данных до первого innerHTML) — там это безопасно и красиво. */

  /* Stagger прямых детей основных секций. Шаг 55ms, максимум до 8-го элемента,
     дальше задержку НЕ наращиваем (всё, что ниже, появляется синхронно с 8-м). */
  .admin-main .ops-grid > *,
  .admin-main .command-stack > *,
  .admin-main .step-grid > div,
  .admin-main .summary-card,
  .admin-main .mini-metric,
  .admin-main .kpi,
  .admin-main .domain-cube {
    animation: anim-rise-in 0.4s var(--anim-ease) both;
  }

  .admin-main .ops-grid > *:nth-child(1),
  .admin-main .command-stack > *:nth-child(1),
  .admin-main .step-grid > div:nth-child(1),
  .admin-main .summary-card:nth-child(1),
  .admin-main .mini-metric:nth-child(1),
  .admin-main .kpi:nth-child(1),
  .admin-main .domain-cube:nth-child(1) { animation-delay: 0ms; }

  .admin-main .ops-grid > *:nth-child(2),
  .admin-main .command-stack > *:nth-child(2),
  .admin-main .step-grid > div:nth-child(2),
  .admin-main .summary-card:nth-child(2),
  .admin-main .mini-metric:nth-child(2),
  .admin-main .kpi:nth-child(2),
  .admin-main .domain-cube:nth-child(2) { animation-delay: 55ms; }

  .admin-main .ops-grid > *:nth-child(3),
  .admin-main .command-stack > *:nth-child(3),
  .admin-main .step-grid > div:nth-child(3),
  .admin-main .summary-card:nth-child(3),
  .admin-main .mini-metric:nth-child(3),
  .admin-main .kpi:nth-child(3),
  .admin-main .domain-cube:nth-child(3) { animation-delay: 110ms; }

  .admin-main .ops-grid > *:nth-child(4),
  .admin-main .command-stack > *:nth-child(4),
  .admin-main .step-grid > div:nth-child(4),
  .admin-main .summary-card:nth-child(4),
  .admin-main .mini-metric:nth-child(4),
  .admin-main .kpi:nth-child(4),
  .admin-main .domain-cube:nth-child(4) { animation-delay: 165ms; }

  .admin-main .ops-grid > *:nth-child(5),
  .admin-main .command-stack > *:nth-child(5),
  .admin-main .step-grid > div:nth-child(5),
  .admin-main .summary-card:nth-child(5),
  .admin-main .mini-metric:nth-child(5),
  .admin-main .kpi:nth-child(5),
  .admin-main .domain-cube:nth-child(5) { animation-delay: 220ms; }

  .admin-main .ops-grid > *:nth-child(6),
  .admin-main .command-stack > *:nth-child(6),
  .admin-main .step-grid > div:nth-child(6),
  .admin-main .summary-card:nth-child(6),
  .admin-main .mini-metric:nth-child(6),
  .admin-main .kpi:nth-child(6),
  .admin-main .domain-cube:nth-child(6) { animation-delay: 275ms; }

  .admin-main .ops-grid > *:nth-child(7),
  .admin-main .command-stack > *:nth-child(7),
  .admin-main .step-grid > div:nth-child(7),
  .admin-main .summary-card:nth-child(7),
  .admin-main .mini-metric:nth-child(7),
  .admin-main .kpi:nth-child(7),
  .admin-main .domain-cube:nth-child(7) { animation-delay: 330ms; }

  /* 8-й и все последующие — общий потолок задержки, не растягиваем «хвост». */
  .admin-main .ops-grid > *:nth-child(n+8),
  .admin-main .command-stack > *:nth-child(n+8),
  .admin-main .step-grid > div:nth-child(n+8),
  .admin-main .summary-card:nth-child(n+8),
  .admin-main .mini-metric:nth-child(n+8),
  .admin-main .kpi:nth-child(n+8),
  .admin-main .domain-cube:nth-child(n+8) { animation-delay: 385ms; }

  /* api-docs details — мягкий rise при первом рендере страницы. */
  .admin-main .api-docs details {
    animation: anim-rise-in 0.4s var(--anim-ease) both;
  }
  .admin-main .api-docs details:nth-of-type(2) { animation-delay: 50ms; }
  .admin-main .api-docs details:nth-of-type(3) { animation-delay: 100ms; }
  .admin-main .api-docs details:nth-of-type(n+4) { animation-delay: 150ms; }
}

/* -----------------------------------------------------------------------------
   4. prefers-reduced-motion — гасим ВСЁ, что объявлено выше в этом файле.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .admin-main .page,
  .admin-main .ops-grid > *,
  .admin-main .command-stack > *,
  .admin-main .step-grid > div,
  .admin-main .summary-card,
  .admin-main .mini-metric,
  .admin-main .kpi,
  .admin-main .domain-cube,
  .admin-main .api-docs details {
    animation: none !important;
  }

  .admin-main .summary-card,
  .admin-main .user-card,
  .admin-main .domain-cube,
  .admin-main .activity-row,
  .admin-main .list-row,
  .admin-main .btn-ghost,
  .admin-main .btn-dark,
  .admin-main .btn-link,
  .admin-main .api-docs summary {
    transition: none !important;
  }

  .admin-main .summary-card:hover,
  .admin-main .user-card:hover,
  .admin-main .domain-cube:hover,
  .admin-main .activity-row:hover,
  .admin-main .list-row:hover,
  .admin-main .btn-ghost:hover,
  .admin-main .btn-dark:hover,
  .admin-main .btn-ghost:active,
  .admin-main .btn-dark:active,
  .admin-main .btn-link:active,
  .admin-main .api-docs summary:hover {
    transform: none !important;
  }
}