/* ==========================================================================
   ИМПЕРАТОРСКИЙ СТИЛЬ: ПОДНЕБЕСНАЯ (ХРОНИКА ЦИВИЛИЗАЦИИ)
   Чистые кастомные стили, эффекты стекла, традиционная китайская эстетика.
   ========================================================================== */

/* 1. Стилизация полосы прокрутки браузера */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #07090e;
}
::-webkit-scrollbar-thumb {
  background: #2a354d;
  border-radius: 4px;
  border: 1px solid rgba(212, 175, 55, 0.25);
}
::-webkit-scrollbar-thumb:hover {
  background: #d4af37;
}

/* 2. Золотой градиент для парадных заголовков */
.text-gradient-gold {
  background: linear-gradient(135deg, #FFF4D0 0%, #D4AF37 50%, #9B8133 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 3. Киноварно-красный градиент для акцентных дат и цифр */
.text-gradient-crimson {
  background: linear-gradient(135deg, #FF7B61 0%, #C23B22 50%, #7E1508 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 4. Традиционная квадратная красная императорская печать (Инь / Си) */
.imperial-seal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #c23b22;
  color: #ff5238;
  box-shadow: inset 0 0 10px rgba(194, 59, 34, 0.6), 0 0 12px rgba(194, 59, 34, 0.4);
  background: rgba(139, 30, 15, 0.15);
  border-radius: 4px;
  font-family: 'Noto Serif SC', serif;
  font-weight: 900;
  letter-spacing: 0.1em;
  user-select: none;
}

/* 5. Декоративные золотые уголки рамок в китайском стиле */
.ornament-corner {
  position: relative;
}
.ornament-corner::before,
.ornament-corner::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: #d4af37;
  pointer-events: none;
  transition: all 0.3s ease;
}
.ornament-corner::before {
  top: -2px;
  left: -2px;
  border-top: 2px solid #d4af37;
  border-left: 2px solid #d4af37;
}
.ornament-corner::after {
  bottom: -2px;
  right: -2px;
  border-bottom: 2px solid #d4af37;
  border-right: 2px solid #d4af37;
}
.ornament-corner:hover::before,
.ornament-corner:hover::after {
  width: 22px;
  height: 22px;
  border-color: #f3e5ab;
}

/* 6. Мягкая пульсация золотого свечения */
@keyframes goldenPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(212, 175, 55, 0);
  }
}
.animate-gold-pulse {
  animation: goldenPulse 2.5s infinite;
}

/* 7. Эффект матового стекла карточек (Glassmorphism) */
.glass-panel {
  background: rgba(19, 24, 36, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 175, 55, 0.2);
}
.glass-panel:hover {
  border-color: rgba(212, 175, 55, 0.45);
}

/* 8. Анимация звуковых полосок эквалайзера для кнопки плеера */
@keyframes eq1 { 0%, 100% { height: 4px; } 50% { height: 13px; } }
@keyframes eq2 { 0%, 100% { height: 13px; } 50% { height: 6px; } }
@keyframes eq3 { 0%, 100% { height: 7px; } 50% { height: 14px; } }
.eq-bar-1 { animation: eq1 0.75s infinite ease-in-out; }
.eq-bar-2 { animation: eq2 0.55s infinite ease-in-out; }
.eq-bar-3 { animation: eq3 0.85s infinite ease-in-out; }

/* 9. Растворение краев фонового фото hero-секции */
.hero-bottom-fade {
  background: linear-gradient(to bottom, transparent 0%, rgba(7, 9, 14, 0.3) 25%, rgba(7, 9, 14, 0.85) 60%, #07090e 95%, #07090e 100%);
}
.hero-top-fade {
  background: linear-gradient(to bottom, #07090e 0%, rgba(7, 9, 14, 0.7) 50%, transparent 100%);
}

/* 10. Мобильная вертикальная линия времени */
.mobile-timeline-line {
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 1.25rem;
  width: 2px;
  background: linear-gradient(to bottom, #d4af37, #c23b22, #d4af37);
  opacity: 0.35;
}

/* 11. Активная кнопка таба династии (ScrollSpy) */
.dynasty-tab-active {
  background: rgba(212, 175, 55, 0.25) !important;
  border-color: #d4af37 !important;
  color: #fff4d0 !important;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.35);
}

/* 12. Мобильное выдвижное меню */
#mobile-menu-drawer {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
#mobile-menu-drawer.menu-closed {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
#mobile-menu-drawer.menu-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}