/* ============================================================
   mongol-kino · Design System v2 — Liquid Glass
   Brand lane: Apple visionOS + cinematic dashboard
   Authoritative source: PRODUCT.md + DESIGN.md
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400&family=Noto+Sans+SC:wght@200;300;400;500;600;700&family=Noto+Serif+SC:wght@200;300;400;500;600&family=Source+Serif+4:ital,wght@0,200;0,300;0,400;0,500;0,600;1,400&display=swap');

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
  /* ---- Environment (Klein blue · Midnight Indigo) ---- */
  --ink-deep:    #0a0a22;          /* deep saturated indigo, Klein blue */
  --ink-canvas:  #14123a;           /* slightly raised */
  --ink-veil:    #1d1c4a;           /* hover surfaces */

  /* Warm orange-red glow on Klein blue — hue shifted toward orange (mixes to warm brown, not purple) */
  --ambient-plum:  rgba(220, 80, 45, 0.42);     /* warm cinema orange-red, top-right */
  --ambient-spot:  rgba(180, 65, 35, 0.30);     /* deeper orange-red echo, bottom-left */

  /* ---- Cream (text) ---- */
  --cream-warm:  #f4ede3;           /* primary text, never #fff */
  --cream-soft:  #d4cabb;           /* secondary text */
  --cream-muted: #8c847a;           /* tertiary / labels */

  /* ---- Pearl Cream (accent — warm cream, used only for small details) ---- */
  --ember:       #f4ecd8;           /* primary accent: warm pearl cream, tiny dots/eyebrow only */
  --ember-deep:  #d4c8a8;           /* hover deeper cream */
  --ember-glow:  rgba(244, 236, 216, 0.28);

  /* ---- Functional ---- */
  --rust-error:  #d3604a;
  --moss-ok:     #7a9264;

  /* ---- Liquid Glass tokens ---- */
  /* Dark glass — indigo-tilted, harmonizes with Klein blue canvas */
  --glass-tint:        rgba(20, 18, 50, 0.55);
  --glass-tint-strong: rgba(14, 12, 38, 0.78);
  --glass-tint-light:  rgba(34, 30, 68, 0.45);

  /* Glass edges — top highlight, bottom shadow, side hairline */
  --glass-edge-top:    rgba(255, 240, 220, 0.14);
  --glass-edge-bottom: rgba(0, 0, 0, 0.45);
  --glass-edge-side:   rgba(255, 240, 220, 0.06);

  /* Glass blur amounts */
  --glass-blur-soft:   blur(16px) saturate(140%);
  --glass-blur-mid:    blur(24px) saturate(160%);
  --glass-blur-strong: blur(40px) saturate(180%);

  /* Glass shadows (multi-layer for depth) */
  --glass-lift-low:
    inset 0 1px 0 0 var(--glass-edge-top),
    inset 0 -1px 0 0 var(--glass-edge-bottom),
    0 8px 24px -4px rgba(0, 0, 0, 0.45);
  --glass-lift-mid:
    inset 0 1px 0 0 var(--glass-edge-top),
    inset 0 -1px 0 0 var(--glass-edge-bottom),
    0 16px 40px -8px rgba(0, 0, 0, 0.6);
  --glass-lift-high:
    inset 0 1.5px 0 0 var(--glass-edge-top),
    inset 0 -1px 0 0 var(--glass-edge-bottom),
    0 32px 64px -16px rgba(0, 0, 0, 0.75);

  /* ---- Type families ---- */
  --font-serif: 'Source Serif 4', 'Noto Serif SC', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* ---- Type scale ---- */
  --t-display-size:   clamp(2.5rem, 6vw, 4.5rem);
  --t-display-line:   1.0;
  --t-headline-size:  clamp(1.5rem, 3vw, 2.25rem);
  --t-headline-line:  1.1;
  --t-title-size:     1.125rem;
  --t-title-line:     1.3;
  --t-body-size:      1rem;
  --t-body-line:      1.6;
  --t-label-size:     0.6875rem;
  --t-label-line:     1.4;
  --t-label-track:    0.12em;

  /* ---- Spacing ---- */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  32px;
  --sp-xl:  64px;
  --sp-xxl: 128px;

  /* ---- Radii (Liquid Glass uses softer corners) ---- */
  --r-tile: 14px;
  --r-card: 18px;
  --r-pill: 999px;

  /* ---- Motion ---- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-state:      200ms;
  --dur-page:       320ms;
  --dur-cinematic:  480ms;

  /* ---- Layout ---- */
  --max-readable: 65ch;
  --nav-h: 60px;
}

/* ============================================================
   2. Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  background-color: var(--ink-deep);
  color: var(--cream-warm);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--t-body-line);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  background-color: var(--ink-deep);
  /* Mongolian-dusk multi-point ambient gradient.
     Three soft radial light sources create varied refraction zones for Liquid Glass. */
  /* LARGER orange-red mesh on Klein blue — bigger ellipses, warmer hue */
  background-image:
    radial-gradient(ellipse 115vw 90vh at 105% -10%, var(--ambient-plum) 0%, transparent 70%),
    radial-gradient(ellipse 115vw 80vh at -10% 110%, var(--ambient-spot) 0%, transparent 70%),
    linear-gradient(180deg, #0a0a22 0%, #0d0c2c 50%, #06061a 100%);
  background-attachment: fixed;
  color: var(--cream-warm);
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
}

/* CJK optical compensation */
html[lang="zh"], html[lang^="zh-"] {
  font-size: calc(16px * 0.92);
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: none; cursor: pointer; padding: 0; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-state) var(--ease-out-quart);
}

::selection { background: var(--ember); color: var(--ink-deep); }
::-moz-selection { background: var(--ember); color: var(--ink-deep); }
::placeholder { color: var(--cream-muted); opacity: 1; }

/* Subtle warm scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(140, 132, 122, 0.18);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--ember-glow); }

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   3. Typography utilities
   ============================================================ */
.t-display {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--t-display-size);
  line-height: var(--t-display-line);
  letter-spacing: -0.02em;
}
:lang(zh) .t-display, :lang(zh-CN) .t-display {
  font-family: var(--font-sans);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.t-headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--t-headline-size);
  line-height: var(--t-headline-line);
  letter-spacing: -0.01em;
}
:lang(zh) .t-headline, :lang(zh-CN) .t-headline {
  font-family: var(--font-sans);
  font-weight: 400;
}

.t-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-title-size);
  line-height: var(--t-title-line);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  max-width: var(--max-readable);
}

.t-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-label-size);
  line-height: var(--t-label-line);
  letter-spacing: var(--t-label-track);
  text-transform: uppercase;
}
:lang(zh) .t-label, :lang(zh-CN) .t-label {
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 0.75rem;
}

.t-mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1;
}

/* ============================================================
   4. Liquid Glass primitives
   ============================================================ */

/* Base glass surface — the foundation everything else extends */
.glass {
  background: var(--glass-tint);
  -webkit-backdrop-filter: var(--glass-blur-mid);
  backdrop-filter: var(--glass-blur-mid);
  border: 1px solid var(--glass-edge-side);
  border-radius: var(--r-card);
  box-shadow: var(--glass-lift-low);
  position: relative;
  /* Edge highlight via ::before — the specular "rim light" */
}

.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 240, 220, 0.08) 0%,
    rgba(255, 240, 220, 0.0) 30%,
    rgba(0, 0, 0, 0.0) 70%,
    rgba(0, 0, 0, 0.18) 100%
  );
  mix-blend-mode: overlay;
}

/* Stronger glass — for primary chrome (nav, hero card) */
.glass--strong {
  background: var(--glass-tint-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  box-shadow: var(--glass-lift-mid);
}

/* Lighter glass — for floating tiles, hover states */
.glass--light {
  background: var(--glass-tint-light);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  box-shadow: var(--glass-lift-low);
}

/* Tile — for posters and content cards */
.glass-tile {
  background: var(--glass-tint-light);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  border: 1px solid var(--glass-edge-side);
  border-radius: var(--r-tile);
  box-shadow: var(--glass-lift-low);
  overflow: hidden;
  position: relative;
  transition: transform var(--dur-state) var(--ease-out-quart),
              box-shadow var(--dur-cinematic) var(--ease-out-quart);
}

.glass-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--glass-lift-mid);
  border-color: var(--glass-edge-top);
}

/* Strip — for nav, utility bars */
.glass-strip {
  background: var(--glass-tint-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
  border-bottom: 1px solid var(--glass-edge-side);
  box-shadow:
    inset 0 1px 0 0 var(--glass-edge-top),
    0 1px 0 0 var(--glass-edge-bottom);
}

/* ============================================================
   5. Performance fallback — no Liquid Glass
   Triggered by:
   - JS detection adding .no-liquid-glass to <html>
   - User preference: prefers-reduced-transparency
   ============================================================ */
.no-liquid-glass .glass,
.no-liquid-glass .glass--strong,
.no-liquid-glass .glass--light,
.no-liquid-glass .glass-tile,
.no-liquid-glass .glass-strip {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.no-liquid-glass .glass { background: rgba(28, 22, 16, 0.92); }
.no-liquid-glass .glass--strong { background: rgba(15, 10, 6, 0.96); }
.no-liquid-glass .glass--light { background: rgba(48, 38, 28, 0.85); }
.no-liquid-glass .glass-tile { background: rgba(28, 22, 16, 0.85); }
.no-liquid-glass .glass-strip { background: rgba(15, 10, 6, 0.94); }

@media (prefers-reduced-transparency: reduce) {
  .glass, .glass--strong, .glass--light, .glass-tile, .glass-strip {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .glass { background: rgba(28, 22, 16, 0.94); }
  .glass--strong { background: rgba(15, 10, 6, 0.96); }
  .glass--light { background: rgba(48, 38, 28, 0.88); }
  .glass-tile { background: rgba(28, 22, 16, 0.88); }
  .glass-strip { background: rgba(15, 10, 6, 0.96); }
}

/* ============================================================
   6. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .glass-tile:hover { transform: none; }
}

/* ============================================================
   7. Buttons — Liquid Glass + Solid variants
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: 12px 28px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-label-size);
  line-height: var(--t-label-line);
  letter-spacing: var(--t-label-track);
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--dur-state) var(--ease-out-quart),
              color var(--dur-state) var(--ease-out-quart),
              border-color var(--dur-state) var(--ease-out-quart),
              transform var(--dur-state) var(--ease-out-quart);
}
:lang(zh) .btn, :lang(zh-CN) .btn {
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 0.8125rem;
}

/* Primary — solid ember (the warm CTA) */
.btn--primary {
  background: var(--ember);
  color: var(--ink-deep);
  border-color: var(--ember);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 180, 0.4),
    0 4px 16px -4px var(--ember-glow);
}
.btn--primary:hover {
  background: var(--ember-deep);
  border-color: var(--ember-deep);
  transform: translateY(-1px);
}

/* Glass — Liquid Glass button */
.btn--glass {
  background: var(--glass-tint-light);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  color: var(--cream-warm);
  border-color: var(--glass-edge-side);
  box-shadow:
    inset 0 1px 0 0 var(--glass-edge-top),
    inset 0 -1px 0 0 var(--glass-edge-bottom);
}
.btn--glass:hover {
  background: var(--glass-tint);
  border-color: var(--glass-edge-top);
  color: var(--ember);
}

/* Ghost — flat outline */
.btn--ghost {
  background: transparent;
  color: var(--cream-soft);
  border-color: var(--cream-muted);
}
.btn--ghost:hover {
  color: var(--ember);
  border-color: var(--ember);
}

/* ============================================================
   8. Inputs
   ============================================================ */
.input {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: var(--glass-tint-light);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  color: var(--cream-warm);
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  border: 1px solid var(--glass-edge-side);
  border-radius: var(--r-tile);
  transition: border-color var(--dur-state) var(--ease-out-quart),
              background var(--dur-state) var(--ease-out-quart);
}
.input:focus {
  outline: none;
  border-color: var(--ember);
  background: var(--glass-tint);
}
.input--error { border-color: var(--rust-error); }

/* ============================================================
   9. Container
   ============================================================ */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--sp-md);
}
@media (min-width: 768px) {
  .container { padding: 0 var(--sp-lg); }
}

/* ============================================================
   10. Visually hidden (a11y)
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   11. Per-language micro-adjustments
   ============================================================
   Cyrillic (ru / mn) and Chinese have different metrics from Latin.
   These tweaks fix small visual quirks without overriding layout.
*/

/* — Cyrillic (Russian, Mongolian Cyrillic) — */
:lang(ru) .hero-kicker,
:lang(mn) .hero-kicker,
:lang(ru) .panel-badge,
:lang(mn) .panel-badge,
:lang(ru) .nav-group-label,
:lang(mn) .nav-group-label,
:lang(ru) .page-kicker,
:lang(mn) .page-kicker,
:lang(ru) .wish-reply-label,
:lang(mn) .wish-reply-label,
:lang(ru) .wish-fulfill-label,
:lang(mn) .wish-fulfill-label {
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}

/* Status pills — keep nominal size in Cyrillic (slightly wider chars) */
:lang(ru) .tag,
:lang(mn) .tag,
:lang(ru) .wish-badge,
:lang(mn) .wish-badge,
:lang(ru) .summary-strip .summary-label,
:lang(mn) .summary-strip .summary-label {
  letter-spacing: 0 !important;
}

/* Mono numerals stay LCD-locked even when language switches */
:lang(ru) [class*="mono"],
:lang(mn) [class*="mono"],
:lang(ru) .vote-count,
:lang(mn) .vote-count,
:lang(ru) .package-price,
:lang(mn) .package-price,
:lang(ru) .price-amount,
:lang(mn) .price-amount,
:lang(ru) .kpi-value,
:lang(mn) .kpi-value {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace !important;
  font-feature-settings: 'tnum' 1;
}

/* Cyrillic serif headings often look heavier — keep weight at 400 */
:lang(ru) h1, :lang(mn) h1,
:lang(ru) .hero-title, :lang(mn) .hero-title,
:lang(ru) .panel-title, :lang(mn) .panel-title,
:lang(ru) .pricing-name, :lang(mn) .pricing-name,
:lang(ru) .summary-value, :lang(mn) .summary-value {
  font-weight: 400 !important;
  letter-spacing: -0.005em !important;
}

/* Mongolian Cyrillic special chars (ө / ү / ё) — Inter renders fine,
   but bump line-height slightly for descender clearance */
:lang(mn) p, :lang(mn) li, :lang(mn) .legal-text {
  line-height: 1.7 !important;
}

/* Russian text is ~30% wider than English — give wish-banner / nav buttons
   a touch more padding so labels never collide */
:lang(ru) .nav-link,
:lang(ru) .nav-vip,
:lang(mn) .nav-link,
:lang(mn) .nav-vip {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* Chinese fullwidth punctuation has built-in spacing — reset letter-spacing */
:lang(zh) .hero-kicker,
:lang(zh) .panel-badge,
:lang(zh) .nav-group-label,
:lang(zh) .page-kicker {
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}