/* ============================================================================
   mobile-animations.css — мобильный моушен админки PolyFucked.
   Премиально, ненавязчиво, fintech-серьёзно. Только transform/opacity (GPU).
   Подключается ПОСЛЕДНИМ — каскадом поверх style.css/pset.css/mobile-*.
   Правила моушена проекта:
     - анимируем ТОЛЬКО transform и opacity (никогда top/left/width/height);
     - easing cubic-bezier(0.4,0,0.2,1) или ease-out (не ease/linear/bouncy);
     - мелкие 120-180ms, средние 200-280ms, появление секций <=400ms;
     - без transition:all, без hover:scale, без спиннеров и радуги;
     - финальный prefers-reduced-motion гасит всё.
   Существующее НЕ ломаем: drawer (translateX в style.css), .admin-loading
   (adminFade), hbPulse, theme-transition — их не трогаем, только дополняем.
   ========================================================================== */

/* ============================================================================
   1. ПОЯВЛЕНИЕ КОНТЕНТА СТРАНИЦЫ при смене раздела.
   Роутер вставляет .page внутрь #admin-content. .admin-loading уже фейдит
   плейсхолдер; здесь анимируем именно ГОТОВЫЙ контент: мягкий подъём+проявление.
   keyframes общий (desktop тоже выигрывает), но шаг тонкий и быстрый.
   ========================================================================== */
@keyframes maPageIn {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.admin-main .page {
  animation: maPageIn 280ms cubic-bezier(0.4, 0, 0.2, 1) both;
  /* will-change только на время анимации убрать нельзя в CSS-only —
     transform/opacity и так на GPU, will-change не задаём чтобы не висел слой. */
}

/* На мобиле появление чуть выразительнее (тот же шаг, гарантируем работу даже
   если страница не обёрнута в .page — ловим первый блок контента). */
@media (max-width: 768px) {
  .admin-main > :first-child:not(.admin-loading) {
    animation: maPageIn 280ms cubic-bezier(0.4, 0, 0.2, 1) both;
  }
}

/* ============================================================================
   2. STAGGER КАРТОЧЕК — лёгкое последовательное проявление сетки/списков.
   Только мобила, только при mount (CSS-only). Шаг ~60ms, ограничен 8 элементами
   (дальше без задержки, чтобы длинные списки не «ждали»).
   ========================================================================== */
@keyframes maCardIn {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 768px) {
  .admin-main :is(
    .summary-card, .kpi, .dcard, .chat-card, .domain-cube
  ) {
    animation: maCardIn 280ms cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  /* лесенка задержек до 8-го элемента; дальше delay = 0 (см. ниже). */
  .admin-main :is(.summary-card, .kpi, .dcard, .chat-card, .domain-cube):nth-child(1) { animation-delay: 0ms; }
  .admin-main :is(.summary-card, .kpi, .dcard, .chat-card, .domain-cube):nth-child(2) { animation-delay: 55ms; }
  .admin-main :is(.summary-card, .kpi, .dcard, .chat-card, .domain-cube):nth-child(3) { animation-delay: 110ms; }
  .admin-main :is(.summary-card, .kpi, .dcard, .chat-card, .domain-cube):nth-child(4) { animation-delay: 165ms; }
  .admin-main :is(.summary-card, .kpi, .dcard, .chat-card, .domain-cube):nth-child(5) { animation-delay: 220ms; }
  .admin-main :is(.summary-card, .kpi, .dcard, .chat-card, .domain-cube):nth-child(6) { animation-delay: 275ms; }
  .admin-main :is(.summary-card, .kpi, .dcard, .chat-card, .domain-cube):nth-child(7) { animation-delay: 330ms; }
  .admin-main :is(.summary-card, .kpi, .dcard, .chat-card, .domain-cube):nth-child(8) { animation-delay: 385ms; }
  /* 9-й и далее — без задержки, чтобы не тормозить длинные ленты */
  .admin-main :is(.summary-card, .kpi, .dcard, .chat-card, .domain-cube):nth-child(n+9) { animation-delay: 0ms; }
}

/* ============================================================================
   3. ТАП-ФИДБЭК интерактивов на тач-устройствах.
   Только там где нет hover (телефоны/планшеты) — лёгкое «нажатие» scale(0.97).
   Не вешаем на текстовые ссылки. transition явный, без all.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
  .admin-main :is(
    .btn, .pset-pill, .nav-tab, .mobile-nav-item,
    .chat-card, .chat-action-pill
  ),
  .admin-main .actions button,
  .admin-main .actions .btn,
  .nav-tab,
  .mobile-nav-item {
    transition: transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .admin-main :is(
    .btn, .pset-pill, .nav-tab, .mobile-nav-item,
    .chat-card, .chat-action-pill
  ):active,
  .admin-main .actions button:active,
  .admin-main .actions .btn:active,
  .nav-tab:active,
  .mobile-nav-item:active {
    transform: scale(0.97);
  }
}

/* ============================================================================
   4. STAGGER ПУНКТОВ DRAWER-МЕНЮ при открытии.
   Сам drawer уже едет translateX (style.css) — НЕ трогаем. Тут только пункты
   появляются лесенкой внутри уже открытой панели. Тонко, до 8 пунктов.
   ========================================================================== */
@keyframes maDrawerItem {
  from { opacity: 0; transform: translate3d(-8px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 768px) {
  .mobile-nav-overlay.open .mobile-nav-item {
    animation: maDrawerItem 240ms cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  .mobile-nav-overlay.open .mobile-nav-item:nth-child(1) { animation-delay: 40ms; }
  .mobile-nav-overlay.open .mobile-nav-item:nth-child(2) { animation-delay: 80ms; }
  .mobile-nav-overlay.open .mobile-nav-item:nth-child(3) { animation-delay: 120ms; }
  .mobile-nav-overlay.open .mobile-nav-item:nth-child(4) { animation-delay: 160ms; }
  .mobile-nav-overlay.open .mobile-nav-item:nth-child(5) { animation-delay: 200ms; }
  .mobile-nav-overlay.open .mobile-nav-item:nth-child(6) { animation-delay: 240ms; }
  .mobile-nav-overlay.open .mobile-nav-item:nth-child(7) { animation-delay: 280ms; }
  .mobile-nav-overlay.open .mobile-nav-item:nth-child(n+8) { animation-delay: 320ms; }
}

/* ============================================================================
   5. BOTTOM-SHEET ВЕРИФИКАЦИИ (.vflowm-sheet) — slide-up при появлении.
   Защитное правило: если шит рендерится в этой админке — он въезжает снизу.
   Если у него уже есть своя анимация входа в другом CSS — наша короче/мягче и
   подключена позже, конфликта быть не должно (одно свойство animation).
   ========================================================================== */
@keyframes maSheetUp {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 768px) {
  .vflowm-sheet {
    animation: maSheetUp 280ms cubic-bezier(0.32, 0.72, 0, 1) both;
    will-change: transform;
  }
}

/* ============================================================================
   6. ПОЯВЛЕНИЕ ПОСЛЕДНЕГО СООБЩЕНИЯ САППОРТА — максимально тонко.
   Селекторами .message-row владеет саппорт-агент; трогаем ТОЛЬКО :last-child
   и только fade+малый подъём, чтобы новое сообщение «прибывало», а не мигало.
   Без сдвигов layout — transform/opacity. На мобиле.
   ========================================================================== */
@keyframes maMsgIn {
  from { opacity: 0; transform: translate3d(0, 4px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 768px) {
  .admin-main .message-row:last-child {
    animation: maMsgIn 200ms ease-out both;
  }
}

/* ============================================================================
   7. SKELETON-PULSE для loading-блоков вместо спиннера.
   Роутер показывает .admin-loading > .placeholder во время загрузки страницы —
   даём мягкое дыхание прозрачности. opacity-only, медленно, не дёргано.
   ========================================================================== */
@keyframes maPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.admin-loading .placeholder {
  animation: maPulse 1600ms ease-in-out infinite;
}

/* ============================================================================
   8. МИКРОДЕТАЛИ ПРЕМИУМ-УРОВНЯ.
   ::selection уже задан акцентом в style.css — НЕ дублируем.
   Здесь только аккуратный focus-visible ring акцентом для клавиатуры/доступности
   (глобально — улучшает и desktop). Не перекрывает существующие focus-стили
   с box-shadow (.hb-item и т.п.) — у них своя точечная подсветка.
   ========================================================================== */
.admin-main :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 6px);
}

/* ============================================================================
   ОБЯЗАТЕЛЬНО: уважение к prefers-reduced-motion — гасим ВСЁ движение.
   Сохраняем мгновенную видимость (opacity/transform в конечном состоянии),
   убирая сами анимации и переходы.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}