/* ============================================================================
   МИР ФУСХИ — посадочная страница
   ----------------------------------------------------------------------------
   Лежит внутри #start-screen, ниже первого экрана. Первый экран отвечает
   «что это», дальше идёт продуктовый рассказ: чипы-разделы, абзац с
   пословным проявлением, цифры по уровням, закреплённый разбор слова,
   плитки возможностей и финальный призыв.

   Три правила, которые держат этот файл отдельно от style.css:
     1. Ни одного «сырого» цвета. Всё через токены дизайн-системы; тёмные
        полосы локально переопределяют --bg/--ink/--bg-panel — ровно тот же
        приём, что у стеклянных панелей Ленты (см. CLAUDE.md).
     2. Движение приводится скроллом, а не таймером. JS выставляет --p
        (0..1) на секции, CSS решает, что с этим делать. Нет --p — секция
        просто стоит в конечном состоянии и читается.
     3. Всё декоративное обязано выключаться в prefers-reduced-motion,
        не теряя ни слова текста.
   ========================================================================== */

/* ============================================================================
   МАТЕРИАЛ ПОСАДОЧНОЙ
   ----------------------------------------------------------------------------
   Своей палитры здесь больше нет. Была — снятая с apple.com — и она
   разводила витрину и продукт по разным мирам: перейдя внутрь, человек
   попадал из синего Apple в зелёное стекло. Теперь стартовый экран берёт
   те же токены, что приложение (css/style.css): камень, стекло, вода, лист.

   От Apple осталась СТРУКТУРА, а не цвет: чередование полос, крупная
   типографика с отрицательным трекингом, один смысл на экран. Это и было
   в ней ценным — цвет там вторичен.

   Стартовый экран не красит себя сам: фон прозрачен, сквозь него светит
   атмосфера из body (зарево, отсвет воды, зерно камня). Пока экран
   показан, #app скрыт, закрывать нечего. */
.start-screen { background: transparent; }

.lnd {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s9);
  position: relative;
  z-index: 1;
}

/* Полоса во всю ширину экрана. .start-screen — это fixed-контейнер с
   горизонтальным padding, поэтому «на всю ширину» = вычесть этот padding.
   Он вынесен в --start-pad как раз ради этой строки. */
.lnd-band {
  width: auto;
  align-self: stretch;
  margin-inline: calc(-1 * var(--start-pad));
  padding: var(--s9) var(--start-pad);
}

/* Контрастная полоса — то самое чередование секций, на котором держится
   страница Apple, но материалом ущелья: глубокий мокрый камень. Внутри неё
   меняются роли поверхностей целиком, поэтому любой вложенный компонент
   остаётся читаемым, какая бы тема ни стояла снаружи. */
.lnd-band-deep {
  --bg: #070b08;
  --bg-panel: rgba(28, 38, 31, 0.66);
  --bg-raise: rgba(44, 58, 48, 0.8);
  --ink: #eef4ee;
  --ink-soft: rgba(238, 244, 238, 0.6);
  --ink-faint: #7d8f83;
  --line: rgba(212, 240, 220, 0.13);
  --line-strong: rgba(212, 240, 220, 0.26);
  --accent: #4fb8ae;
  --accent-ink: #8fdcd3;
  --accent-soft: rgba(79, 184, 174, 0.18);
  --accent-line: rgba(79, 184, 174, 0.45);
  background: var(--bg);
  color: var(--ink);
}

/* Светлая тема: контрастная полоса остаётся тёмным камнем — на туманном
   #e6ebe6 это тот же скачок, что тёмная полоса на тёмном фоне. */

.lnd-inner { max-width: 980px; margin: 0 auto; }

/* Надзаголовок раздела: маленький, акцентный, всегда над крупной строкой. */
.lnd-eyebrow {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-ink);
  margin: 0 0 var(--s4);
}

/* Крупная строка раздела. Единственное место в продукте, где типографика
   работает как изображение: отрицательный трекинг, плотный интерлиньяж. */
.lnd-head {
  font-size: clamp(34px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}
.lnd-head-soft { color: var(--ink-faint); display: block; }

.lnd-lead {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: var(--s5) 0 0;
}

/* ---------- Липкая мини-навигация -------------------------------------------
   Появляется, когда первый экран уехал вверх: слева — что это, справа —
   единственное действие. Пока её нет, она не просто прозрачная, а
   pointer-events:none, иначе ловила бы клики поверх карты. */
.lnd-nav {
  position: sticky;
  top: var(--s3);
  z-index: 40;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--s3) var(--s3) var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-panel) 78%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.lnd-nav.is-shown { opacity: 1; transform: translateY(0); pointer-events: auto; }
.lnd-nav-name { font-weight: 600; font-size: var(--t-md); }
.lnd-nav-actions { display: flex; align-items: center; gap: var(--s2); }

/* ---------- Чипы-хайлайты ---------------------------------------------------
   Четыре раздела продукта одной строкой. Это не навигация — это обещание,
   поэтому каждый чип ведёт сразу в свой раздел (data-enter). */
.lnd-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
}
.lnd-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-panel) 70%, transparent);
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.lnd-chip:hover {
  color: var(--ink);
  border-color: var(--accent-line);
  box-shadow: var(--glow-soft);
  transform: translateY(-2px);
}
.lnd-chip:active { transform: translateY(0); }
.lnd-chip-ar { font-family: var(--font-ar); font-size: var(--ar-inline); line-height: 1; direction: rtl; }

/* ---------- Абзац с пословным проявлением -----------------------------------
   Подпись этого приёма: текст лежит тусклым, и по мере прокрутки слова
   зажигаются одно за другим. Каждое слово — свой <span> с индексом --i;
   JS выставляет на секции --p (0..1), а порог зажигания считается в CSS
   через --lit. Без JS все слова остаются на финальной яркости. */
.lnd-reveal-text {
  font-size: clamp(22px, 3.2vw, 40px);
  line-height: 1.38;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
.lnd-word {
  /* --lit = сколько слов уже должно гореть; сравниваем с номером слова. */
  --lit: calc(var(--p, 1) * (var(--total, 1) + 6));
  color: color-mix(
    in srgb,
    var(--ink) calc(clamp(0, (var(--lit) - var(--i)) * 100, 100) * 1%),
    var(--ink-faint)
  );
  transition: color 240ms linear;
}
/* Ключевые слова догорают до акцента, а не до обычного текста: в абзаце
   Apple это ровно те слова, ради которых абзац написан. */
.lnd-word-key {
  color: color-mix(
    in srgb,
    var(--accent-ink) calc(clamp(0, (var(--lit) - var(--i)) * 100, 100) * 1%),
    var(--ink-faint)
  );
}

/* ---------- Цифры по уровням ------------------------------------------------
   Аналог «Vergeleken met» у Apple: один селектор сверху, три крупные
   величины под ним. Цифры перещёлкиваются с коротким подъёмом, иначе
   смена выглядит как опечатка, а не как ответ на выбор. */
.lnd-figures-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin-bottom: var(--s7);
}
.lnd-figures-label { font-size: var(--t-sm); color: var(--ink-faint); }
.lnd-level {
  padding: var(--s2) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              background var(--dur-2) var(--ease);
}
.lnd-level:hover { color: var(--ink); border-color: var(--line-strong); }
.lnd-level[aria-pressed="true"] {
  color: var(--ink);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.lnd-figures-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
  text-align: center;
}
.lnd-figure-pre { font-size: var(--t-xs); color: var(--ink-faint); margin: 0 0 var(--s1); }
.lnd-figure-num {
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.lnd-figure-post { font-size: var(--t-sm); color: var(--ink-soft); margin: var(--s2) 0 0; }
.lnd-figure.is-swapping .lnd-figure-num { animation: lnd-figure-swap 360ms var(--ease); }
@keyframes lnd-figure-swap {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---------- Закреплённый разбор слова ---------------------------------------
   Главный экранный приём Apple: картинка стоит, а подпись под ней
   переключается по мере прокрутки. Здесь вместо камеры — карточка слова:
   один и тот же رَأْسٌ проходит четыре слоя разбора.
   Высота полосы задаёт, сколько прокрутки уходит на четыре шага. */
.lnd-pin { position: relative; }
.lnd-pin-track { height: 320vh; }
.lnd-pin-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s6);
}
.lnd-pin-card {
  width: min(560px, 100%);
  padding: var(--s8) var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.lnd-pin-word {
  font-family: var(--font-ar-display);
  font-size: var(--ar-word);
  line-height: var(--lh-ar-tight);
  direction: rtl;
  margin: 0;
}
/* Огласовки гаснут на первом шаге и загораются на втором: это и есть
   «что добавляет второй слой». Сам текст при этом не меняется. */
.lnd-pin-card[data-step="0"] .lnd-pin-word { color: var(--ink-faint); }
.lnd-pin-layer {
  margin: var(--s5) 0 0;
  min-height: 3.2em;
  color: var(--ink-soft);
  font-size: var(--t-md);
}
.lnd-pin-layer-ar {
  display: block;
  font-family: var(--font-ar);
  font-size: var(--ar-example);
  line-height: var(--lh-ar);
  direction: rtl;
  color: var(--ink);
  margin-bottom: var(--s2);
}
.lnd-pin-layer.is-swapping { animation: lnd-layer-swap 320ms var(--ease); }
@keyframes lnd-layer-swap {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Сегментный контрол: показывает, где ты в рассказе. Он не кликабельный
   по замыслу — шагами управляет прокрутка, поэтому это <div>, не кнопки. */
.lnd-pin-steps {
  display: flex;
  gap: var(--s1);
  padding: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-panel) 70%, transparent);
  backdrop-filter: blur(12px);
}
.lnd-pin-step {
  padding: var(--s2) var(--s4);
  border-radius: var(--radius-pill);
  font-size: var(--t-xs);
  color: var(--ink-faint);
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
/* Заливки в 16% альфы на тёмной полосе не хватало: активный сегмент
   читался как случайный блик. Добавлены вес и кольцо того же тона. */
.lnd-pin-step.is-on {
  color: var(--ink);
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

/* ---------- Плитки возможностей --------------------------------------------- */
.lnd-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s4);
  margin-top: var(--s7);
}
.lnd-tile {
  padding: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-sm);
  text-align: left;
  /* Плитки приезжают по одной, когда полоса попадает в кадр. Порог
     появления ставит IntersectionObserver, задержку — индекс. */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease),
              border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.lnd-tiles.is-in .lnd-tile { opacity: 1; transform: translateY(0); }
.lnd-tile:hover { border-color: var(--accent-line); box-shadow: var(--shadow-md), var(--glow-soft); }
.lnd-tile-ar {
  display: block;
  font-family: var(--font-ar);
  font-size: var(--ar-inline);
  line-height: 1.6;
  direction: rtl;
  color: var(--accent-ink);
  margin-bottom: var(--s3);
}
.lnd-tile-name { font-size: var(--t-lg); font-weight: 600; margin: 0 0 var(--s2); }
.lnd-tile-note { font-size: var(--t-sm); color: var(--ink-soft); margin: 0; line-height: 1.6; }

/* ---------- Финальный экран -------------------------------------------------- */
.lnd-final { text-align: center; }
.lnd-final .lnd-head { margin-bottom: var(--s6); }
.lnd-final-row { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s3); }
.lnd-foot {
  font-size: var(--t-xs);
  color: var(--ink-faint);
  text-align: center;
  margin: var(--s7) 0 0;
}

/* ---------- Мобильные ---------------------------------------------------------
   Закреплённая полоса на телефоне остаётся, но короче: 320vh прокрутки на
   маленьком экране — это очень долго, а шагов всё те же четыре. */
@media (max-width: 720px) {
  .lnd { gap: var(--s8); }
  .lnd-band { padding: var(--s8) var(--start-pad); }
  .lnd-figures-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .lnd-pin-track { height: 260vh; }
  .lnd-pin-card { padding: var(--s7) var(--s4); }
  .lnd-pin-steps { flex-wrap: wrap; justify-content: center; }
}

/* ---------- Без движения -------------------------------------------------------
   Снимаем прокруточные приёмы целиком: закреплённая полоса разворачивается
   в обычную карточку, слова горят на полную, плитки просто стоят. Ни одного
   слова текста при этом не теряется. */
@media (prefers-reduced-motion: reduce) {
  .lnd-nav { opacity: 1; transform: none; pointer-events: auto; }
  .lnd-word, .lnd-word-key { color: var(--ink); }
  .lnd-word-key { color: var(--accent-ink); }
  .lnd-pin-track { height: auto; }
  .lnd-pin-stage { position: static; height: auto; padding: var(--s7) 0; }
  .lnd-tile { opacity: 1; transform: none; transition-delay: 0s; }
}