/* ============================================================
   WaifuHunt — страницы-разделы: «Полночный архив» + раскрытие
   Override-слой НАД waifuhunt-archive.css. Дотягивает hero,
   статы, кнопки и чипы разделов (tops/characters/discussions/news)
   до языка лендинга-зала и добавляет кинематографичный вход.
   Только same-origin CSS → проходит строгий CSP. Полностью
   обратимо (убери <link>). Подключать ПОСЛЕ archive.css.
   НЕ трогает контейнеры данных и их id — чистая презентация.
   ============================================================ */

/* ---------- 0. вход: «раскрытие» масштхеда ----------
   Карта hero разворачивается пружиной, контент каскадом всплывает.
   База видима (opacity:1) — анимация лишь проигрывает «from→to»,
   поэтому при выключенной анимации/ошибке ничего не прячется. */
@keyframes ar-card-in {
  from { opacity: 0; transform: translateY(22px) scale(0.986); }
  to   { opacity: 1; transform: none; }
}
@keyframes ar-rise {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: none; }
}

.hero {
  animation: ar-card-in 0.82s var(--ar-e-spring, cubic-bezier(0.32,0.72,0,1)) both;
}
.hero > * {
  animation: ar-rise 0.66s var(--ar-e-out, cubic-bezier(0.23,1,0.32,1)) both;
}
.hero > *:nth-child(1) { animation-delay: 0.16s; }
.hero > *:nth-child(2) { animation-delay: 0.24s; }
.hero > *:nth-child(3) { animation-delay: 0.32s; }
.hero > *:nth-child(4) { animation-delay: 0.40s; }
.hero > *:nth-child(5) { animation-delay: 0.48s; }

/* первый ряд контента под hero — мягко вплывает следом
   (сетки карточек НЕ трогаем — у них собственный каскад ниже) */
main > .spotlight,
main > .toolbar {
  animation: ar-rise 0.7s var(--ar-e-out, cubic-bezier(0.23,1,0.32,1)) both;
  animation-delay: 0.52s;
}

/* ====================================================
   1. HERO — масштхед «Архива» вместо неон-карточки
   ==================================================== */

/* приглушённое золото+фиолет вместо розово-синих блобов */
.hero::before {
  background: radial-gradient(circle, rgba(232, 201, 144, 0.16), transparent 70%) !important;
}
.hero::after {
  background: radial-gradient(circle, rgba(169, 107, 255, 0.13), transparent 70%) !important;
}
/* лак + тёплый хайрлайн + внутренний блик */
.hero {
  border: 1px solid var(--ar-hair) !important;
  box-shadow: 0 30px 90px -40px rgba(0, 0, 0, 0.7),
              inset 0 1px 0 rgba(246, 226, 182, 0.06) !important;
}

/* eyebrow-пилюля → золотой kicker в разрядку */
.hero-topline {
  background: rgba(232, 201, 144, 0.10) !important;
  border: 1px solid color-mix(in srgb, var(--ar-gold) 36%, transparent) !important;
  color: var(--ar-gold-2) !important;
  font-family: var(--ar-ui) !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  font-size: 11.5px !important;
}

/* титул → champagne-шиммер как вордмарк лендинга */
.hero h1 {
  background: linear-gradient(178deg, #fdf8ee 0%, #f1dcab 94%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
}

/* подзаголовок → тёплая бумага вместо холодного серого */
.hero p,
.hero-subtitle {
  color: var(--ar-muted) !important;
}

/* characters: масштхед влево — как tops/discussions (там main центрирует
   весь контент; выравниваем заголовочный блок к общему языку) */
.hunt-board-hero { text-align: left !important; }
.hunt-board-hero p { margin-left: 0 !important; margin-right: 0 !important; }

/* ====================================================
   2. СТАТЫ — «гроссбух»: золотой ярлык + серифное число
   покрываем оба набора имён (tops: .stat-* | discussions: .hero-stat-*)
   ==================================================== */
/* ряд статов как «гроссбух»: отделён золотой линией сверху */
.stats-grid,
.hero-stats {
  border-top: 1px solid var(--ar-hair) !important;
  padding-top: 22px !important;
  margin-top: 22px !important;
}
.stat-card,
.hero-stat {
  background: rgba(238, 228, 214, 0.04) !important;
  border: 1px solid var(--ar-hair) !important;
  border-radius: 18px !important;
}
.stat-label,
.hero-stat-label {
  color: var(--ar-gold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.stat-value,
.hero-stat-value {
  color: #fbf6ec !important;
  font-family: var(--ar-display) !important;
  font-weight: 420 !important;
  letter-spacing: -0.01em !important;
}

/* ====================================================
   3. КНОПКИ — единая система: primary=бренд, secondary=золото
   (.btn.primary не ловился archive.css → чиним здесь)
   ==================================================== */
.btn {
  font-family: var(--ar-ui) !important;
  border-radius: 12px !important;
  letter-spacing: 0.01em !important;
  transition: transform 0.2s var(--ar-e-out, ease),
              box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
}
/* primary-намерение: и .btn.primary, и bare .btn (news «Опубликовать»);
   secondary/disabled исключены — у них свой вид ниже */
.btn:not(.secondary):not(.disabled),
.cta-primary {
  background: var(--ar-brand) !important;
  color: #160a14 !important;
  border: 0 !important;
  font-weight: 700 !important;
  box-shadow: 0 16px 40px -16px rgba(169, 107, 255, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
.btn.secondary {
  background: rgba(238, 228, 214, 0.05) !important;
  border: 1px solid var(--ar-hair) !important;
  color: #f3ecdf !important;
}
.btn.secondary:hover {
  border-color: color-mix(in srgb, var(--ar-gold) 44%, transparent) !important;
  background: rgba(232, 201, 144, 0.10) !important;
}
.btn:hover {
  transform: translateY(-2px) !important;
  opacity: 1 !important;
}
.btn:not(.secondary):not(.disabled):hover {
  box-shadow: 0 22px 52px -18px rgba(169, 107, 255, 0.62),
              inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

/* ====================================================
   4. ЧИПЫ / РАНГИ / ПАНЕЛИ — добиваем неон → архив
   ==================================================== */
.spotlight-rank {
  background: var(--ar-brand) !important;
  color: #160a14 !important;
  box-shadow: 0 10px 26px -10px rgba(169, 107, 255, 0.45) !important;
  letter-spacing: 0.16em !important;
}

/* tops: champion-баннер лидера во всю ширину секции + отступ до сетки */
.section > .spotlight-champion {
  min-height: 360px !important;
  margin-bottom: 22px !important;
}
/* действия чемпиона не растягиваем на всю ширину баннера */
.spotlight-champion .spotlight-actions {
  max-width: 520px !important;
}
.mini-chip {
  background: rgba(232, 201, 144, 0.10) !important;
  border: 1px solid color-mix(in srgb, var(--ar-gold) 30%, transparent) !important;
  color: var(--ar-gold-2) !important;
}
.spotlight-card,
.side-box,
.section,
.stat-card {
  border-color: var(--ar-hair) !important;
}
/* боковые KPI-лейблы тоже в золото */
.side-kpi-label,
.side-box-title {
  color: var(--ar-gold) !important;
}
.side-kpi-value {
  color: #fbf6ec !important;
  font-family: var(--ar-display) !important;
}

/* ====================================================
   5. ДЕЙСТВИЯ В КАРТОЧКАХ — ясная иерархия по позиции:
   первое действие ведёт (тянется), остальные компактные.
   Позиционно → работает при любом состоянии (primary/secondary/disabled).
   Покрывает tops(.rank-actions) / discussions(.card-actions) / spotlight
   ==================================================== */
.rank-actions,
.card-actions,
.spotlight-actions {
  display: flex !important;
  gap: 10px !important;
  margin-top: auto !important;
}
.rank-actions .btn:first-child,
.card-actions .btn:first-child,
.spotlight-actions .btn:first-child {
  flex: 1 1 auto !important;   /* ведущее действие занимает ряд */
}
.rank-actions .btn:nth-child(n+2),
.card-actions .btn:nth-child(n+2),
.spotlight-actions .btn:nth-child(n+2) {
  flex: 0 0 auto !important;   /* вторичные — по содержимому */
}
/* disabled — явно инертный, без клика */
.btn.disabled,
.btn[aria-disabled="true"] {
  background: rgba(238, 228, 214, 0.04) !important;
  border: 1px solid var(--ar-hair) !important;
  color: var(--ar-soft) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ====================================================
   6. CHARACTERS — лейбл-действие .waifu-action как явный CTA
   (карточка кликается целиком; CTA даёт понятный аффорданс)
   ==================================================== */
.waifu-action {
  background: var(--ar-brand) !important;
  color: #160a14 !important;
  box-shadow: 0 14px 34px -14px rgba(169, 107, 255, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  border-radius: 12px !important;
  letter-spacing: 0.01em !important;
  transition: transform 0.2s var(--ar-e-out, ease), box-shadow 0.2s ease !important;
}
.waifu-card:hover .waifu-action { transform: translateY(-1px); }
.waifu-action.is-locked {
  background: rgba(238, 228, 214, 0.05) !important;
  border: 1px solid var(--ar-hair) !important;
  color: var(--ar-muted) !important;
  box-shadow: none !important;
}

/* ====================================================
   7. ТУЛБАР — фильтры как сегмент-контрол + поле поиска
   (бар в лаке, активный фильтр на бренде вместо неона)
   ==================================================== */
.toolbar {
  align-items: center !important;
  padding: 12px 14px !important;
  border: 1px solid var(--ar-hair) !important;
  border-radius: 18px !important;
  background: rgba(238, 228, 214, 0.03) !important;
  backdrop-filter: blur(10px) !important;
}
.filter-btn {
  border: 1px solid var(--ar-hair) !important;
  background: rgba(238, 228, 214, 0.04) !important;
  color: var(--ar-muted) !important;
  font-family: var(--ar-ui) !important;
  font-weight: 600 !important;
  letter-spacing: 0.015em !important;
  padding: 9px 14px !important;
}
.filter-btn:hover {
  background: rgba(232, 201, 144, 0.10) !important;
  color: #f3ecdf !important;
  border-color: color-mix(in srgb, var(--ar-gold) 30%, transparent) !important;
}
.filter-btn.active {
  background: var(--ar-brand) !important;
  border-color: transparent !important;
  color: #160a14 !important;
  box-shadow: 0 10px 26px -12px rgba(169, 107, 255, 0.5) !important;
}
.search-box input {
  border: 1px solid var(--ar-hair) !important;
  background: rgba(238, 228, 214, 0.05) !important;
  color: var(--ar-paper) !important;
  font-family: var(--ar-ui) !important;
  border-radius: 14px !important;
}
.search-box input::placeholder { color: var(--ar-soft) !important; }
.search-box input:focus {
  border-color: color-mix(in srgb, var(--ar-gold) 55%, transparent) !important;
  box-shadow: 0 0 0 3px rgba(232, 201, 144, 0.14) !important;
  outline: none !important;
}

/* ====================================================
   8. ЗАГОЛОВКИ СЕКЦИЙ — серифный champagne-титул, ровный baseline
   ==================================================== */
.section-head { align-items: flex-end !important; }
.section-title {
  background: linear-gradient(178deg, #fdf8ee, #f1dcab 96%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
}
.section-subtitle { color: var(--ar-muted) !important; }

/* ====================================================
   9. КАРТОЧКИ — базовый хайрлайн (rarity-цвета НЕ трогаем),
   монета золотом, мягкий каскад «раздачи» при загрузке данных
   ==================================================== */
.rank-card:not(.legendary):not(.epic):not(.rare),
.discussion-card:not(.legendary):not(.epic):not(.rare),
.waifu-card.common {
  border-color: var(--ar-hair) !important;
}
.coin-badge {
  color: var(--ar-gold-2) !important;
  border-color: color-mix(in srgb, var(--ar-gold) 28%, transparent) !important;
  background: rgba(232, 201, 144, 0.12) !important;
}
.waifu-card,
.rank-card,
.discussion-card {
  animation: ar-rise 0.56s var(--ar-e-out, cubic-bezier(0.23,1,0.32,1)) both;
}
.waifu-card:nth-child(1), .rank-card:nth-child(1), .discussion-card:nth-child(1) { animation-delay: 0.04s; }
.waifu-card:nth-child(2), .rank-card:nth-child(2), .discussion-card:nth-child(2) { animation-delay: 0.10s; }
.waifu-card:nth-child(3), .rank-card:nth-child(3), .discussion-card:nth-child(3) { animation-delay: 0.16s; }
.waifu-card:nth-child(4), .rank-card:nth-child(4), .discussion-card:nth-child(4) { animation-delay: 0.22s; }
.waifu-card:nth-child(5), .rank-card:nth-child(5), .discussion-card:nth-child(5) { animation-delay: 0.28s; }
.waifu-card:nth-child(6), .rank-card:nth-child(6), .discussion-card:nth-child(6) { animation-delay: 0.34s; }
.waifu-card:nth-child(n+7), .rank-card:nth-child(n+7), .discussion-card:nth-child(n+7) { animation-delay: 0.40s; }

/* ====================================================
   10. NEWS — беспоук-компоненты ленты в язык «Архива»
   (FAB-«+», тогглы создателя, kicker карточки, медиа-чипы,
   pptx-навигация; owner-баннер намеренно не трогаем — кросс-алерт)
   ==================================================== */
.news-plus-btn {
  background: var(--ar-brand) !important;
  color: #160a14 !important;
  box-shadow: 0 14px 32px -12px rgba(169, 107, 255, 0.5) !important;
}
.news-mode-btn.active {
  background: var(--ar-brand) !important;
  border-color: transparent !important;
  color: #160a14 !important;
  box-shadow: 0 10px 24px -12px rgba(169, 107, 255, 0.45) !important;
}
.news-card-kicker {
  background: rgba(232, 201, 144, 0.10) !important;
  border: 1px solid color-mix(in srgb, var(--ar-gold) 32%, transparent) !important;
  color: var(--ar-gold-2) !important;
  letter-spacing: 0.18em !important;
}
.news-media-chip {
  background: rgba(232, 201, 144, 0.10) !important;
  border: 1px solid color-mix(in srgb, var(--ar-gold) 26%, transparent) !important;
  color: var(--ar-gold-2) !important;
}
.news-creator-block,
.news-pptx-toolbar {
  border-color: var(--ar-hair) !important;
}
.news-pptx-nav {
  border: 1px solid var(--ar-hair) !important;
  background: rgba(238, 228, 214, 0.05) !important;
  color: var(--ar-gold-2) !important;
}
.news-pptx-nav:hover {
  background: rgba(232, 201, 144, 0.10) !important;
  border-color: color-mix(in srgb, var(--ar-gold) 38%, transparent) !important;
}

/* ---------- reduced-motion: весь вход выключаем, всё видимо ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero,
  .hero > *,
  main > .spotlight,
  main > .toolbar,
  .waifu-card,
  .rank-card,
  .discussion-card {
    animation: none !important;
  }
}