/* Фирменный шрифт заголовка. Лежит локально: внешние CDN из РФ нестабильны,
   а без своего шрифта заголовок разъезжается. Исходные ttf — в assets/fonts/vk-sans. */
@font-face {
  font-family: 'VK Sans Display Condensed';
  src: url('/fonts/vk-sans-display-condensed-black-italic.woff2?v=1790553103') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Макет: 420 x 910 (iPhone Air). Всё внутри сцены считается в долях этой ширины:
   --k — цена одной «макетной» единицы в пикселях. Так вёрстка масштабируется
   целиком и остаётся pixel perfect на любой ширине. */

:root {
  --design-w: 420;
  --design-h: 910;
  --stage-max: 520px;
  /* На телефоне сцена всегда во всю ширину экрана. Высотой её не ограничиваем:
     svh в Safari меньше реальной высоты из-за панелей, и кадр начинал ужиматься. */
  --stage-w: 100vw;
  --k: calc(var(--stage-w) / var(--design-w));

  /* Второй масштаб — для текста. Он берёт в расчёт ещё и высоту окна, чтобы на
     коротких экранах блок ужимался и не наезжал на шарик и лабиринт в кадре.
     На высоком экране работает как обычный --k. */
  --k-text: min(var(--k), calc(100svh / var(--design-h)));

  --bg: #c6d5f5;
  --brand: #0077ff;
  --ink: #000;
  --btn-secondary-bg: rgba(0, 28, 61, 0.05);

  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter',
             'Segoe UI', Roboto, sans-serif;
  --font-display: 'VK Sans Display Condensed', var(--font-ui);
}

/* Планшет и десктоп: макет мобильный, поэтому держим его колонкой по центру
   и здесь уже считаемся с высотой окна — иначе кадр 9:16 не влезет. */
@media (min-width: 520px) {
  :root {
    --stage-w: min(var(--stage-max), calc(100svh * 420 / 910));
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overscroll-behavior-y: none; /* гасим «резинку», иначе прогресс дёргается на краях */
  overflow-x: hidden;          /* 100vw шире вьюпорта при видимом скроллбаре — иначе поля разъезжаются */
}

/* Длина прокрутки, за которую проигрывается ролик. */
.track {
  height: 320svh;
  position: relative;
  width: 100%;
  overflow-x: clip;
}

.stage {
  position: sticky;
  top: 0;
  height: 100svh;
  width: var(--stage-w);
  margin-inline: auto;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}

/* ---------- медиа ---------- */

.media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.media__poster,
.media__video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  /* 9:16 от ширины даёт ровно 746.67 при 420 — как в макете */
  aspect-ratio: 9 / 16;
  height: auto;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.media__video {
  opacity: 0;
  transition: opacity 260ms ease;
  will-change: opacity;
}
.media__video.is-ready { opacity: 1; }

/* Пока видео не показано, постер остаётся сверху и не мигает. */
.media__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Плавный уход кадра в фон, чтобы текст читался. */
.media__fade {
  position: absolute;
  left: 0;
  right: 0;
  /* тянем до самого низа сцены, чтобы нижний край кадра нигде не читался линией */
  top: calc(400 * var(--k));
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(198, 213, 245, 0) 0%,
    rgba(198, 213, 245, 0.55) 26%,
    rgba(198, 213, 245, 0.92) 45%,
    var(--bg) 58%,
    var(--bg) 100%
  );
  pointer-events: none;
}

/* ---------- шапка ----------
   Одна на весь документ, поверх обоих экранов: закреплена (position: fixed) и не
   пересоздаётся на стыке между ними — раньше у каждого экрана была своя копия,
   и на границе она визуально «прыгала». Ширина и центрирование те же, что у
   сцены (--stage-w/--k), поэтому логотип на обоих экранах стоит в одной точке. */

.site-topbar {
  position: fixed;
  z-index: 50;
  top: max(calc(20 * var(--k)), env(safe-area-inset-top));
  left: 50%;
  width: var(--stage-w);
  transform: translateX(-50%);
  padding-inline: calc(22 * var(--k));
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;   /* клики проходят к контенту под шапкой, кроме самих элементов */
}
.site-topbar__logo,
.site-topbar__menu { pointer-events: auto; }

.site-topbar__logo {
  width: calc(148.5 * var(--k));
  height: auto;   /* пропорции берём из самого svg (149x27) */
  display: block;
}

.site-topbar__menu {
  width: calc(28 * var(--k));
  height: calc(28 * var(--k));
  padding: 0;
  border: 0;
  background: none;   /* в макете у иконки нет подложки */
  cursor: pointer;
  display: block;
  -webkit-tap-highlight-color: transparent;
}
.site-topbar__menu img { width: 100%; height: 100%; display: block; }

/* ---------- контент ---------- */

.content {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  /* Прижимаем к низу. Учитываем вырез/индикатор, но не оставляем лишней пустоты:
     панель Safari уже учтена в svh, поэтому свой запас держим небольшим. */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12 * var(--k));
}

.title {
  margin: 0;
  width: calc(323 * var(--k));
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: calc(56 * var(--k-text));
  line-height: 0.98;
  text-transform: uppercase;
  /* Крупнее в первом состоянии, к концу прокрутки ужимается до макетного размера.
     Через scale, а не font-size: кегль пересчитывал бы вёрстку на каждом кадре.
     Растём от нижнего левого угла — подзаголовок и кнопки остаются на месте. */
  transform-origin: left bottom;
  transform:
    translate3d(calc((22 + 26 * var(--p, 0)) * var(--k)), calc(-15 * var(--p, 0) * var(--k)), 0)
    scale(calc(1.18 - 0.18 * var(--p, 0)));
  will-change: transform;
}

.title__line {
  display: block;
  width: max-content;   /* ширина по тексту — JS по ней считает сдвиг */
  max-width: 100%;
  white-space: nowrap;
  /* --shift ставит JS: насколько сдвинуть строку, чтобы получилось центрирование */
  transform: translate3d(calc(var(--shift, 0px) * var(--p, 0)), 0, 0);
  will-change: transform;
}

.title i {
  font-style: italic;
  color: var(--brand);
}

.lead {
  margin: calc(10 * var(--k)) 0 0;   /* у заголовка большой нижний просвет — зазор держим меньше */
  width: calc(310 * var(--k));
  font-size: calc(17 * var(--k-text));
  line-height: calc(21 * var(--k-text));
  letter-spacing: -0.02em;
  /* 22 слева -> 55, чтобы блок шириной 310 встал ровно по центру макета (420) */
  transform: translate3d(calc((22 + 33 * var(--p, 0)) * var(--k)), calc(-14 * var(--p, 0) * var(--k)), 0);
  will-change: transform;
}

.lead__line {
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  transform: translate3d(calc(var(--shift, 0px) * var(--p, 0)), 0, 0);
  will-change: transform;
}

.lead i {
  font-style: normal;
  color: var(--brand);
}

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

.actions {
  margin-top: calc(24 * var(--k));
  padding-inline: calc(26 * var(--k));
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--k));
}

.btn {
  height: calc(44 * var(--k));
  border-radius: calc(10 * var(--k));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: calc(17 * var(--k));
  font-weight: 510;
  line-height: calc(22 * var(--k));
  letter-spacing: -0.0241em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms ease, opacity 140ms ease;
}

.btn:active { transform: scale(0.985); opacity: 0.9; }

.btn--primary { background: var(--brand); color: #fff; }
.btn--secondary { background: var(--btn-secondary-bg); color: var(--brand); }

/* ---------- доступность ---------- */

@media (prefers-reduced-motion: reduce) {
  /* Прокрутка больше не двигает кадр: показываем финальное состояние статично. */
  .track { height: 100svh; }
  .media__video { display: none; }
  .title, .lead, .title__line, .lead__line { transition: none; }
}

@supports not (height: 100svh) {
  .track { height: 320vh; }
  .stage { height: 100vh; }
}

/* ============================================================
   Экран 2 — «Образовательно-карьерный сериал»
   ============================================================

   Механика: прокрутка секции переключает раскрытую карточку. Сумма раскрытий
   трёх карточек всегда равна 1, а прибавка высоты у всех одна и та же (--open),
   поэтому общая высота стопки не меняется ни на один пиксель — ни сцена, ни
   документ не пересобираются, и ничего не дёргается.

   JS на каждом кадре ставит карточке четыре числа:
     --o      0..1 — насколько раскрыта (двигает высоту и сдвиг соседей)
     --s      0..1 — насколько разъехался заголовок
     --e      0..1 — иконка в разрыве заголовка (появляется чуть позже)
     --a      0..1 — прозрачность содержимого
     --before     — сумма --o карточек выше: на столько её сдвинуть вниз
   и одно на секцию: --open (px) — прибавка высоты у раскрытой карточки.

   Ширина колонки (--k) — тот же общий масштаб страницы, что и у первого экрана
   (см. :root выше): она никогда не зависит от высоты, поэтому колонка всегда
   во всю ширину экрана. Единственное, что меряет JS, — реальную высоту текста
   после подстановки шрифта, чтобы раскрытая панель (--open) была нужной высоты
   и, если места по вертикали мало, не выходила за пределы экрана. */

@font-face {
  /* В макете подписи в бейджах набраны VK Sans Display Expanded — такого
     начертания у нас нет, берём обычный VK Sans Display Bold. */
  font-family: 'VK Sans Display';
  src: url('/fonts/vk-sans-display-bold.woff2?v=1790553103') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.series {
  --open: 0px;
  --blue: #0077ff;
  --cyan: #7cedf8;
  --pink: #ff3985;

  position: relative;
  width: 100%;
  height: 340svh;            /* длина прокрутки: 2.4 экрана на три состояния */
  overflow-x: clip;
  background: var(--bg);
}

.series__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
}

/* Колонка макета: на телефоне во всю ширину, на коротком или широком экране
   ужимается целиком — пропорции и переносы строк при этом не меняются. */
.deck {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(420 * var(--k));
  height: 100%;
  transform: translateX(-50%);
}

/* Шапка здесь не рисуется — на этом экране виден тот же .site-topbar,
   закреплённый один раз для всей страницы (см. выше). */

/* ---------- вводная карточка ---------- */

.intro {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(70 * var(--k));
  height: calc(246 * var(--k));
  padding: calc(24 * var(--k)) calc(19 * var(--k)) 0;
  border-radius: calc(46 * var(--k));
  background: var(--blue);
  color: #fff;
}

.intro__title {
  margin: 0;
  width: calc(385 * var(--k));
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: calc(48 * var(--k));
  line-height: 1.02;
  text-transform: uppercase;
}

.intro__lead {
  margin: calc(14 * var(--k)) 0 0;
  width: calc(341 * var(--k));
  font-size: calc(16 * var(--k));
  line-height: calc(20 * var(--k));
  letter-spacing: -0.02em;
}

/* ---------- стопка карточек ---------- */

.cards {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(316 * var(--k));
  /* три свёрнутых (93) + прибавка одной раскрытой — величина постоянная */
  height: calc(279 * var(--k) + var(--open));
}

.card {
  --o: 0;
  --s: 0;
  --e: 0;
  --a: 0;
  --before: 0;

  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* Карточка всегда максимальной высоты, а «свёрнутость» — это обрезка снизу.
     Так во время прокрутки не меняется ни один размер: браузеру не нужно
     пересчитывать вёрстку, остаются только композитные свойства. */
  height: calc(93 * var(--k) + var(--open));
  clip-path: inset(0 0 calc((1 - var(--o)) * var(--open)) 0 round calc(46 * var(--k)));
  border-radius: calc(46 * var(--k));
  overflow: hidden;
  /* сдвиг = свёрнутые карточки выше + их суммарная прибавка */
  transform: translate3d(0, calc(var(--i, 0) * 93 * var(--k) + var(--before) * var(--open)), 0);
  will-change: transform, clip-path;
}

.card--dev     { background: var(--cyan); --accent: var(--blue); --text: #272727; --rule: rgba(0, 0, 0, 0.09); }
.card--ai      { background: var(--pink); --accent: #fff;        --text: #fff;    --rule: rgba(255, 255, 255, 0.4); }
.card--product { background: var(--blue); --accent: #fff;        --text: #fff;    --rule: rgba(255, 255, 255, 0.4); }

/* ---------- заголовок карточки ---------- */

.card__title {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(93 * var(--k));
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: calc(61 * var(--k));
  line-height: 1;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  user-select: none;
}

/* Половинки разъезжаются от шва; ширина строки при этом не меняется,
   поэтому заголовок остаётся на месте и не «плывёт» по горизонтали. */
.card__half {
  transform: translate3d(calc(var(--dir) * 22 * var(--k) * var(--s)), 0, 0);
  will-change: transform;
}
.card__half:first-child { --dir: -1; }
.card__half:last-child  { --dir: 1; }

/* Шов нулевой ширины: иконка висит ровно в точке разрыва, где бы та ни была
   (у «РАЗ|РАБОТКА» она не по центру слова). */
.card__seam {
  position: relative;
  width: 0;
  height: 0;
  flex: 0 0 0;
}

.card__icon {
  position: absolute;
  left: calc(-23 * var(--k));
  top: calc(-24 * var(--k));
  width: calc(46 * var(--k));
  height: calc(46 * var(--k));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'VK Sans Display', var(--font-ui);
  font-weight: 700;
  font-style: normal;
  font-size: calc(20 * var(--k));
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  opacity: var(--e);
  transform: scale(calc(0.35 + 0.65 * var(--e)));
  will-change: transform, opacity;
}

.card__icon--code { font-size: calc(16 * var(--k)); }

.card--dev     .card__icon { color: var(--cyan); }
.card--ai      .card__icon { color: var(--pink); }
.card--product .card__icon { color: var(--blue); }

/* ---------- форма значков ----------
   В макете у «Разработки» и у «ИИ» разные значки, а не одна и та же форма:
   — «капля» (Frame 22 из Figma) — сложный контур, не выражается border-radius,
     поэтому берём готовый SVG-контур как маску и заливаем цветом карточки;
   — «таблетка» — плоский левый край, справа ровный полукруг (44×44, поэтому
     border-radius 0/50%/50%/0 даёт математически точный полукруг). */

.badge--blob {
  background-color: var(--accent);
  -webkit-mask: url('/brand/badge-blob.svg') center / 100% 100% no-repeat;
  mask: url('/brand/badge-blob.svg') center / 100% 100% no-repeat;
}

.badge--pill {
  background-color: var(--accent);
  border-radius: 0 50% 50% 0;
}

/* ---------- раскрывающаяся часть ---------- */

.card__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(93 * var(--k));
  height: var(--open);
  overflow: hidden;
  opacity: var(--a);
  will-change: opacity;
}

.card__list {
  margin: 0;
  padding: 0 calc(20 * var(--k)) calc(23 * var(--k)) calc(26 * var(--k));
  list-style: none;
  color: var(--text);
  /* Прибавка высоты у всех карточек одна (по самой длинной), иначе стопка
     меняла бы размер. У карточек покороче остаток раздаём между пунктами,
     чтобы низ не пустовал. */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* На время замера отпускаем высоту: JS берёт естественный размер текста. */
.series.is-measuring .card__list { height: auto; }

.step {
  display: flex;
  gap: calc(10 * var(--k));
  align-items: flex-start;
}

.step + .step {
  margin-top: calc(14 * var(--k));
  padding-top: calc(14 * var(--k));
  border-top: 1px solid var(--rule);
}

.step__badge {
  flex: 0 0 auto;
  width: calc(46 * var(--k));
  height: calc(46 * var(--k));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'VK Sans Display', var(--font-ui);
  font-weight: 700;
  font-size: calc(20 * var(--k));
  line-height: 1;
}

.card--dev     .step__badge { color: var(--cyan); }
.card--ai      .step__badge { color: var(--pink); }
.card--product .step__badge { color: var(--blue); }

.step__text {
  margin: 0;
  font-size: calc(16 * var(--k));
  line-height: calc(17 * var(--k));
  letter-spacing: -0.02em;
}

/* ---------- доступность ---------- */

@media (prefers-reduced-motion: reduce) {
  /* Без анимации прокрутки показываем всё сразу обычным потоком. */
  .series { height: auto; }
  .series__stage { position: static; height: auto; padding-bottom: calc(24 * var(--k)); }
  .deck { position: relative; left: auto; transform: none; height: auto; margin-inline: auto; }
  .intro {
    position: relative;
    top: auto;
    height: auto;
    min-height: calc(246 * var(--k));
    padding-bottom: calc(24 * var(--k));
    margin-top: calc(6 * var(--k));
  }
  .cards { position: relative; top: auto; height: auto; display: flex; flex-direction: column; }
  .card { position: relative; height: auto; transform: none; clip-path: none; will-change: auto; }
  .card__title { position: relative; }
  .card__panel { position: relative; top: auto; height: auto; opacity: 1; }
  .card__half { transform: translate3d(calc(var(--dir) * 22 * var(--k)), 0, 0); }
  .card__icon { opacity: 1; transform: none; }
}

@supports not (height: 100svh) {
  .series { height: 340vh; }
  .series__stage { height: 100vh; }
}

/* Отладка: ?sp=0..1 показывает только экран «Сериал» в заданном состоянии. */
.series-only .track { display: none; }
.series-only .series { height: 100svh; }