/*
 * FOCUS AI Global Theme — v1.0
 * Gold luxury palette
 * Yagona dizayn tizimi — barcha sahifalar shu fayldan ranglarni oladi
 */

/* Fonts — load early */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&family=Anton&display=swap');

:root {
  /* === CORE PALETTE === */
  --bg: #0a0a0a;
  --bg-soft: #14140f;
  --card-bg: #16161a;
  --card-bg-elevated: #1c1c20;

  --accent: #F4845F;
  --accent-bright: #F79B7F;
  --accent-deep: #D9663C;
  --accent-gradient: linear-gradient(135deg, var(--accent), var(--accent-deep));

  --text: #f5f5f5;
  --text-dim: #888;
  --text-faint: #555;

  /* === SEMANTIC TRANSPARENT VARIANTS === */
  --accent-soft: rgba(244, 132, 95, 0.10);
  --accent-medium: rgba(244, 132, 95, 0.25);
  --accent-strong: rgba(244, 132, 95, 0.45);
  --accent-glow: rgba(247, 155, 127, 0.55);

  --border-subtle: rgba(245, 245, 245, 0.06);
  --border-default: rgba(245, 245, 245, 0.10);
  --border-strong: rgba(244, 132, 95, 0.30);

  --overlay-light: rgba(0, 0, 0, 0.4);
  --overlay-strong: rgba(0, 0, 0, 0.7);

  /* === LEGACY ALIASES (so old code doesn't break during migration) === */
  --void: var(--bg);
  --void-soft: var(--bg-soft);
  --card: var(--card-bg);
  --text-mid: var(--text-dim);

  /* === SHAPE === */
  --radius: 20px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* === TYPOGRAPHY === */
  --font-heading: 'Anton', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* === MOTION === */
  --ease-enter: cubic-bezier(0.16, 0.84, 0.32, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-celebrate: cubic-bezier(0.16, 1.04, 0.32, 1);

  --dur-quick: 160ms;
  --dur-normal: 240ms;
  --dur-slow: 400ms;
}

/* === YORUG' (LIGHT) PALITRA — Sozlamalardagi tugma bilan yoqiladi === */
:root[data-theme="light"] {
  --bg: #f3f4f7;
  --bg-soft: #ffffff;
  --card-bg: #ffffff;
  --card-bg-elevated: #ffffff;

  --text: #15171c;
  --text-dim: #5b6068;
  --text-faint: #9aa0aa;

  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-default: rgba(0, 0, 0, 0.12);

  --overlay-light: rgba(0, 0, 0, 0.22);
  --overlay-strong: rgba(0, 0, 0, 0.45);

  /* Sahifalar lokal nomlarni qattiq yozadi (--void:#04060B...) — yorug'da ham majburan almashtirish */
  --void: #f3f4f7;
  --void-soft: #ffffff;
  --card: #ffffff;
  --text-mid: #5b6068;
}
/* Yorug' rejim — sahifalar qattiq yozgan qora fon/oq-chiziq ranglarni ham almashtirish */
:root[data-theme="light"] body,
:root[data-theme="light"] .phone,
:root[data-theme="light"] .wrap,
:root[data-theme="light"] .container { background: #f3f4f7 !important; color: #15171c; }
:root[data-theme="light"] .phone { box-shadow: 0 0 0 8px #e2e5ea, 0 30px 80px rgba(0,0,0,.18) !important; }

/* KENG EKRAN (>480px: planshet/desktop): kulrang "telefon maketi" ramkasi olib tashlandi.
   App o'z foni ustida markazда, ramkasiz/soyasiz — toza ko'rinish (cho'zilmaydi -> buzilmaydi).
   Telefonда (<=480px) har sahifa o'zining to'liq-ekran qoidasini ishlatadi. */
@media (min-width: 481px) {
  body { padding: 0 !important; }
  .phone,
  :root[data-theme="light"] .phone,
  :root[data-theme="dark"] .phone {
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 100vh !important;
  }
  /* Intro va boshqa to'liq-ekran (#stage) sahifalar keng ekranда cho'zilib chala chiqmasin */
  #stage { max-width: 440px !important; margin: 0 auto !important; }
}
/* Tema almashganda yumshoq o'tish */
html, body { transition: background 0.3s ease, color 0.3s ease; }

/* === YORUG' REJIM — tepa navigatsiya + til tugmalari moslashadi (aks holda qora qoladi) === */
:root[data-theme="light"] #globalNavCaps {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
}
:root[data-theme="light"] #globalBackBtn,
:root[data-theme="light"] #globalMenuBtn {
  color: #15171c !important;
}
/* Sarlavhalar ihcham (juda katta/qo'pol emas) */
.question, .title { font-size: clamp(24px, 6vw, 36px) !important; }
:root[data-theme="light"] .seq-btn {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.14);
  color: #15171c;
}
:root[data-theme="light"] .seq-btn:active { background: rgba(0, 0, 0, 0.06); }
:root[data-theme="light"] .seq-progress-meta { color: #5b6068; }
:root[data-theme="light"] .seq-progress-meta .pos { color: #15171c; }
:root[data-theme="light"] .seq-progress { background: rgba(0, 0, 0, 0.10); }
:root[data-theme="light"] .lang-switcher__btn {
  background: rgba(0, 0, 0, 0.04);
  color: #15171c;
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}
:root[data-theme="light"] .phone .bottom-bar {
  background: linear-gradient(180deg, transparent, #f3f4f7 30%) !important;
}
:root[data-theme="light"] .page-cta-bar {
  background: linear-gradient(180deg, transparent, #f3f4f7 40%) !important;
}

/* === BASE STYLES === */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === KREATIV ATMOSFERA — har ekranda yumshoq rang nuri (ekran rangida) === */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(90% 50% at 50% -6%, var(--accent-medium), transparent 60%),
    radial-gradient(75% 55% at 105% 102%, var(--accent-soft), transparent 55%);
  animation: dwGlow 9s ease-in-out infinite;
}
/* Nozik nafas — atmosfera nuri sekin jonlanadi */
@keyframes dwGlow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
/* Katta gradient sarlavhalar uchun sekin shimmer */
@keyframes dwShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
/* Kreativ — kontent yumshoq ko'tarilib chiqadi (premium kirish, minimal) */
@keyframes dwEnter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.wrap, .phone .container { animation: dwEnter 0.5s cubic-bezier(0.16, 0.84, 0.32, 1) both; }
@media (prefers-reduced-motion: reduce) { .wrap, .phone .container { animation: none !important; } }

/* ── Scroll-reveal / stagger (PRO, minimal) — reveal.js faollashtiradi ──
   JS'siz YOKI reduced-motion: hech narsa yashirilmaydi, eski dwEnter qoladi (kontent doim ko'rinadi).
   Faqat html.mvw-reveal-on bo'lganda ishlaydi -> mvw-reveal elementlar avval yashirin, mvw-in bilan paydo bo'ladi. */
html.mvw-reveal-on .wrap,
html.mvw-reveal-on .phone .container { animation: none; }   /* kirishni stagger boshqaradi, blok dwEnter emas */
html.mvw-reveal-on .mvw-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.34s cubic-bezier(0.16, 0.84, 0.32, 1),
              transform 0.34s cubic-bezier(0.16, 0.84, 0.32, 1);
  will-change: opacity, transform;
}
html.mvw-reveal-on .mvw-reveal.mvw-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.mvw-reveal-on .mvw-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* .phone ekranlar (home...) — fon ustiga rang nuri */
.phone {
  background-image: radial-gradient(95% 42% at 50% 0%, var(--accent-medium), transparent 58%) !important;
  background-repeat: no-repeat !important;
}

/* Sarlavhalar — qalin siqilgan KATTA HARF (Anton), referensga mos. Indigo gradient emas — oq/qora */
h1, h2, h3, h4, h5, h6,
.heading, .title, .question, .big {
  font-family: 'Anton', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.06;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text) !important;
  animation: none !important;
}

/* Selection styling — gold */
::selection {
  background: rgba(244, 132, 95, 0.35);
  color: var(--text);
}

/* Focus visible — gold ring */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* === UTILITY CLASSES === */
.text-accent { color: var(--accent); }
.text-accent-bright { color: var(--accent-bright); }
.text-dim { color: var(--text-dim); }
.bg-card { background: var(--card-bg); }
.gradient-gold { background: var(--accent-gradient); }
.gradient-gold-text {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Italic serif emphasis */
.serif-italic {
  font-family: var(--font-heading);
  font-style: normal;
}

/* === LANGUAGE SWITCHER === */
.lang-switcher {
  position: fixed;
  top: max(20px, env(safe-area-inset-top, 20px));
  right: 20px;
  z-index: 9999;
  font-family: var(--font-body);
}
.lang-switcher__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  min-height: 38px;
  background: rgba(244, 132, 95, 0.10);
  color: var(--accent-bright);
  border: 1.5px solid rgba(244, 132, 95, 0.35);
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-quick) ease, border-color var(--dur-quick) ease, color var(--dur-quick) ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.lang-switcher__btn:hover,
.lang-switcher__btn:focus-visible {
  background: rgba(244, 132, 95, 0.18);
  border-color: rgba(244, 132, 95, 0.55);
  outline: none;
}
.lang-switcher__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.lang-switcher__code {
  letter-spacing: 0.22em;
}
.lang-switcher__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  padding: 6px;
  background: var(--card-bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  display: none;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dur-quick) ease, transform var(--dur-quick) ease;
}
.lang-switcher--open .lang-switcher__menu {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
.lang-switcher__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 18px;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-quick) ease;
}
.lang-switcher__item:hover,
.lang-switcher__item:focus-visible {
  background: rgba(244, 132, 95, 0.10);
  outline: none;
}
.lang-switcher__item.is-active {
  background: rgba(244, 132, 95, 0.16);
  color: var(--accent-bright);
}
.lang-switcher__item-code {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  min-width: 28px;
}
.lang-switcher__item.is-active .lang-switcher__item-code {
  color: var(--accent-bright);
}
.lang-switcher__item-name {
  font-size: 18px;
  font-weight: 500;
  color: inherit;
}

/* === INTERAKTIV TUGMALAR — "Magnit ko'tarilish" + shakl o'zgarishi (pill + squish) === */
button, .cta, .submit, .google-btn, .continue-btn, .lang-btn,
a.cta, [role="button"], .t-add-row, .choice-card, .opt, .ghost {
  transition: transform var(--dur-quick) var(--ease-enter),
              box-shadow var(--dur-normal) ease,
              filter var(--dur-quick) ease;
  -webkit-tap-highlight-color: transparent;
}

/* Hover (kompyuter) — yumshoq ko'tariladi (minimalist) */
@media (hover: hover) {
  button:hover, .lang-btn:hover, a.cta:hover, [role="button"]:hover,
  .t-add-row:hover, .choice-card:hover, .opt:hover, .ghost:hover {
    transform: translateY(-2px);
  }
  .cta:hover, .submit:hover, .continue-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(244, 132, 95, 0.26);
    filter: brightness(1.03);
  }
}

/* Bosilganda — yengil bosilish (minimalist) */
button:active, .cta:active, .submit:active, .google-btn:active,
.continue-btn:active, .lang-btn:active, a.cta:active,
[role="button"]:active, .t-add-row:active, .choice-card:active, .opt:active, .ghost:active {
  transform: scale(0.97);
}

/* WOW — asosiy tugmalar: jonli rang-barang gradient (kirishga moslab) */
.cta, .submit, .continue-btn {
  background-image: linear-gradient(135deg, #F4845F, #C2410C) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(244, 132, 95, 0.34);
}
/* WOW — kapsula raqamlari Anton (qalin display, kirishdagidek) */
.ch-num, .goal-num, .t-row .ord, .tr-num {
  font-family: 'Anton', sans-serif !important;
  font-weight: 400 !important;
}

/* === SAHIFA O'TISHI — oltin "scan-line" reveal (noodatiy + minimalist) ===
   html::before = qoraytirilgan parda (yuqoridan pastga siljib ketadi -> kontent ochiladi)
   html::after  = oltin chiziq, reveal chetiда yuradi (WOW detal)
   pseudo-elementlar => sahifaдagi position:fixed (video/taymer) buzilmaydi */
html::before {
  content: ''; position: fixed; inset: 0; z-index: 100000;
  background: var(--bg); pointer-events: none;
  animation: pageCurtain 0.7s var(--ease-enter) forwards;
}
@keyframes pageCurtain { to { transform: translateY(100%); } }
html::after {
  content: ''; position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 100001;
  background: linear-gradient(90deg, transparent, var(--accent-bright) 50%, transparent);
  box-shadow: 0 0 22px 1px var(--accent-glow);
  pointer-events: none; opacity: 0;
  animation: pageScan 0.7s var(--ease-enter) forwards;
}
@keyframes pageScan {
  0%   { transform: translateY(0);     opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}