/*
  Общие токены и служебные узлы сайта — шрифты, цвета, шапка, подвал,
  переключатель языка, кнопка, проявление при скролле.

  Вынесены в отдельный файл в тот момент, когда страниц на сайте стало три
  (посадочная плюс политика конфиденциальности и пользовательское
  соглашение): до этого дублирование было терпимым компромиссом на одну
  страницу, а на три стало бы тремя расходящимися копиями одного и того же.
  Landing-специфичные вещи — герой, фоновое видео, сетки шагов и фактов —
  остаются в <style> самой посадочной страницы: политике и соглашению они
  не нужны.

  Значения повторяют lib/theme/tokens.dart. Дублирование намеренное: страница
  на HTML, приложение на Flutter, общего места для констант у них нет.
  Правило простое — правится там, копируется сюда.
*/

@font-face {
  font-family: 'Unbounded';
  src: url('fonts/Unbounded-Variable.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: 'Onest';
  src: url('fonts/Onest-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrainsMono';
  src: url('fonts/JetBrainsMono-Variable.ttf') format('truetype-variations');
  font-weight: 100 800;
  font-display: swap;
}

/*
  Тёмная тема здесь основная, потому что приложение открывается тёмным на
  системной тёмной, а первый экран задаёт ожидание. Светлая — ниже, по
  prefers-color-scheme.
*/
:root {
  --canvas: #141312;
  --surface: #1E1C1A;
  --sunken: #0F0E0D;
  --ink: #F2F0EC;
  --graphite: #9C9893;
  --hairline: #302D2A;

  --r-chip: 3px;
  --r-card: 6px;

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --canvas: #F6F5F2;
    --surface: #FFFFFF;
    --sunken: #EDEBE6;
    --ink: #1B1815;
    --graphite: #6C6A66;
    --hairline: #E3E0DA;
    color-scheme: light;
  }
}

/*
  Двуязычие сделано разметкой, а не словарём в скрипте: оба варианта каждой
  фразы стоят рядом в HTML — тем же приёмом, что и в l10n.dart, где ru и en
  живут на соседних строках и расхождение видно глазом.

  Язык выставляется до отрисовки (скрипт в head каждой страницы), поэтому
  чужая половина никогда не мелькает.
*/
html[lang="ru"] [lang="en"],
html[lang="en"] [lang="ru"] { display: none; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

/* Шаг сетки — 4, как в приложении. Промежуточных значений нет. */
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Шапка ─────────────────────────────────────────────────────────── */

header {
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  background: var(--canvas);
  z-index: 10;
}

header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 56px;
}

.wordmark {
  font-family: 'Unbounded', 'Onest', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.3px;
  text-decoration: none;
  color: inherit;
  /* Уступает место первым: на узком экране «ИИ-стилист» шире, чем
     «AI Stylist», и без этого разницу отыгрывали бы на себе кнопки
     справа — то есть снова дёргались бы при смене языка. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Служебная надпись: моноширинная, в разрядку. Роль та же, что у eyebrow
   в приложении, — назвать раздел, не соперничая с заголовком. */
.eyebrow {
  font-family: 'JetBrainsMono', ui-monospace, monospace;
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--graphite);
}

/* ── Переключатель языка ───────────────────────────────────────────── */

/*
  Две кнопки, а не одна переключающая: у одной кнопки с подписью «EN»
  нельзя понять, показывает она текущий язык или предлагаемый. У пары
  выбранное залито, и вопрос не возникает.

  Оформлены как чипы приложения: скругление 3, рамка в волосяную линию,
  подпись моноширинной в разрядку.
*/
.lang {
  display: flex;
  border: 1px solid var(--hairline);
  border-radius: var(--r-chip);
  overflow: hidden;
}

.lang button {
  font: inherit;
  font-family: 'JetBrainsMono', ui-monospace, monospace;
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 1.1px;
  color: var(--graphite);
  background: transparent;
  border: 0;
  padding: 6px 8px;
  cursor: pointer;
  /* Заливка переезжает с одного чипа на другой, а не перескакивает. Время
     то же, что у отклика на касание в приложении (Tokens.fast). */
  transition:
    background-color 140ms cubic-bezier(0.215, 0.61, 0.355, 1),
    color 140ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.lang button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--canvas);
}

/* ── Кнопка ────────────────────────────────────────────────────────── */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--canvas);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  padding: 12px 24px;
  border-radius: var(--r-card);
  transition: opacity 140ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Без явного color здесь общее правило a:hover (ниже) перебивало бы цвет
   текста кнопки — оно весит больше, чем просто .cta, потому что у него
   есть и тип a, и псевдокласс :hover. Текст сливался с заливкой кнопки. */
.cta:hover { opacity: 0.82; color: var(--canvas); }
.cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.cta--small { padding: 8px 16px; font-size: 13px; }

/*
  Ширина не зависит от языка.

  «Создать образ» и «Build a look» разной длины, и кнопка, собранная по
  тексту, при переключении меняла размер — а вместе с ней уезжал стоящий
  рядом переключатель языка. Дёргается при этом то, по чему человек только
  что попал: худший вид движения из возможных.

  Оба перевода кладём в одну ячейку сетки. Ячейка получает ширину по
  длинному из них, и она одна на оба языка. Скрытый вариант остаётся в
  потоке — иначе ячейке нечем было бы держать ширину, — поэтому убран
  прозрачностью, а не display: none. Видимость выключена отдельно: без неё
  скринридер прочитал бы обе надписи подряд.
*/
.steady {
  display: inline-grid;
  align-items: center;
  justify-items: center;
}

.steady > [lang] {
  grid-area: 1 / 1;
  transition:
    opacity 140ms cubic-bezier(0.215, 0.61, 0.355, 1),
    visibility 140ms;
}

html[lang="ru"] .steady [lang="en"],
html[lang="en"] .steady [lang="ru"] {
  display: block;
  opacity: 0;
  visibility: hidden;
}

/* ── Проявление при скролле ───────────────────────────────────────── */

/*
  Тот же язык движения, что и в приложении: элемент чуть смещён и
  прозрачен, пока не попал в поле зрения, — как вкладка в HomeShell,
  которая проявляется смещением на 6px и ростом непрозрачности вместо
  мгновенной подмены (main.dart, Tokens.base/Tokens.ease). Здесь то же
  время и та же кривая.

  Раскрывается один раз: вернувшись назад по странице, блок не прячется
  обратно — повторный показ уже увиденного текста ничего не сообщает, а
  только отвлекает.
*/
[data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 220ms cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 220ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: calc(var(--d, 0) * 55ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Тем же способом приложение выключает движение по
   MediaQuery.disableAnimationsOf: содержимое просто на месте, без
   перехода. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Типографика ──────────────────────────────────────────────────── */

h1 {
  font-family: 'Unbounded', 'Onest', sans-serif;
  font-size: 44px;
  line-height: 52px;
  font-weight: 600;
  letter-spacing: -1px;
  margin: 16px 0 0;
}

h2 {
  font-size: 26px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.4px;
  margin: 12px 0 0;
}

.lead {
  font-size: 18px;
  line-height: 28px;
  color: var(--graphite);
  margin: 24px 0 0;
  max-width: 52ch;
}

.section-lead {
  color: var(--graphite);
  margin: 16px 0 0;
  max-width: 64ch;
}

.note {
  font-size: 13px;
  line-height: 18px;
  color: var(--graphite);
}

/* ── Подвал ────────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--hairline);
  padding: 24px 0;
  color: var(--graphite);
  font-size: 13px;
  line-height: 18px;
}

footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

footer .foot-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Ссылка внутри обычного текста — не .cta и не .wordmark, у тех цвет и
   декорация заданы явно и этого правила не увидят из-за специфичности. */
a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover { color: var(--ink); }

/* ── Узкий экран ───────────────────────────────────────────────────── */

@media (max-width: 800px) {
  h1 { font-size: 32px; line-height: 38px; }
  h2 { font-size: 22px; line-height: 28px; }
  .lead { font-size: 16px; line-height: 24px; }
}