/* ═══ СЕКЦИИ ПОСЛЕ ПЕРВОГО ЭКРАНА ════════════════════════════════════════
   Движение на всём сайте одно: параллакс слоёв и закреплённые сцены.
   Никаких fade-up на секциях. */

/* Верхний отступ живёт на main, а не на первой секции: иначе у неё
   содержимое начинается на 160px ниже своего верха, и переход по якорю
   приземляется на треть экрана глубже, чем у остальных. */
.section { padding: 0 0 var(--pad-section); position: relative; }
main { padding-top: var(--pad-section); }
/* якорь не должен уезжать под фиксированную шапку. Запас с перекрытием:
   у Alumni Sans чернила выходят за строчный бокс вверх на 15–20px, и якорь,
   выставленный впритык, срезает верх заголовка. */
/* Запас поверх высоты шапки: у Alumni Sans при line-height 0.88 чернила
   выходят за строчный бокс вверх примерно на десятую кегля, и якорь,
   выставленный впритык к шапке, срезает верхушки букв. */
.section[id] { scroll-margin-top: calc(var(--topbar-h) + clamp(28px, 3.4vh, 44px)); }
/* Тёмная полоса: свой верхний отступ внутри, и воздух после неё — отступом,
   а не полем, чтобы якорь следующей секции не поехал. */
.section[data-dark] {
  padding-top: var(--pad-section);
  margin-bottom: var(--pad-section);
  scroll-margin-top: clamp(16px, calc(16vh - var(--pad-section)), 48px);
}

.section__head { display: flex; flex-direction: column; gap: var(--gap-s); }
.section__title { font-size: var(--fs-h2); }

/* ═══ СЦЕНА: липкий кадр и обычный столбик заголовков ════════════════════
   Механика одна на «Как проходит оценка» и на «Три страха».

   Закреплена только правая колонка с кадром: она липкая внутри дорожки
   и отпускается сама, когда дорожка кончается. Левый столбик заголовков
   едет с обычной скоростью страницы. Активен тот шаг, чей заголовок ближе
   к середине экрана; под ним видна строка пояснения, у остальных она
   притушена. Вдоль левого края растёт золотая линия.

   Так было не сразу: сначала секция закреплялась на N экранов скролла,
   по экрану на шаг. Читалось это как «страница застряла» — четыре шага
   съедали четыре экрана прокрутки. Теперь весь путь от первого шага
   до последнего — примерно шесть десятых экрана.

   Базовое состояние в этом файле — РАСКРЫТОЕ: все пояснения видны, кадры
   стоят над своими заголовками. Так секция читается на телефоне, при
   «меньше движения» и на странице вовсе без javascript. Липкая раскладка
   включается ниже, в блоке `html.hero-motion` + min-width: 901px. */

.scene__grid { position: relative; }
.scene__lead { color: var(--ash-ink); }
.scene--dark { background: var(--bordeaux); color: var(--ivory); }
.scene--dark .scene__lead { color: var(--ivory-dim); }

/* ─── дорожка шагов ──────────────────────────────────────────────────── */
.track {
  --track-pad: clamp(34px, 9vw, 52px);
  position: relative;
  margin: clamp(28px, 4.6vh, 52px) 0 0;
}
.track__list { list-style: none; margin: 0; padding: 0; }

/* Золотая линия — два слоя, а не svg с пунктиром. Пунктирный вариант
   (stroke-dasharray + pathLength="1") пришлось выбросить: вместе с
   vector-effect: non-scaling-stroke нормировка по pathLength не работает,
   и вместо одной растущей линии выходили три штриха по сотне пикселей,
   которые ещё и стояли не напротив активного шага. Здесь растёт scaleY
   от верхней кромки — одно составное свойство, без перерасчёта геометрии. */
.track__rail {
  position: absolute; left: 0; top: 0;
  width: 2px; height: 100%;
  background: var(--bordeaux-16);
  pointer-events: none;
}
.scene--dark .track__rail { background: var(--ivory-faint); }
.track__run {
  display: block; position: absolute; inset: 0;
  background: var(--gold);
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform var(--t-slow) var(--ease);
}

.track__item {
  position: relative;
  padding: clamp(20px, 3.6vw, 30px) 0 clamp(20px, 3.6vw, 30px) var(--track-pad);
}

/* Номер шага. Виден только там, где о нём просили, — на телефоне, сидящим
   прямо на золотой линии. На большом экране его роль берут сама линия
   и подсветка активного заголовка. */
.track__no {
  position: absolute; left: 0; top: clamp(20px, 3.6vw, 30px);
  transform: translateX(-50%);
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--gold-faint); border-radius: 50%;
  background: var(--ivory);
  font: 700 var(--fs-micro)/1 var(--display);
  letter-spacing: 0.06em;
  /* не золотом: золото на слоновой кости даёт 2.13:1 и номер выцветает */
  color: var(--ash-ink);
}
.scene--dark .track__no { background: var(--bordeaux); color: var(--ivory); }

.track__shot {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: clamp(14px, 2.4vw, 20px);
  background: var(--bordeaux-8);
}
.scene--dark .track__shot { background: var(--prune-40); }
.track__shot img { width: 100%; height: 100%; object-fit: cover; }

.track__title {
  margin: 0;
  font-size: calc(clamp(1.45rem, 2.35vw, 2.3rem) * var(--display-scale));
  line-height: 1.04; letter-spacing: -0.012em;
  color: var(--bordeaux);
  transition: color var(--t-mid) var(--ease);
}
.scene--dark .track__title { color: var(--ivory); }

.track__fold { display: block; }
.track__note {
  margin: 0; padding-top: 10px;
  color: var(--ash-ink);
  font-size: var(--fs-lead); line-height: 1.5;
  max-width: 46ch;
  text-wrap: pretty;
}
.scene--dark .track__note { color: var(--ivory); }
.track__note strong { font-weight: 600; }
.track__note em { font-style: normal; color: var(--ash-ink); }
.scene--dark .track__note em { color: var(--ivory-dim); }

/* ─── липкая раскладка: только большой экран и только с движением ─────── */
@media (min-width: 901px) {
  /* Ширину заголовку задаёт первая колонка сетки, своего max-width ему
     не нужно: с ним колонка ужималась дважды и заголовок вставал
     в 280 пикселей вместо 609. */
  /* заголовок сцены мельче обычного: под ним живут ещё четыре строки
     шагов, и вся сцена должна читаться как один разворот */
  html.hero-motion .scene .section__title { font-size: calc(clamp(2.2rem, 4.2vw, 4rem) * var(--display-scale)); }

  /* Две колонки делает вся сетка сцены, включая её заголовок. Это не
     косметика: липкая область кадра — это его область сетки, а значит
     ход липкости равен «высота области минус высота кадра». Если сеткой
     сделать одну дорожку, ход выходит 244px при пути шагов в 472 — кадр
     срывается с места на середине второго шага. С заголовком в той же
     сетке область длиннее на его высоту, и хода хватает с запасом.

     Дорожка, список и пункты отдают свои коробки сетке: заголовок шага
     и пояснение становятся её ячейками в первой колонке, кадр — ячейкой
     во второй, и все кадры ложатся в одну область стопкой. Роли list
     и listitem проставлены в разметке: display:contents убирает коробку,
     а с ней и списочную семантику. */
  html.hero-motion .scene__grid {
    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
    column-gap: var(--col-gap);
  }
  html.hero-motion .scene__col,
  html.hero-motion .track,
  html.hero-motion .track__list,
  html.hero-motion .track__item { display: contents; }
  html.hero-motion .scene .section__head { grid-column: 1; grid-row: 1; }

  /* Хвостовая строка. Без неё липкая область кончается сразу под последним
     пояснением, и кадр начинает уезжать раньше, чем последний шаг дойдёт
     до середины экрана. Величина не на глаз: ход липкости равен «высота
     сетки минус высота кадра», и он должен перекрывать путь от момента,
     когда кадр прилип, до момента, когда последний заголовок дошёл
     до середины экрана. На 1440x900 это 473 против нужных 409. */
  html.hero-motion .scene[data-steps="4"] .scene__grid { grid-template-rows: auto repeat(8, auto) clamp(160px, 33vh, 320px); }
  html.hero-motion .scene[data-steps="3"] .scene__grid { grid-template-rows: auto repeat(6, auto) clamp(160px, 33vh, 320px); }

  /* Линия тянется от первого шага до конца сетки. position: absolute тут
     обязателен: у сетки абсолютный потомок получает свою область как
     контейнер, но ячеек НЕ занимает. Обычным элементом линия занимала бы
     всю первую колонку, заголовкам не осталось бы места, и они уезжали
     в неявные строки — зазор между шагами вырастал с 17 до 68vh. */
  html.hero-motion .track__rail {
    position: absolute;
    grid-column: 1;
    inset: 0 auto 0 0;
    height: auto;
  }
  /* Линия кончается на последнем пояснении, а не на хвостовой строке:
     до конца сетки она тянулась бы ещё на четверть экрана в пустоту.
     Строк у сетки: 1 — заголовок секции, дальше по две на шаг,
     последняя — хвост, который держит липкость кадра. */
  html.hero-motion .scene[data-steps="4"] .track__rail { grid-row: 2 / 10; }
  html.hero-motion .scene[data-steps="3"] .track__rail { grid-row: 2 / 8; }

  html.hero-motion .track__no { display: none; }

  html.hero-motion .track__title {
    grid-column: 1;
    padding: clamp(30px, 6.2vh, 76px) 0 0 var(--track-pad);
    color: var(--ash-ink);
  }
  html.hero-motion .scene--dark .track__title { color: var(--ivory-dim); }
  html.hero-motion .track__item.is-on .track__title { color: var(--bordeaux); }
  html.hero-motion .scene--dark .track__item.is-on .track__title { color: var(--ivory); }

  /* Пояснение не складывается по высоте, а только гаснет. Складывание
     через grid-template-rows двигало бы все заголовки ниже при каждой
     смене шага — столбик прыгал бы под курсором. Место под строку
     зарезервировано всегда, меняется только видимость. */
  html.hero-motion .track__fold {
    grid-column: 1;
    padding-left: var(--track-pad);
    opacity: 0; transform: translateY(6px);
    transition: opacity var(--t-fast) var(--ease), transform var(--t-mid) var(--ease);
  }
  html.hero-motion .track__item.is-on .track__fold { opacity: 1; transform: none; }

  /* Кадр липкий внутри дорожки: пока она идёт мимо, он стоит; кончилась —
     уезжает вместе с секцией. Все кадры лежат в одной области сетки
     стопкой и меняются кроссфейдом. */
  html.hero-motion .track__shot {
    grid-column: 2; grid-row: 1 / -1;
    position: sticky;
    /* Отступ выбран не «на глаз»: кадр прилипает, когда прокрутка проходит
       (верх сетки − этот отступ), а первый шаг встаёт по центру экрана
       на (верх сетки + высота заголовка секции + отступ шага − полэкрана).
       Чтобы кадр к тому моменту уже стоял, отступ должен перекрывать
       разницу — на 1440x900 это 194px. Со 135 кадр на первом шаге ещё ехал. */
    top: calc(var(--topbar-h) + clamp(50px, 9.5vh, 110px));
    align-self: start;
    max-height: 66vh;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-mid) var(--ease);
  }
  html.hero-motion .track__item.is-on .track__shot { opacity: 1; }

  /* Страница без javascript на большом экране: каждый шаг раскладывается
     собственной парой «текст + кадр». */
  html:not(.hero-motion) .track__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: var(--col-gap);
    align-items: center;
  }
  html:not(.hero-motion) .track__shot { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  html:not(.hero-motion) .track__title { grid-column: 1; grid-row: 1; align-self: end; }
  html:not(.hero-motion) .track__fold { grid-column: 1; grid-row: 2; align-self: start; }
}

/* ─── Что принимаем ───────────────────────────────────────────────────── */
.accept__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap-l);
  align-items: start;
}
.accept__head { grid-column: 1 / span 6; }
.accept__lead {
  grid-column: 8 / span 5;
  align-self: end;
  color: var(--ash-ink);
}

/* Металл теперь один, и блок стал широким: кадр слева, текст справа.
   Кадр уходит за левое поле страницы, к самому краю экрана — единственная
   секция, которая нарочно ломает колонку. */
.metal {
  grid-column: 1 / -1;
  margin-top: clamp(36px, 6vh, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--col-label));
  gap: var(--col-gap);
  align-items: end;
}
.metal__frame {
  /* span по умолчанию inline, а к inline не применяется ни aspect-ratio,
     ни overflow — рамка схлопывается и фотография не видна */
  display: block;
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 2;
  /* подложка на время загрузки: тёмная на светлой странице читается
     как дыра в макете, если картинка идёт медленно */
  background: var(--bordeaux-8);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
@media (min-width: 901px) {
  .metal__frame { margin-left: calc(-1 * var(--gutter)); }
}
.metal__img {
  position: absolute; inset: -8% 0;
  width: 100%; height: 116%;
  object-fit: cover;
}
.metal:hover .metal__frame,
.metal:focus-within .metal__frame {
  transform: translateY(-14px);
  box-shadow: 0 26px 48px -22px rgba(26, 11, 16, 0.55);
}
.metal__body { padding-bottom: clamp(6px, 1.4vh, 16px); }
.metal__name { font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); line-height: 0.9; margin: 0 0 10px; }
.metal__text { margin: 0; color: var(--ash-ink); max-width: 34ch; }

.accept__no {
  grid-column: 1 / -1;
  margin-top: clamp(40px, 7vh, 90px);
  padding-top: clamp(20px, 3vh, 32px);
  border-top: 1px solid var(--bordeaux-16);
  display: grid; grid-template-columns: minmax(200px, var(--col-label)) 1fr;
  gap: var(--col-gap);
}
.accept__no h3 { margin: 0; font-size: var(--fs-body); font-weight: 600; }
.accept__no p { margin: 0; color: var(--ash-ink); max-width: 62ch; }

/* ─── Доверие ─────────────────────────────────────────────────────────── */
.trust__grid {
  display: grid; grid-template-columns: minmax(260px, var(--col-label)) 1fr;
  gap: var(--col-gap);
  margin-top: clamp(36px, 6vh, 72px);
  align-items: start;
}
.person__name { font-size: calc(clamp(1.9rem, 3vw, 2.8rem) * var(--display-scale)); line-height: 0.94; margin: 0 0 12px; }
.person__role { margin: 0; font-size: var(--fs-lead); }
.person__note {
  margin: clamp(20px, 3vh, 30px) 0 0;
  padding-top: clamp(14px, 2vh, 20px);
  border-top: 1px solid var(--bordeaux-16);
  color: var(--ash-ink); max-width: 34ch;
}

.trust__interior { margin: 0; }
.interior { display: block; position: relative; overflow: hidden; aspect-ratio: 3 / 2; }
.interior img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; }
.interior__cap { margin: 12px 0 0; color: var(--ash-ink); font-size: var(--fs-small); }

.licence {
  margin: clamp(36px, 6vh, 72px) 0 0;
  background: var(--bordeaux); color: var(--ivory);
  padding: clamp(24px, 3.4vw, 44px);
  border-left: 3px solid var(--gold);
  font-size: var(--fs-lead); line-height: 1.45;
  max-width: 78ch;
}

/* ─── Обмен валют: сноска с золотой линейкой слева ───────────────────── */
.currency__band {
  display: grid; grid-template-columns: minmax(180px, var(--col-label)) 1fr;
  gap: var(--col-gap);
  border-left: 3px solid var(--gold);
  /* по вертикали ровно по содержанию: золотая линейка не должна торчать
     на семьдесят пикселей выше и ниже того, что она скобит */
  padding: clamp(22px, 2.6vw, 34px) clamp(24px, 4vw, 64px);
}
.currency__title { font-size: calc(clamp(1.9rem, 3.2vw, 2.9rem) * var(--display-scale)); line-height: 0.94; }
.currency__body { margin: 0; max-width: 80ch; color: var(--ash-ink); font-size: var(--fs-lead); }

/* ─── Контакты ────────────────────────────────────────────────────────── */
.contacts__grid {
  margin-top: clamp(36px, 6vh, 72px);
  display: grid; grid-template-columns: 1fr minmax(280px, var(--col-label));
  gap: var(--col-gap);
  align-items: start;
}
.contacts__side { display: flex; flex-direction: column; }
.place { max-width: 100%; }
.place__line {
  font-family: var(--display); font-weight: 700;
  font-size: calc(clamp(2rem, 3.6vw, 3.4rem) * var(--display-scale)); line-height: 0.92;
  margin: 0;
}
.place__hours { margin-top: clamp(22px, 3vh, 34px); }
.place__sub { margin: 8px 0 0; color: var(--ash-ink); }

.place__money {
  margin: 0 0 clamp(24px, 3.2vh, 34px);
  padding-top: clamp(16px, 2.2vh, 24px);
  border-top: 1px solid var(--bordeaux-16);
  display: grid; gap: 4px;
}
.place__money-label { color: var(--ash-ink); font-size: var(--fs-small); }

.contacts__actions { display: flex; flex-wrap: wrap; gap: var(--gap-xs); }

/* Заглушка карты — узкая полоса, а не пустой прямоугольник на пол-экрана:
   зарезервированное место должно выглядеть зарезервированным. */
.map-stub {
  margin: clamp(30px, 4vh, 48px) 0 0;
  min-height: 84px;
  border: 1px dashed var(--bordeaux-16);
  display: flex; align-items: center;
  padding: var(--gap-m) clamp(18px, 3vw, 32px);
  color: var(--ash-ink); font-size: var(--fs-small);
}

/* ─── подвал ──────────────────────────────────────────────────────────── */
.footer {
  background: var(--prune); color: var(--ivory);
  padding-block: clamp(56px, 7vw, 110px) clamp(30px, 4vw, 52px);
}
.footer__grid {
  display: grid; grid-template-columns: minmax(180px, var(--col-label)) 1fr 1fr;
  gap: var(--col-gap);
  align-items: start;
}
.footer__legal { margin: 0; line-height: 1.7; font-size: var(--fs-small); }
.footer__legal dt { color: var(--ash); }
.footer__legal dd { margin: 0 0 14px; }
.footer__bottom {
  list-style: none; margin: clamp(36px, 5vw, 70px) 0 0; padding: var(--gap-m) 0 0;
  border-top: 1px solid var(--ivory-faint);
  display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 3vw, 40px);
  color: var(--ash); font-size: var(--fs-micro);
}
/* косая принадлежит следующему пункту, поэтому не остаётся висеть
   в конце строки и не открывает строку в одиночку */
.footer__bottom li + li::before { content: '/'; color: var(--gold); margin-right: 1em; }
.footer__bottom-wide { flex-basis: 100%; }
.footer__bottom-wide::before { display: none; }
.footer .logo { color: var(--ivory); }
.footer .sep { color: var(--gold); }

/* Пометка о черновом переводе — только в казахской версии. На русской
   строка приходит из словаря пустой, и правило :empty её убирает. */
.footer__translation {
  margin: clamp(16px, 2vh, 22px) 0 0;
  color: var(--ash); font-size: var(--fs-micro);
  letter-spacing: 0.06em;
}
.footer__translation:empty { display: none; }

/* ─── адаптив ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* то же, что в меню: столбик вместо строки с косыми */
  .footer__bottom { flex-direction: column; gap: 6px; }
  .footer__bottom li + li::before { content: none; }
}

@media (max-width: 900px) {
  .contacts__grid,
  .trust__grid { grid-template-columns: 1fr; }
  .accept__head, .accept__lead { grid-column: 1 / -1; }
  .accept__lead { margin-top: var(--gap-s); }
  .metal { grid-template-columns: 1fr; align-items: start; gap: var(--gap-m); }
  .metal__frame { aspect-ratio: 4 / 3; }
  .accept__no, .currency__band, .contacts__grid { grid-template-columns: 1fr; }
  .currency__band { padding-inline: clamp(18px, 5vw, 30px); }
  .footer__grid { grid-template-columns: 1fr; }
}