/* =========================================================
   BURSTY THEME - HEADER
   Используем классы UI Kit как есть, только позиционирование
   ========================================================= */

/* ---------- 2. Navbar в Apple-стиле (Fixed) ---------- */
.navbar {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-6);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 32px rgba(0, 0, 0, 0.06);
  transition: 
    all 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.3s ease,
    background 0.3s ease;
}

/* Эффект при скролле */
/* .navbar.scrolled {
  top: var(--space-2);
  left: var(--space-2);
  right: var(--space-2);
  padding: var(--space-2) var(--space-6);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 12px 48px rgba(0, 0, 0, 0.12);
} */

[data-theme="dark"] .navbar {
  background: rgba(28, 28, 30, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 8px 32px rgba(0, 0, 0, 0.3);
}

/* [data-theme="dark"] .navbar.scrolled {
  background: rgba(28, 28, 30, 0.95);
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.5),
    0 12px 48px rgba(0, 0, 0, 0.6);
} */

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  gap: var(--space-6);
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex: 1;
}

.navbar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  justify-content: flex-end;
}

/* ---------- 3. Меню десктоп ---------- */
.navbar-menu-desktop {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-menu-desktop .nav-link {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
}

.navbar-menu-desktop .nav-link:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
}

[data-theme="dark"] .navbar-menu-desktop .nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

.navbar-menu-desktop .current-menu-item .nav-link,
.navbar-menu-desktop .current_page_item .nav-link {
  color: var(--accent);
  background: var(--accent-soft);
}

/* ---------- 4. Логотип с анимацией ---------- */
.navbar-brand {
  display: inline-block;
  text-decoration: none !important;
}

.navbar-brand:hover {
  text-decoration: none !important;
}

.navbar-brand .logo-large {
  display: inline-block;
  position: relative;
  isolation: isolate;
  
  font-family: var(--font-logo), 'Bursty Logo', Impact, sans-serif;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 900;
  line-height: 0.85;
  text-transform: uppercase;
  
  transform-origin: center center;
  transition: transform 0.3s ease;
}

.navbar-brand .logo-large strong {
  position: relative;
  z-index: 3;
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: 900;
  
  -webkit-text-stroke: 1px #11141a;
  text-shadow: 1px 1px 0 #11141a;
  color: #FFFFFF;
}

.navbar-brand .logo-large::after {
  content: "BURSTY";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  
  font-size: inherit;
  line-height: inherit;
  font-weight: 900;
  text-transform: uppercase;
  
  background-color: #FF6347;
  background-image: linear-gradient(
    110deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.15) 44%,
    rgba(255, 255, 255, 0.95) 49%,
    rgba(255, 255, 255, 0.35) 54%,
    transparent 62%,
    transparent 100%
  );
  
  background-size: 260% 100%;
  background-position: -220% 0;
  
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  
  opacity: 0;
  transform: translate(0, 0);
  pointer-events: none;
  
  animation:
    burstyLogoColorShift 9s ease-in-out infinite,
    burstyLogoShine 3.2s ease-in-out infinite;
  
  filter:
    drop-shadow(1px 1px 0 rgba(17, 20, 26, 0.65))
    drop-shadow(2px 2px 0 rgba(17, 20, 26, 0.35));
  
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.navbar-brand:hover .logo-large {
  transform: translateY(-1px);
}

.navbar-brand:hover .logo-large::after {
  opacity: 1 !important;
  transform: translate(2px, 2px) !important;
}

@keyframes burstyLogoColorShift {
  0% { background-color: #FF6347; }
  18% { background-color: #FF1493; }
  34% { background-color: #8B0000; }
  50% { background-color: #FF7F50; }
  66% { background-color: #4169E1; }
  82% { background-color: #FFD700; }
  100% { background-color: #FF6347; }
}

@keyframes burstyLogoShine {
  0% { background-position: -220% 0; }
  45% { background-position: 220% 0; }
}

/* ---------- 5. Theme Toggle ---------- */
/* На десктопе показываем только navbar-theme-desktop */
.navbar-theme-mobile {
  display: none;
}

.navbar-theme-desktop {
  display: inline-flex;
}

/* ---------- 6. Бургер ---------- */
.navbar-toggle {
  display: none;
}

/* ---------- 7. Overlay для blur ---------- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  
  display: none;
  opacity: 0;
}

[data-theme="dark"] .menu-overlay {
  background: rgba(0, 0, 0, 0.5);
}

body.menu-open .menu-overlay {
  display: block;
  animation: overlayFadeIn 0.3s ease forwards;
}

@keyframes overlayFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

body.menu-open {
  overflow: hidden !important;
}

/* ---------- 8. Мобильное меню (с анимацией открытия и закрытия) ---------- */
.navbar-mobile {
  position: fixed;
  top: calc(var(--space-4) + 80px);
  left: var(--space-0);
  right: var(--space-0);
  z-index: 999;
  
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: var(--space-5);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15);
  
  /* Скрыто по умолчанию */
  display: none;
  opacity: 0;
  transform: translateY(-20px) scale(0.96);
  transform-origin: top center;
}

[data-theme="dark"] .navbar-mobile {
  background: rgba(28, 28, 30, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

/* Анимация открытия */
.navbar-mobile.active {
  display: block;
  animation: mobileMenuOpen 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes mobileMenuOpen {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Анимация закрытия */
.navbar-mobile.closing {
  display: block;
  animation: mobileMenuClose 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes mobileMenuClose {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.96);
  }
}

/* Пункты меню */
.navbar-mobile-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
}

.navbar-mobile-menu .nav-link {
  display: block;
  padding: var(--space-4) var(--space-5);
  background: rgba(0, 0, 0, 0.03);
  border-radius: var(--radius-lg);
  text-align: center;
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  font-size: var(--fs-body);
  transition: all 0.2s ease;
  
  opacity: 0;
  transform: translateY(-12px);
}

.navbar-mobile.active .navbar-mobile-menu .nav-link {
  opacity: 1;
  transform: translateY(0);
}

.navbar-mobile.active .navbar-mobile-menu .nav-link:nth-child(1) { transition-delay: 0.08s; }
.navbar-mobile.active .navbar-mobile-menu .nav-link:nth-child(2) { transition-delay: 0.14s; }
.navbar-mobile.active .navbar-mobile-menu .nav-link:nth-child(3) { transition-delay: 0.20s; }
.navbar-mobile.active .navbar-mobile-menu .nav-link:nth-child(4) { transition-delay: 0.26s; }
.navbar-mobile.active .navbar-mobile-menu .nav-link:nth-child(5) { transition-delay: 0.32s; }

[data-theme="dark"] .navbar-mobile-menu .nav-link {
  background: rgba(255, 255, 255, 0.05);
}

.navbar-mobile-menu .nav-link:hover {
  background: rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

[data-theme="dark"] .navbar-mobile-menu .nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

.navbar-mobile-menu .current-menu-item .nav-link,
.navbar-mobile-menu .current_page_item .nav-link {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* Соцсети в мобильном меню */
.navbar-mobile-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  
  opacity: 0;
  transform: translateY(-12px);
}

.navbar-mobile.active .navbar-mobile-social {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3s ease 0.3s;
}

/* Кнопка Сотрудничество */
.navbar-mobile .btn-block {
  width: 100%;
  padding: var(--space-4) var(--space-6);
  font-size: var(--fs-body);
  
  opacity: 0;
  transform: translateY(-12px);
}

.navbar-mobile.active .btn-block {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3s ease 0.36s;
}

/* ---------- 9. Адаптивность ---------- */
@media (max-width: 1160px) {
  .navbar {
    padding: var(--space-1) var(--space-1);
  }
  /* Скрываем десктопные элементы */
  .navbar-menu {
    display: none;
  }
  
  .navbar-social {
    display: none;
  }
  
  .navbar-right .btn-primary {
    display: none;
  }
  
  .navbar-theme-desktop {
    display: none;
  }
  
  /* Показываем мобильные элементы */
  .navbar-theme-mobile {
    display: inline-flex;
  }
  
  .navbar-toggle {
    display: inline-flex;
  }
  
  /* Логотип БЕЗ фона на мобильном */
  .navbar-center .navbar-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  
  .navbar-center .logo-large {
    font-size: 1.5rem;
    line-height: 1;
  }
  
  .navbar-center .logo-large strong {
    -webkit-text-stroke: 0.5px #11141a;
    text-shadow: 0.5px 0.5px 0 #11141a;
  }
  
  /* ОДИНАКОВЫЕ СТИЛИ ДЛЯ ОБЕИХ КНОПОК */
  .navbar-theme-mobile,
  .navbar-toggle.btn-burger {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    transition: all 0.2s ease;
  }
  
  @media (hover: hover){
    .navbar-theme-mobile:hover,
    .navbar-toggle.btn-burger:hover {
      background: var(--bg-soft);
      border-color: var(--border-strong);
      transform: translateY(0px);
    }
  }
  
  .navbar-theme-mobile:active,
  .navbar-toggle.btn-burger:active {
    transform: scale(0.92);
  }
  
  /* Переопределяем бургер из UI Kit */
  .navbar-toggle.btn-burger {
    border-radius: var(--radius-full) !important;
    gap: 4px;
  }
  
  .navbar-toggle.btn-burger span {
    background: var(--text);
    transition: all 0.2s ease;
  }
  
  @media (hover: hover) {
    .navbar-toggle.btn-burger:hover span {
      background: var(--accent);
    }
  }
}

@media (max-width: 768px) {
  .navbar {
    padding: var(--space-1) var(--space-1);
    margin: 0 var(--space-3);
    top: var(--space-3);
  }
  
  .navbar-mobile {
    top: calc(var(--space-1) + 72px);
    left: var(--space-0);
    right: var(--space-0);
  }
}

/* =========================================================
   AJAX NAVIGATION - Индикатор загрузки
   ========================================================= */

/* Тонкая полоска загрузки сверху (как на YouTube) */
body.page-loading::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 30%;
    background: var(--accent);
    z-index: 10000;
    animation: pageLoading 1s ease-in-out infinite;
    box-shadow: 0 0 10px var(--accent);
}

@keyframes pageLoading {
    0% {
        left: -30%;
        width: 30%;
    }
    50% {
        width: 50%;
    }
    100% {
        left: 100%;
        width: 30%;
    }
}

/* Плавный переход для основного контента */
#primary {
    transition: opacity 0.3s ease;
}

/* =========================================================
   АНИМАЦИИ ПОЯВЛЕНИЯ ШАПКИ
   ========================================================= */

/* Navbar появляется с масштабированием */
.navbar {
  opacity: 0;
  transform: scale(0.95);
  animation: navbarAppear 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.2s;
}

@keyframes navbarAppear {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Логотип появляется первым */
.navbar-center {
  opacity: 0;
  animation: logoAppear 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.1s;
}

@keyframes logoAppear {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Левая и правая части появляются после */
.navbar-left,
.navbar-right {
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
  animation-delay: 0.5s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Пункты меню появляются каскадом */
.navbar-menu li {
  opacity: 0;
  transform: translateY(-8px);
  animation: menuItemAppear 0.4s ease forwards;
}

.navbar-menu li:nth-child(1) { animation-delay: 0.6s; }
.navbar-menu li:nth-child(2) { animation-delay: 0.68s; }
.navbar-menu li:nth-child(3) { animation-delay: 0.76s; }
.navbar-menu li:nth-child(4) { animation-delay: 0.84s; }

@keyframes menuItemAppear {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Кнопки справа появляются каскадом */
.navbar-social {
  opacity: 0;
  animation: fadeIn 0.4s ease forwards;
  animation-delay: 0.7s;
}

.navbar-right .btn-primary {
  opacity: 0;
  animation: fadeIn 0.4s ease forwards;
  animation-delay: 0.78s;
}

.navbar-theme-desktop {
  opacity: 0;
  animation: fadeIn 0.4s ease forwards;
  animation-delay: 0.86s;
}

/* Уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .navbar,
  .navbar-center,
  .navbar-left,
  .navbar-right,
  .navbar-menu li,
  .navbar-social,
  .navbar-right .btn-primary,
  .navbar-theme-desktop {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}