/**
 * Finxo AJAX Navigation — fan.css
 * ─────────────────────────────────────────────────────────────
 * Анимации переходов между страницами.
 * Переменные берём из темы Finxo (--cyan, --bg-body и т.д.)
 * с fallback-значениями для автономной работы.
 * ─────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════
   КОНТЕЙНЕР КОНТЕНТА
   Базовое состояние — всегда видим
═══════════════════════════════════════════════════════════ */
#fan-content {
  opacity: 1;
  transform: translateY(0);
  /* Плавный уход при fan-out */
  transition: opacity 0.22s ease, transform 0.22s ease;
  will-change: opacity, transform;
}

/* ═══════════════════════════════════════════════════════════
   УХОД ТЕКУЩЕЙ СТРАНИЦЫ
   Контент уходит вверх и растворяется.
   Срабатывает сразу при клике, пока идёт fetch.
═══════════════════════════════════════════════════════════ */
#fan-content.fan-out {
  opacity: 0;
  transform: translateY(-18px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   ПОЯВЛЕНИЕ НОВОЙ СТРАНИЦЫ
   Контент появляется снизу и проявляется.
   Срабатывает после вставки нового HTML.
═══════════════════════════════════════════════════════════ */
#fan-content.fan-in {
  animation: fan-slide-in 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fan-slide-in {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════
   КУРСОР-ЗАГРУЗЧИК
   Показываем во время AJAX-запроса
═══════════════════════════════════════════════════════════ */
body.fan-loading {
  cursor: progress;
}

body.fan-loading a {
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   АКТИВНЫЙ ПУНКТ МЕНЮ
═══════════════════════════════════════════════════════════ */
.main-nav a.active,
.main-nav a.current-menu-item {
  color: var(--cyan, #00D4FF) !important;
}

.main-nav a.active::after,
.main-nav a.current-menu-item::after {
  width: 100% !important;
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════
   МОБИЛЬНОЕ МЕНЮ
═══════════════════════════════════════════════════════════ */
body.fan-enabled .mobile-menu-overlay {
  transition: opacity 0.2s ease;
}