/**
 * VISH — производительность и плавные анимации (ПК + мобильный).
 * Подключается последним; алгоритмы и вёрстку не меняет.
 */

.vish-ui {
  --dur-fast: 100ms;
  --dur: 160ms;
  --dur-slow: 220ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Тяжёлый blur отключён (главный источник лагов на ПК) ── */
.vish-ui .nav,
.vish-ui #app-page > .nav,
.vish-ui .modal-overlay,
.vish-ui .auth-boot,
.vish-ui .lightbox-backdrop,
.vish-ui .tg-profile-overlay,
.vish-ui .sales-history-backdrop,
.vish-ui .emoji-picker-backdrop,
.vish-ui .nav-links.open,
.vish-ui .login-card,
.vish-ui .vish-dialog,
.vish-ui .confirm-modal {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.vish-ui .nav,
.vish-ui #app-page > .nav {
  background: var(--bg2) !important;
}

.vish-ui .modal-overlay {
  background: rgba(0, 0, 0, 0.62) !important;
}

.vish-ui .emoji-picker-backdrop.show {
  background: rgba(0, 0, 0, 0.45) !important;
}

/* ── Фон без бесконечной анимации ── */
.vish-ui body::before,
.vish-ui #login-page .login-bg-dark {
  animation: none !important;
  transform: none !important;
}

.vish-ui body {
  transition: background-color 0.12s ease, color 0.12s ease !important;
}

/* ── Скрытые вкладки не рендерятся ── */
.vish-ui .section:not(.active) {
  content-visibility: hidden;
  contain-intrinsic-size: 0 640px;
}

.vish-ui .section.active {
  content-visibility: visible;
}

/* ── Быстрые переходы вкладок (без scale — меньше дёрганий) ── */
.vish-ui .section,
.vish-ui #app-page .section.active,
.vish-ui .modal,
.vish-ui .confirm-modal,
.vish-ui .vish-dialog,
.vish-ui .prompt-modal,
.vish-ui .tg-settings-modal,
.vish-ui .sales-history-modal {
  animation: vishIn var(--dur) var(--ease-out) both !important;
}

@keyframes vishIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Интерактив: только нужные свойства, короткий duration ── */
.vish-ui .nav-btn,
.vish-ui .shop-card,
.vish-ui .user-badge,
.vish-ui .theme-btn,
.vish-ui .btn-logout,
.vish-ui .filter-btn,
.vish-ui .page-btn,
.vish-ui .upload-btn,
.vish-ui .modal-close,
.vish-ui .btn-login,
.vish-ui .prod-section-tab,
.vish-ui .demand-tab,
.vish-ui .user-card-item,
.vish-ui .pg-card,
.vish-ui tbody tr,
.vish-ui .tg-dialog,
.vish-ui .tg-compose-btn,
.vish-ui .tg-send {
  transition-property: background-color, border-color, color, opacity, transform, box-shadow !important;
  transition-duration: var(--dur-fast) !important;
  transition-timing-function: var(--ease-out) !important;
}

.vish-ui .shop-card:hover,
.vish-ui .user-card-item:hover,
.vish-ui .pg-card:hover {
  transform: none !important;
}

.vish-ui #app-page {
  transition: margin-left 0.18s var(--ease-out), margin-right 0.18s var(--ease-out) !important;
}

.vish-ui .product-dock,
.vish-ui .pd-side-panel {
  transition: transform 0.2s var(--ease-out) !important;
}

/* ── Полоса загрузки ── */
.vish-ui .app-loading-bar.active::after {
  animation-duration: 0.75s !important;
}

/* ── Галерея: меньше перерисовок при скролле ── */
.vish-ui .products-gallery-grid {
  contain: layout style;
}

.vish-ui .pg-card {
  contain: layout paint;
}

/* ── Таблицы: только фон при hover ── */
.vish-ui tbody tr {
  will-change: auto;
}

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .vish-ui *,
  .vish-ui *::before,
  .vish-ui *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}