/* Tab switch — переход между вкладками и страницами вкладки без перезагрузки (правка Эмиля).
 *
 * Общие правила вкладок страницы игры (components/GameTabsNav.tsx) и страницы пользователя (components/ProfileTabsNav.tsx):
 * шапка остаётся, меняется содержимое под ней. Пока новое грузится, у нажатой вкладки бежит полоса (.tab-pending, её
 * выводит components/TabPending.tsx внутри ссылки-вкладки), а старое содержимое тускнеет.
 *
 *   .tab-switch  — страница целиком (внутри — вкладки и тело);
 *   .tab-body    — тело вкладки: тускнеют его прямые потомки;
 *   .tab-pending — полоса ожидания; растянута по ширине ссылки с отступами --tab-pending-inset (по умолчанию 10px).
 *
 * Отметка `.wl-pages-pending` — переход по пагинации внутри вкладки (components/SoftPaging.tsx): тускнеет так же. */

.tab-pending {
  position: absolute;
  right: var(--tab-pending-inset, 10px);
  bottom: 0;
  left: var(--tab-pending-inset, 10px);
  height: 3px;
  overflow: hidden;
  border-radius: 3px 3px 0 0;
}
.tab-pending::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--maincolor);
  animation: tab-pending 0.9s ease-in-out infinite;
}
@keyframes tab-pending {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}

.tab-switch:has(.tab-pending, .wl-pages-pending) .tab-body > * {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s ease 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .tab-pending::before { animation-duration: 2.4s; }
}