/* ============================================================
   ZARINART — Internationalisation layer (locale.css)
   Loaded after style.css. Owns:
     1. Per-script web fonts (loaded on demand via unicode-range)
     2. LTR mirroring of direction-dependent rules
     3. Per-language typography, spacing and responsive tuning
     4. The language switcher component
   ============================================================ */

/* ============ 1. FONTS ============ */
/* Vazirmatn (Persian/Arabic) stays in style.css.
   Inter covers English + Russian; Noto Sans SC covers Chinese.
   unicode-range means a visitor only downloads the file for the
   script actually rendered on the page. */

/* --- Inter: Latin ------------------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* --- Inter: Cyrillic (Russian) ------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-cyrillic-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --- Noto Sans SC: Simplified Chinese ------------------------ */
/* One @font-face per chunk. `build_fonts.py` regenerates the
   block below from the characters actually used in /zh/ pages. */
/* zh-subsets:start */
/* Generated by build_fonts.py from the glyphs the /zh/ pages use.
   3 chunk(s), 181 KB total. */
@font-face {
  font-family: 'Noto Sans SC';
  src: url('../fonts/NotoSansSC-wght-400-700-1.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2010-U+6294;
}
@font-face {
  font-family: 'Noto Sans SC';
  src: url('../fonts/NotoSansSC-wght-400-700-2.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+6295-U+8FCF;
}
@font-face {
  font-family: 'Noto Sans SC';
  src: url('../fonts/NotoSansSC-wght-400-700-3.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+8FD0-U+FFE5;
}/* zh-subsets:end */

/* ============ 2. FONT STACK PER LOCALE ============ */
html[data-locale="fa"] { --font-body: 'Vazirmatn', 'Segoe UI', Tahoma, system-ui, sans-serif; }
html[data-locale="en"] { --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
html[data-locale="zh"] { --font-body: 'Noto Sans SC', 'Inter', system-ui, sans-serif; }
html[data-locale="ru"] { --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* The switcher names every language on every page, so the Chinese option has
   to carry its own face wherever the visitor is standing: on the other three
   locales it would otherwise fall back to a system font with no CJK glyphs
   and render as blanks. */
.lang__opt[lang^="zh"] {
  font-family: 'Noto Sans SC', 'Inter', system-ui, sans-serif;
}

/* ============ 3. LTR MIRRORING ============ */
/* Every rule here compensates for a physical (direction-agnostic)
   CSS transform that was authored for the RTL Persian layout. */
[dir="ltr"] {
  text-align: start;
}

/* underline sweeps grow from the inline-start edge */
[dir="ltr"] .link-line::after { transform-origin: left; }

/* scroll progress bar fills from the inline-start edge */
[dir="ltr"] .progress-bar { transform-origin: left; }

/* reveal directions are named by inline axis, so flip the sign */
[dir="ltr"] [data-reveal='right'] { transform: translateX(-34px); }
[dir="ltr"] [data-reveal='left'] { transform: translateX(34px); }

/* the "forward" arrow nudges towards the inline-end */
[dir="ltr"] .btn:hover .ico--arrow { transform: translateX(4px); }
[dir="ltr"] .step:hover .step__body { transform: translateX(6px); }
[dir="ltr"] .link-card:hover .link-card__ico { transform: translateX(3px); }

/* gold shimmer sweeps the other way */
[dir="ltr"] .shimmer { animation-direction: reverse; }

/* the timeline/ring decorations are centred with logical insets in
   style.css, so no override is needed for them. */

/* ============ 3b. NO-JS SAFETY ============ */
/* style.css starts every [data-reveal] element at opacity:0 and only
   main.js adds .is-in.  Without JS that would hide most of the page,
   so the hidden start state is scoped to .js (set by head.js). */
html:not(.js) [data-reveal],
html:not(.js) [data-reveal='right'],
html:not(.js) [data-reveal='left'],
html:not(.js) [data-reveal='zoom'] {
  opacity: 1 !important;
  transform: none !important;
}
/* Same for the project modal: it must be reachable without JS. */
html:not(.js) .modal { display: none !important; }

/* ============ 4. LANGUAGE SWITCHER ============ */
.lang { position: relative; }

.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.52rem 0.72rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-soft);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease),
    background var(--t) var(--ease);
}
.lang__btn:hover,
.lang__btn[aria-expanded='true'] {
  color: var(--gold-200);
  border-color: var(--border-strong);
  background: rgba(212, 175, 55, 0.08);
}
.lang__btn > svg { width: 16px; height: 16px; flex: none; }
.lang__btn .lang__chev { width: 12px; height: 12px; transition: transform var(--t) var(--ease); }
.lang__btn[aria-expanded='true'] .lang__chev { transform: rotate(180deg); }
.lang__code { letter-spacing: 0.04em; }

.lang__menu {
  position: absolute;
  inset-block-start: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: var(--z-header);
  min-width: 214px;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: rgba(10, 10, 14, 0.97);
  backdrop-filter: blur(20px);
  box-shadow: var(--sh-lg);
}
.js .lang__menu { display: none; }
.js .lang__menu.is-open { display: block; }
.lang__menu::before {
  content: '';
  position: absolute;
  inset-block-start: -7px;
  inset-inline-end: 18px;
  width: 11px; height: 11px;
  background: rgba(10, 10, 14, 0.97);
  border-inline-start: 1px solid var(--border-strong);
  border-block-start: 1px solid var(--border-strong);
  transform: rotate(45deg);
}

.lang__opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-sm);
  color: var(--text-soft);
  font-size: 0.9rem;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.lang__opt:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.lang__opt[aria-current='true'] { color: var(--gold-200); background: rgba(212, 175, 55, 0.09); }
.lang__opt b { font-weight: 600; }
.lang__opt .lang__tag {
  margin-inline-start: auto;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.lang__opt[aria-current='true'] .lang__tag { color: var(--gold-400); }
.lang__opt .lang__tick { width: 15px; height: 15px; color: var(--gold-400); opacity: 0; flex: none; }
.lang__opt[aria-current='true'] .lang__tick { opacity: 1; }

/* Locales this visitor has already opened get a faint dot (head.js).
   Purely a memory aid — no language is ever auto-selected. */
.lang__opt[data-visited]:not([aria-current='true']) .lang__tag::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-inline-end: 0.4em;
  border-radius: 50%;
  vertical-align: 0.25em;
  background: var(--gold-400);
  opacity: 0.7;
}

/* inside the mobile panel the switcher becomes a full-width row */
@media (max-width: 900px) {
  .lang { width: 100%; }
  .lang__btn { width: 100%; justify-content: space-between; padding: 0.8rem 1rem; font-size: 0.95rem; }
  .lang__menu {
    position: static;
    min-width: 0;
    margin-block-start: 0.35rem;
    border-radius: var(--r-sm);
  }
  .lang__menu::before { display: none; }
}

/* ============ 5. PER-LANGUAGE TYPOGRAPHY ============ */
/* Latin (English) is the baseline: nothing to correct, only the
   small refinements below. */
html[data-locale="en"] {
  --tracking-tight: -0.011em;
}
html[data-locale="en"] h1,
html[data-locale="en"] h2,
html[data-locale="en"] h3 { letter-spacing: var(--tracking-tight); }
html[data-locale="en"] .eyebrow { letter-spacing: 0.14em; }

/* --- Russian: ~20% longer words than English ------------------ */
html[data-locale="ru"] {
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15.5px;                 /* slightly smaller base */
  line-height: 1.82;
  hyphens: auto;                     /* long words wrap gracefully */
  -webkit-hyphens: auto;
}
html[data-locale="ru"] h1 { font-size: clamp(1.8rem, 1.2rem + 2.9vw, 3.45rem); }
html[data-locale="ru"] h2 { font-size: clamp(1.5rem, 1.15rem + 1.8vw, 2.55rem); }
html[data-locale="ru"] .lead { font-size: clamp(0.94rem, 0.9rem + 0.2vw, 1.04rem); }
html[data-locale="ru"] .nav__link { font-size: 0.85rem; padding-inline: 0.55rem; }
html[data-locale="ru"] .nav__menu { gap: 0.1rem; }
html[data-locale="ru"] .btn { font-size: 0.88rem; padding-inline: 1.35em; }
html[data-locale="ru"] .btn--lg { font-size: 0.95rem; padding-inline: 1.5em; }
html[data-locale="ru"] .filter-btn { font-size: 0.84rem; }
html[data-locale="ru"] .chip { font-size: 0.72rem; }
html[data-locale="ru"] .stat__num { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); }
html[data-locale="ru"] .card-member__role,
html[data-locale="ru"] .card-investor__tier { letter-spacing: 0.02em; }
html[data-locale="ru"] .eyebrow { letter-spacing: 0.1em; }
html[data-locale="ru"] .quote-card blockquote { font-size: 0.9rem; line-height: 1.85; }
html[data-locale="ru"] .marquee__item { font-size: clamp(1.5rem, 3.4vw, 2.7rem); }
html[data-locale="ru"] .lang__code { font-size: 0.86rem; }

/* --- Chinese: no word spaces, different line breaking ------- */
html[data-locale="zh"] {
  font-size: 16px;
  line-height: 1.85;
  word-break: break-word;            /* break inside "words" */
  line-break: strict;
  overflow-wrap: anywhere;
  hyphens: none;
  text-align: start;
}
html[data-locale="zh"] h1 { font-size: clamp(1.75rem, 1.2rem + 2.7vw, 3.35rem); line-height: 1.42; letter-spacing: 0.01em; }
html[data-locale="zh"] h2 { font-size: clamp(1.45rem, 1.15rem + 1.6vw, 2.5rem); line-height: 1.5; letter-spacing: 0.01em; }
html[data-locale="zh"] h3 { line-height: 1.6; }
html[data-locale="zh"] .lead { font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.06rem); line-height: 1.95; }
html[data-locale="zh"] .eyebrow { letter-spacing: 0.24em; }
html[data-locale="zh"] .btn { font-size: 0.9rem; padding-inline: 1.3em; }
html[data-locale="zh"] .nav__link { font-size: 0.9rem; padding-inline: 0.6rem; }
html[data-locale="zh"] .nav__link::before { display: none; }  /* no room for the tick */
html[data-locale="zh"] .chip { font-size: 0.74rem; letter-spacing: 0; }
html[data-locale="zh"] .filter-btn { font-size: 0.86rem; }
html[data-locale="zh"] .quote-card blockquote { font-size: 0.92rem; line-height: 1.95; }
html[data-locale="zh"] .card-work__title,
html[data-locale="zh"] .card-member__name { letter-spacing: 0.01em; }
html[data-locale="zh"] .marquee__item { font-size: clamp(1.35rem, 3vw, 2.4rem); letter-spacing: 0.06em; }
html[data-locale="zh"] .spec-list dd { white-space: normal; overflow: visible; text-overflow: clip; }
html[data-locale="zh"] .stat__num { letter-spacing: 0; }
html[data-locale="zh"] .text-gold,
html[data-locale="zh"] em { font-style: normal; }

/* --- Persian baseline: keep it explicit so the sheet is complete */
html[data-locale="fa"] { line-height: 1.9; }
html[data-locale="fa"] .spec-list dd { white-space: nowrap; }
html:not([data-locale]) .spec-list dd { white-space: normal; overflow: visible; text-overflow: clip; }

/* ============ 6. SHARED HARDENING ============ */
/* Spec values are technical, so they stay LTR — but they must be
   allowed to wrap in languages whose labels are longer. */
html[data-locale="en"] .spec-list dd,
html[data-locale="ru"] .spec-list dd { white-space: normal; overflow: visible; text-overflow: clip; }

/* Spec values inside cards must never be ellipsis-clipped: a company name
   or a founder list has to stay readable, so let it wrap instead. */
html[data-locale] .panel .spec-list dd,
html[data-locale] .card-work .spec-list dd {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

/* Headings wrap evenly in every language. */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Nothing may push the layout sideways, whatever the language. */
body, main, section, article, .panel, .card-work, .card-member, .card-investor,
.form-card, .site-footer, .site-header { overflow-x: clip; }
.card-work__title, .card-member__name, .card-investor__name,
.filter-btn, .chip, .btn, .nav__link, .lang__opt { overflow-wrap: anywhere; }

/* Latin technical tokens inside RTL copy keep their own direction. */
html[data-locale="fa"] .mono,
html[data-locale="fa"] .spec-list dd,
html[data-locale="fa"] [dir="ltr"] { font-family: 'Vazirmatn', ui-monospace, monospace; }

/* ============ 7. PER-LANGUAGE RESPONSIVE TOOLKIT ============ */
/* Buttons and pills wrap instead of forcing a horizontal scrollbar
   on small screens — Russian labels and Chinese ones differ a lot. */
@media (max-width: 560px) {
  .btn { white-space: normal; max-width: 100%; }
  .btn--block { width: 100%; }
  .lang__btn { white-space: normal; }
}

/* Russian: allow the desktop nav to breathe, then collapse earlier. */
@media (max-width: 1180px) {
  html[data-locale="ru"] .nav__actions .btn { font-size: 0.84rem; padding-inline: 1.1em; }
  html[data-locale="ru"] .nav__link { padding-inline: 0.45rem; }
}
@media (max-width: 1024px) {
  html[data-locale="ru"] .hero__art { max-width: 420px; }
}

/* Chinese: tighter grids, since glyphs are denser. Member cards are exempt:
   their hover bio + skill chips need the full card width in every language. */
@media (max-width: 1024px) {
  html[data-locale="zh"] .g-4:not(.g-members) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
}
@media (max-width: 700px) {
  html[data-locale="zh"] .g-3:not(.g-members),
  html[data-locale="zh"] .g-4:not(.g-members) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); }
  html[data-locale="ru"] .g-4:not(.g-members) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
}

/* Hero stats: these are flex rows in the base sheet. Languages with
   wider labels wrap irregularly, so switch to an even 2-up grid. */
@media (max-width: 700px) {
  html[data-locale="ru"] .hero__meta,
  html[data-locale="ru"] .page-hero__stats,
  html[data-locale="zh"] .hero__meta,
  html[data-locale="zh"] .page-hero__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }
  html[data-locale="ru"] .hero__meta-item dd,
  html[data-locale="zh"] .hero__meta-item dd { font-size: 0.95rem; }
  html[data-locale="ru"] .hero__meta-item dt,
  html[data-locale="zh"] .hero__meta-item dt { letter-spacing: 0.02em; }
}
@media (max-width: 360px) {
  html[data-locale="ru"] .hero__meta,
  html[data-locale="ru"] .page-hero__stats,
  html[data-locale="zh"] .hero__meta,
  html[data-locale="zh"] .page-hero__stats { grid-template-columns: 1fr; }
}

/* Touch devices: the member overlay is opened by tap, so give it
   the full card and keep the text legible in every language. */
@media (hover: none) {
  html[data-locale="ru"] .card-member__overlay p,
  html[data-locale="zh"] .card-member__overlay p { font-size: 0.82rem; line-height: 1.75; }
  html[data-locale="ru"] .card-work__desc,
  html[data-locale="zh"] .card-work__desc { font-size: 0.82rem; line-height: 1.75; }
}

/* Print: never let a translated string break the sheet. */
@media print {
  .lang__menu, .lang__btn, .marquee__track { display: none !important; }
  html[data-locale="ru"], html[data-locale="zh"] { font-size: 11pt; }
}