/* assets/css/main.css — shared design system (Stage 3: tokens, fonts, header/nav, theme).
   Loaded after css/shared-features.css so its :root tokens win the cascade. */

/* ── SELF-HOSTED FONTS ─────────────────────────────────────────
   Standard Google Fonts unicode-range subsets so the browser picks the
   right file per character (Qaraqalpaq diacritics + RU/KZ Cyrillic). */
@font-face {
  font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/pt-serif-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/pt-serif-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/pt-serif-cyrillic-400-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/pt-serif-cyrillic-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/pt-serif-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/pt-serif-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/pt-serif-cyrillic-700-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/pt-serif-cyrillic-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'PT Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/pt-sans-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PT Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/pt-sans-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'PT Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/pt-sans-cyrillic-400-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/pt-sans-cyrillic-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'PT Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/pt-sans-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PT Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/pt-sans-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'PT Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/pt-sans-cyrillic-700-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/pt-sans-cyrillic-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* ── DESIGN TOKENS ──────────────────────────────────────────────
   Palette rooted in images/uru.jpg (tamga chart red/indigo blocks) and
   images/naqsh.jpg (red meander ornament) — warm ink, not a generic dark-UI
   blue-black. html.light-theme (set pre-paint by theme-init.js) swaps them
   before first render, so there is no flash. */
:root {
  --color-bg: #171310;
  --color-bg-2: #1d1712;
  --color-surface: #221d18;
  --color-ink: #ede6da;
  --color-ink-dim: #b9ab95;
  --color-accent: #a6321e;
  --color-accent-2: #2c3e6b;
  --color-border: #3a3226;

  --font-heading: 'PT Serif', Georgia, serif;
  --font-body: 'PT Sans', "Segoe UI", Tahoma, sans-serif;

  --step--1: clamp(0.8rem, 0.77rem + 0.14vw, 0.89rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.19rem + 0.31vw, 1.42rem);
  --step-2:  clamp(1.56rem, 1.47rem + 0.47vw, 1.78rem);
  --step-3:  clamp(1.95rem, 1.82rem + 0.68vw, 2.25rem);
  --step-4:  clamp(2.44rem, 2.24rem + 1vw, 2.83rem);

  --radius-sm: 8px;
  --radius-md: 14px;
  --shadow-card: 0 8px 24px rgba(166, 50, 30, 0.18);

  --dur-fast: 180ms;
  --dur-med: 480ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

html.light-theme {
  --color-bg: #f1e9da;
  --color-bg-2: #ece2cf;
  --color-surface: #e8dfcc;
  --color-ink: #221d18;
  --color-ink-dim: #5c5140;
  --color-accent: #8f2a1a;
  --color-accent-2: #2c3e6b;
  --color-border: #d8cbae;
}

/* ── TYPOGRAPHY / BASE ──────────────────────────────────────────
   Overrides the old inline Segoe-UI body rule (later in cascade order). */
body {
  font-family: var(--font-body);
  scroll-behavior: smooth;
}
h1, h2, h3, .logo a, .info-title { font-family: var(--font-heading); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── HEADER: compress on scroll ─────────────────────────────────
   .header--compact toggled by assets/js/main.js past a scroll threshold. */
header {
  transition: height var(--dur-med) var(--ease-out), padding var(--dur-med) var(--ease-out),
              background var(--dur-med) var(--ease-out);
}
header.header--compact {
  height: 52px;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  backdrop-filter: blur(14px);
  background: rgba(10, 8, 6, 0.85);
}
html.light-theme header.header--compact { background: rgba(241, 233, 218, 0.88); }

/* ── NAV: animated underline on active item ─────────────────────*/
.view-switch .view-btn { position: relative; }
.view-switch .view-btn::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 2px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.view-switch .view-btn.active::after { transform: scaleX(1); }

/* ── LANGUAGE SWITCHER: segmented control ─────────────────────── */
.lang-switch {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 3px;
  border-left: none !important;
  gap: 2px !important;
}
html.light-theme .lang-switch { background: rgba(0, 0, 0, 0.05); }
.lang-switch .lang-btn1,
.lang-switch .lang-btn {
  border-radius: 999px !important;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lang-switch .lang-btn.active,
.lang-switch .lang-btn1.active {
  background: var(--color-accent) !important;
  border-color: transparent !important;
}

/* ── THEME TOGGLE: sun/moon crossfade ────────────────────────── */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.theme-toggle-btn .qq-theme-icon {
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
}
.theme-toggle-btn .qq-theme-icon svg { display: block; transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }

/* ── BACK-TO-TOP (injected by main.js on pages without one) ───── */
.qq-back-to-top {
  position: fixed;
  right: 24px;
  bottom: 30px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--color-accent);
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  z-index: 9999;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.qq-back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ── ORNAMENTAL DIVIDER (naqsh.jpg meander motif) ───────────────
   Usage: <div class="qq-divider"></div> instead of <hr>. */
.qq-divider {
  height: 18px;
  margin: 24px 0;
  opacity: 0.55;
  background-repeat: repeat-x;
  background-position: center;
  background-size: 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 1l3.5 3.5L9 8 5.5 4.5 9 1zm0 9l3.5 3.5L9 17l-3.5-3.5L9 10z' fill='none' stroke='%23a6321e' stroke-width='1.4'/%3E%3C/svg%3E");
}

/* ── STAGE 4: CROSS-PAGE VIEW TRANSITIONS ────────────────────────
   MPA navigation crossfade — no JS needed, browser handles it. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur-med);
  animation-timing-function: var(--ease-out);
}

/* ── STAGE 4: HEADER ENTRANCE ─────────────────────────────────── */
@keyframes qq-fade-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
header .logo,
header .view-switch,
header .lang-switch {
  animation: qq-fade-down var(--dur-med) var(--ease-out) both;
}
header .view-switch { animation-delay: 60ms; }
header .lang-switch { animation-delay: 120ms; }

/* ── STAGE 4: SCROLL REVEAL (classes toggled by assets/js/main.js) ── */
.qq-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.qq-reveal.qq-in {
  opacity: 1;
  transform: none;
}

/* ── STAGE 4: STAT COUNTERS (animated by assets/js/main.js) ─────── */
.kpi-value { font-variant-numeric: tabular-nums; }

/* ── STAGE 4: TAMGA SVG ENTRANCE ──────────────────────────────────
   Runs automatically whenever renderTamgaSVG() inserts one — a plain
   CSS animation fires on insertion, no observer/JS hook needed. */
@keyframes qq-scale-in {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
.tamga-svg-wrap {
  animation: qq-scale-in var(--dur-med) var(--ease-out) both;
}

/* ── STAGE 4: TREE NODE MICRO-INTERACTION (schemeQQ/RU/KZ, D3 SVG) ── */
svg#treeSvg .node rect {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out), stroke var(--dur-fast) var(--ease-out);
}
svg#treeSvg .node:hover rect {
  transform: scale(1.045);
}

/* ── STAGE 4: EXOGAMY RESULT PANEL VERDICT POP ───────────────────── */
@keyframes qq-pop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
.result-panel {
  transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.result-panel:not(.pending) .result-icon {
  animation: qq-pop var(--dur-med) var(--ease-out);
}

/* ── REDUCED MOTION ─────────────────────────────────────────────
   Brief requirement: prefers-reduced-motion disables all animation. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}