/* ==========================================================================
   Сайт Круга: раскладка, телефон, главы, установка.
   Цвета, отступы, шрифт и тени — токены прототипа (tokens.css, копия —
   tools/sync.js). Сначала телефон: так сайт открывают по ссылке из чата;
   шире 960 px — телефон слева, главы справа.
   ========================================================================== */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../fonts/inter-500.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("../fonts/inter-700.woff") format("woff"); }

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Переход по «Как установить» — плавно, кроме тех, кто просил без движения */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg-app);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
a { color: var(--color-text-brand); }
img { display: block; }

:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---- Шапка --------------------------------------------------------------- */

/* Шапка лежит поверх первого экрана и места не занимает: иначе она сдвигала
   бы вниз и первый экран, и телефон, и середина окна уезжала бы на её высоту */
.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-primary);
  text-decoration: none;
}
.brand__mark { width: 32px; height: 32px; }
.brand__name {
  font-weight: var(--font-weight-bold);
  font-size: 18px;
  letter-spacing: 0.02em;
}

/* ---- Кнопки -------------------------------------------------------------- */

/* Золото — одно главное действие экрана, как в приложении
   (doc_project/design-tokens.md): «Скачать»; остальное — контуром */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-touch);
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font: inherit;
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  box-shadow: var(--shadow-accent, var(--shadow-sm));
  transition: background var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard);
}
.btn:hover { background: var(--color-accent-hover); }
.btn:active { transform: scale(0.97); }
.btn[aria-busy="true"] { opacity: 0.7; }

.btn--quiet {
  background: transparent;
  color: var(--color-text-brand);
  border-color: var(--color-brand-border);
  box-shadow: none;
}
.btn--quiet:hover { background: var(--color-brand-soft); }

.btn--small {
  min-height: 36px;
  padding: 0 var(--space-4);
  font-size: 14px;
  background: transparent;
  color: var(--color-text-accent);
  border-color: var(--color-accent-border);
  box-shadow: none;
}
.btn--small:hover { background: var(--color-accent-soft); }

/* ---- История: телефон и главы -------------------------------------------- */

/* Телефон — закреплён сверху, глава — ровно под ним: верхняя половина
   экрана — кадр, нижняя — его текст. Прокрутка мягко доводит главу под
   телефон (proximity — не держит, если листают дальше). Строка, по которой
   глава становится активной, — чуть ниже телефона (js/site.js, activeLine) */
.story {
  --phone-band: 50svh;
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1240px;
  margin: 0 auto;
}

/* Свечение за телефоном — цветом главы: бирюза и золото по очереди
   (js/site.js ставит data-glow). Цвет — регистрируемое свойство: так
   градиент перетекает, а не перескакивает */
@property --glow {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
/* Пятно — полупрозрачные бирюза и золото палитры (teal-500, gold-500):
   «мягкие» токены сплошные и на фоне экрана почти не видны */
.story { --glow: rgba(23, 163, 158, 0.18); transition: --glow 700ms var(--easing-standard); }
.story[data-glow="accent"] { --glow: rgba(201, 154, 60, 0.2); }

@media (max-width: 959px) {
  html { scroll-snap-type: y proximity; }
  .chapter:not(.chapter--hero) {
    scroll-snap-align: start;
    scroll-margin-top: var(--phone-band);
  }
}

.story__phone {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--phone-band);
  padding: var(--space-2) 0 var(--space-3);
  background:
    radial-gradient(closest-side, var(--glow), transparent) center / 120% 100% no-repeat,
    var(--color-bg-app);
}

/* Текст глав уходит под телефон, растворяясь, — без резкой кромки */
.story__phone::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--space-8);
  background: linear-gradient(var(--color-bg-app), transparent);
  pointer-events: none;
}

.phone {
  position: relative;
  height: 100%;
  aspect-ratio: 360 / 780;
  padding: 1.6%;
  border-radius: 13% / 6%;
  background: #0f1a19;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), var(--shadow-lg);
}
/* На тёмном фоне корпус почти того же цвета: контур светлее, иначе рамки нет */
:root[data-appearance="dark"] .phone { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.16), var(--shadow-lg); }

.phone__screen {
  /* Сцены рисуются в 360×780 и сжимаются под рамку: --k ставит site.js */
  --k: 1;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 11% / 5.2%;
  /* Цвет корпуса: на скруглённом краю фон экрана подмешивается в крайний
     пиксель сцены, и светлый давал белую нить по краю. Сам фон не виден —
     сцены сменяются поверх друг друга (scenes.css, is-leaving) */
  background: #0f1a19;
}

/* Глава на телефоне — ровно нижняя половина экрана, текст по её середине:
   одна глава на кадр */
.chapter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  min-height: calc(100svh - var(--phone-band));
  padding: var(--space-5) var(--space-5) var(--space-6);
}

/* Над заголовком — номер и тема главы: где ты в рассказе */
.chapter__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-brand);
}
.chapter__eyebrow span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-accent);
  font-variant-numeric: tabular-nums;
}
/* Черта после номера — распрямлённый обруч, как на заставке приложения */
.chapter__eyebrow span::after {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--palette-gold-500), transparent);
}

.chapter__title {
  font-size: 27px;
  line-height: 1.16;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Главные слова — золотым маркером снизу; маркер дорисовывается, когда
   глава становится активной */
.chapter__title em {
  --marker: rgba(201, 154, 60, 0.3);
  font-style: normal;
  background: linear-gradient(transparent 60%, var(--marker) 60%, var(--marker) 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
  transition: background-size 700ms var(--easing-decelerate) 200ms;
}
:root[data-appearance="dark"] .chapter__title em { --marker: rgba(201, 154, 60, 0.34); }
.js .chapter:not(.is-active) .chapter__title em { background-size: 0% 100%; }

.chapter__text {
  max-width: 32em;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.chapter__note {
  font-size: 14px;
  color: var(--color-text-tertiary);
}

/* ---- Пункты главы: загораются в такт сцене -------------------------------
   Сцена зажигает пункт номером (data-beat) ровно тогда, когда телефон его
   показывает. Линия слева — ход сцены: заполняется до последнего горящего */
.points {
  --progress: 0;
  position: relative;
  display: grid;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}
.points::before,
.points::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  border-radius: 1px;
  background: var(--color-border);
}
.points::after {
  background: var(--color-brand);
  transform-origin: top;
  transform: scaleY(var(--progress));
  transition: transform 500ms var(--easing-standard);
}

.point {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: var(--space-3);
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--color-text-primary);
  transition: color var(--duration-slow) var(--easing-standard), opacity var(--duration-slow) var(--easing-standard);
}
.point__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  color: var(--color-text-inverse);
  box-shadow: 0 0 0 4px var(--color-bg-app);
  transition: background var(--duration-slow) var(--easing-standard), color var(--duration-slow) var(--easing-standard), transform var(--duration-slow) var(--easing-standard);
}
.point__icon svg { width: 17px; height: 17px; }

/* Со скриптом пункт ждёт своего кадра: приглушён, пока сцена до него не
   дошла. Без скрипта — горят все: текст важнее анимации */
.js .point:not(.is-lit) { color: var(--color-text-tertiary); }
.js .point:not(.is-lit) .point__icon { background: var(--color-bg-sunken); color: var(--color-text-tertiary); transform: scale(0.88); }
.js .point.is-lit .point__icon { animation: point-lit 520ms var(--easing-standard); }
@keyframes point-lit {
  40% { transform: scale(1.18); }
}

/* В первой главе пункты — строкой таблеток, без линии хода */
.points--chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.points--chips::before,
.points--chips::after { display: none; }
.points--chips .point {
  display: inline-flex;
  gap: var(--space-2);
  padding: 4px 12px 4px 4px;
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-sm);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
}
.points--chips .point__icon { width: 26px; height: 26px; box-shadow: none; }
.points--chips .point__icon svg { width: 15px; height: 15px; }

/* «Ещё в Круге» — тихая строка значков, не пункты главы */
.extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
  font-size: 14px;
  color: var(--color-text-secondary);
}
.extras__label { width: 100%; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-tertiary); }
.extra { display: inline-flex; align-items: center; gap: 6px; }
.extra svg { width: 16px; height: 16px; color: var(--color-text-brand); }

/* Соседние главы приглушены: глаз идёт за той, что сейчас в телефоне */
.js .chapter { transition: opacity 500ms var(--easing-standard); }
.js .chapter:not(.is-active) { opacity: 0.32; }

@media (prefers-reduced-motion: reduce) {
  .js .chapter:not(.is-active) { opacity: 1; }
  .chapter__title em, .points::after, .point, .point__icon { transition: none; animation: none !important; }
}

.chapter__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* Первый экран телефона — заголовок и кнопки во всё окно, по его середине;
   поля сверху и снизу равны (сверху под ними шапка) — середина не уезжает.
   Телефон начинается со второго экрана */
.chapter--hero {
  min-height: 100svh;
  gap: var(--space-4);
  padding-top: calc(56px + var(--space-3));
  padding-bottom: calc(56px + var(--space-3));
}
.chapter--hero .chapter__title { font-size: 34px; }
.js .chapter--hero:not(.is-active) { opacity: 1; }

@media (min-width: 960px) {
  .story {
    grid-template-columns: minmax(380px, 46%) 1fr;
    column-gap: var(--space-8);
    padding: 0 var(--space-6);
  }

  /* Телефон слева на всю историю: закреплён и стоит, пока идут главы.
     Строк — по числу глав (13): новая глава — новое число здесь */
  .story__phone {
    grid-column: 1;
    grid-row: 1 / span 13;
    align-self: start;
    height: 100vh;
    padding: 6vh 0;
    background: none;
  }
  .story__phone::after { display: none; }

  /* Свечение за телефоном — пятно позади рамки */
  .story__phone {
    background: radial-gradient(closest-side, var(--glow), transparent) center / 90% 80% no-repeat;
  }

  .chapter {
    grid-column: 2;
    justify-content: center;
    gap: var(--space-4);
    min-height: 100vh;
    padding: var(--space-12) 0;
  }
  .chapter__eyebrow { font-size: 14px; }
  .chapter__title { font-size: clamp(34px, 3.4vw, 50px); }
  .chapter__text { font-size: 20px; max-width: 28em; }
  .points { gap: var(--space-3); max-width: 30em; margin-top: var(--space-2); }
  .point { font-size: 17.5px; grid-template-columns: 36px 1fr; }
  .point__icon { width: 36px; height: 36px; }
  .points::before, .points::after { left: 17px; top: 18px; bottom: 18px; }
  .chapter--hero { min-height: 100vh; }
  .chapter--hero .chapter__title { font-size: clamp(42px, 4.4vw, 62px); }
}

/* ---- Установка ----------------------------------------------------------- */

.install {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-5) var(--space-10);
}

.install__title {
  font-size: 30px;
  line-height: 1.2;
  font-weight: var(--font-weight-bold);
}

.install__lead {
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
}

.steps {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}

.step {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-sm);
}

.step__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-brand-soft);
  color: var(--color-text-brand);
  font-weight: var(--font-weight-bold);
}

.step__body {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  color: var(--color-text-secondary);
}

.step__title {
  font-size: 19px;
  line-height: 1.3;
  color: var(--color-text-primary);
}

.step .btn { margin-top: var(--space-2); }

code {
  font-family: var(--font-family-mono);
  font-size: 0.9em;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-sunken);
}

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

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-10);
  border-top: 1px solid var(--color-border-subtle);
  font-size: 14px;
  color: var(--color-text-tertiary);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}