/* ==========================================================================
   home.css — секции главной страницы.
   Ничего нового в цветах: всё берётся из css/tokens.css.
   ========================================================================== */


.section__head {
  max-width: 720px;
  margin-bottom: var(--space-6);
}

@media (min-width: 48em) {
  .section__head {
    margin-bottom: var(--space-7);
  }
}


/* ==========================================================================
   1. ПЕРВЫЙ ЭКРАН

   Тёмная полоса во всю ширину — единственное тёмное место в верхней половине
   сайта. Дальше страница светлая, и этот перепад работает вместо картинки:
   первый экран читается как обложка, а не как начало ленты.

   Иллюстрация здесь одна — маршрут из Ашхабада. Ни фотографий, ни глобусов.
   ========================================================================== */

.hero {
  position: relative;
  background-color: var(--dark);
  color: var(--on-dark);
  /* Шапка над этим экраном прозрачная и вынута из потока,
     поэтому отступ сверху закладываем сами. */
  padding-block: calc(var(--header-h) + var(--space-5)) var(--space-6);
  overflow: hidden;
}

@media (min-width: 56.25em) {
  .hero {
    display: flex;
    align-items: center;
    /* Экран целиком, но не выше разумного: на очень высоком мониторе
       растягивать первый экран не за чем.

       Две строки подряд — это не опечатка. Первая для браузеров, которые
       не знают dvh, вторая для тех, кто знает: на телефоне адресная строка
       уезжает, и обычный vh показывает высоту, которой на экране нет. */
    min-height: min(100vh, 900px);
    min-height: min(100dvh, 900px);
    padding-block: calc(var(--header-h) + var(--space-8)) var(--space-8);
  }
}

/* Телефон в повороте: 844×390 и 932×430. Экран низкий, и первый экран
   во всю его высоту превращается в нечитаемую полосу. Поэтому здесь он
   не растягивается, отступы меньше, а маршрут не занимает всю высоту. */
@media (orientation: landscape) and (max-height: 34em) {
  .hero {
    min-height: 0;
    padding-block: calc(var(--header-h) + var(--space-5)) var(--space-6);
  }

  .hero__art .route--narrow {
    margin-top: var(--space-3);
    max-width: 300px;
  }
}

/* Тот же поворот, но экран уже 640 пунктов и шире: текст и маршрут
   встают рядом, а не друг под другом. Иначе на 844×390 первый экран
   растягивается на три высоты экрана, и до сути приходится листать. */
@media (orientation: landscape) and (max-height: 34em) and (min-width: 40em) {
  .hero__grid {
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-6);
    align-items: center;
  }

  .hero__art .route--narrow {
    margin-top: 0;
    max-width: 260px;
  }

  .hero__lead {
    font-size: var(--text-base);
  }

  /* В повороте вертикали мало: заголовок сбавляет, чтобы кнопки
     оказались ближе к первому экрану, а не под ним. */
  .hero__title {
    font-size: clamp(1.75rem, 4.6vw, 2.5rem);
    margin-bottom: var(--space-4);
  }
}

.hero__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

/* Колонка сетки по умолчанию не может стать уже своего содержимого.
   Без этого при увеличенном шрифте первый экран выталкивает страницу вбок. */
.hero__content,
.hero__art {
  min-width: 0;
}

@media (min-width: 56.25em) {
  .hero__grid {
    width: 100%;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-8);
  }
}

/* --- Левая колонка --------------------------------------------------------- */

.hero .eyebrow {
  color: var(--copper-on-dark);
}

.hero .eyebrow::before {
  background-color: var(--copper-light);
}

.hero__title {
  margin-bottom: var(--space-5);
  color: var(--on-dark);
}

.hero__lead {
  font-size: var(--text-lg);
  color: var(--on-dark-muted);
  max-width: 46ch;
}

/* Оба действия одной ширины: колонка сетки шириной с самое длинное из
   них, остальные растягиваются до неё. Раньше это был flex, и надписи
   разной длины давали две рамки разной ширины — в стопке это выглядело
   неряшливо, особенно по-русски.

   minmax(0, max-content), а не просто max-content: на узком экране
   длинная надпись иначе вытолкнула бы страницу вбок. */
.hero__actions {
  display: grid;
  grid-template-columns: minmax(0, max-content);
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* На узком экране обе — во всю ширину */
@media (max-width: 32.4375em) {
  .hero__actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Вторая кнопка на тёмном оформлена модификатором btn--on-dark
   в css/base.css — здесь дублировать не нужно. */

/* Второе действие на первом экране — не кнопка, а ссылка со стрелкой:
   выбор должен быть один и очевидный, остальное — подсказка. */
.hero__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  margin-top: var(--space-4);
  color: var(--copper-on-dark);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.hero__more .icon {
  transition: transform var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .hero__more:hover {
    color: var(--on-dark);
  }

  .hero__more:hover .icon {
    transform: translateX(3px);
  }
}

.hero :focus-visible {
  outline-color: var(--copper-on-dark);
}


/* ==========================================================================
   МАРШРУТ — единственная иллюстрация первого экрана

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

   Всё движение живёт в CSS. При системной настройке «уменьшить движение»
   общее правило в base.css обнуляет длительности: линия видна целиком,
   самолёт стоит в начале пути, подписи не мигают.
   ========================================================================== */

.hero__art {
  display: flex;
  justify-content: center;
}

/* Маршрут есть в двух видах, и одновременно виден только один.

   Узкий, 420×260, — полоса под текстом: на телефоне четыре линии в неё
   не влезут, поэтому там два самых разнесённых направления, запад и восток.
   Широкий, 420×720, — колонка рядом с текстом, четыре направления.

   Спрятанный вариант именно display:none, а не прозрачность: так его
   анимации не идут вовсе и не тратят батарею впустую. */

.hero__art {
  display: flex;
  justify-content: center;
}

.hero__art .route--wide {
  display: none;
}

.hero__art .route--narrow {
  width: 100%;
  max-width: 480px;
  height: auto;
  margin-top: var(--space-4);
}

/* На большом экране маршрут задан не шириной, а высотой: он должен идти
   во всю высоту первого экрана, а ширину подберёт сам по пропорциям. */
@media (min-width: 56.25em) {
  .hero__art {
    align-items: center;
  }

  .hero__art .route--narrow {
    display: none;
  }

  .hero__art .route--wide {
    display: block;
    width: auto;
    max-width: 100%;
    height: min(74vh, 720px);
    height: min(74dvh, 720px);
  }
}

/* --- Линия маршрута -------------------------------------------------------

   Линия выезжает из Ашхабада: классическая прорисовка через stroke-dashoffset.
   Штрихи при этом даёт маска — если бы пунктир был на самой линии, её
   stroke-dasharray был бы занят и рисовать стало бы нечем.

   Раньше было наоборот: пунктир на линии, прорисовка внутри маски.
   Так не работает — Chrome перестаёт пересчитывать содержимое маски
   на ходу, и линия замирала недорисованной. Анимация должна жить
   на видимом элементе, а маска — стоять на месте.

   Длина каждой кривой приходит из разметки в --len, а задержка в --draw:
   и то и другое считает scripts/sync-layout.js. Линии прорисовываются
   по очереди, а не хором. */

.route__line {
  stroke: var(--copper-light);
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  animation: route-draw 1500ms var(--ease-out) var(--draw, 200ms) forwards;
}

@keyframes route-draw {
  to { stroke-dashoffset: 0; }
}


/* --- Точки маршрута -------------------------------------------------------- */

.route__ring        { stroke: var(--copper-light); opacity: 0.5; }
.route__dot         { fill: var(--copper-on-dark); }
.route__dot--end    { fill: var(--copper-on-dark); }

/* Круг, расходящийся от точки прибытия. Отрицательная задержка разводит
   точки по фазе: иначе все пульсируют в такт, как сигнальные огни. */
.route__pulse {
  stroke: var(--copper-light);
  transform-box: fill-box;
  transform-origin: center;
  animation: route-pulse 3.4s var(--ease-hover) infinite;
  animation-delay: calc(var(--i, 0) * -0.85s);
}

@keyframes route-pulse {
  0%   { opacity: 0.5;  transform: scale(1); }
  70%  { opacity: 0;    transform: scale(1.9); }
  100% { opacity: 0;    transform: scale(1.9); }
}

/* --- Огни городов ---------------------------------------------------------- */

.route__city {
  fill: var(--on-dark);
  opacity: 0.2;
  transform-box: fill-box;
  transform-origin: center;
  /* Отрицательная задержка: каждая точка вступает не с начала,
     поэтому огни мигают вразнобой, а не хором. */
  animation: city-glow 4.5s var(--ease-hover) infinite;
  animation-delay: calc(var(--i, 0) * -0.7s);
}

@keyframes city-glow {
  0%, 100% { opacity: 0.16; transform: scale(1); }
  50%      { opacity: 0.5;  transform: scale(1.25); }
}

/* --- Самолёты --------------------------------------------------------------

   У каждого маршрута свой самолёт. Путь, длительность и задержка вылета
   приходят из разметки: --path, --dur, --delay. Вылеты разведены примерно
   на секунду, длительности разные — иначе четыре самолёта идут строем.

   Двигаются только offset-distance и opacity, то есть браузер обходится
   без пересчёта вёрстки: смещение вдоль пути он делает трансформацией. */

.route__plane {
  fill: var(--copper-on-dark);
  offset-path: var(--path);
  offset-rotate: auto;
  offset-distance: 0%;
  animation: plane-fly var(--dur, 10s) cubic-bezier(0.45, 0, 0.55, 1) var(--delay, 1400ms) infinite;
}

@keyframes plane-fly {
  0%   { offset-distance: 0%;   opacity: 0; }
  6%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* --- Подписи --------------------------------------------------------------- */

.route__label {
  fill: var(--on-dark);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}

/* Города прибытия. Раньше подписи сменялись по очереди в одной точке —
   теперь у каждой точки своя, и меняться ей незачем. */
.route__label--end {
  fill: var(--copper-on-dark);
}

/* Движение выключено в системе — маршрут должен остаться осмысленной
   картинкой, а не обрывком незаконченной анимации.
   Показываем: линии целиком, самолёты в полёте, все подписи на месте. */
@media (prefers-reduced-motion: reduce) {

  .route__line {
    animation: none;
    stroke-dashoffset: 0;
  }

  .route__plane {
    animation: none;
    /* Не в самом начале пути, а в полёте: так картинка выглядит
       законченной, а не остановленной на полуслове. */
    offset-distance: 46%;
    opacity: 1;
  }

  .route__pulse {
    animation: none;
    opacity: 0;
  }

  .route__city {
    animation: none;
    opacity: 0.22;
  }
}


/* ==========================================================================
   КНОПКИ ПЕРВОГО ЭКРАНА

   Оба действия одинаковы по цвету и весу: медная рамка на тёмном, без
   заливки, одного размера. Различает их самолётик, который бесконечно
   летит по контуру главного.
   ========================================================================== */

/* Обещание набрано как кнопка, но кнопкой не является: это утверждение,
   нажимать его некуда.

   Селектор длиннее, чем хотелось бы: ниже в файле стоит общее правило
   .hero .badge с заливкой, и без третьего класса оно перебило бы это. */
.hero .hero__actions .badge {
  padding: var(--space-4) var(--space-6);
  min-height: 52px;
  background-color: transparent;
  border: 1px solid var(--copper-light);
  border-radius: var(--radius-md);
  color: var(--on-dark);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  /* Та же межстрочная высота, что у кнопки рядом. Без неё обещание
     наследует обычную для текста 1.6 и становится на 8 пикселей выше —
     рядом две рамки заметно разной высоты. */
  line-height: 1.2;
}

/* --- Самолётик вокруг главной кнопки ---------------------------------------

   Путь — скруглённый прямоугольник по контуру кнопки. Он не задан здесь,
   а приходит из js/motion.js в переменной --orbit-path: надписи на трёх
   языках разной длины, и на глаз путь не подогнать. Пока путь не посчитан,
   самолёта не видно — иначе он мигнул бы в углу.

   Обрезать его нечем: ни у .orbit, ни у .hero__actions нет overflow. */

.orbit {
  position: relative;
  display: flex;
}

/* На узком экране кнопки растянуты на всю ширину. Обёртка тянется сама,
   а кнопку внутри надо растянуть явно, иначе она осталась бы по тексту. */
.orbit > .btn {
  flex: 1 1 auto;
}

.orbit__plane {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  fill: var(--copper-on-dark);
  /* Нажатия проходят сквозь: самолёт нарисован поверх кнопки */
  pointer-events: none;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .orbit.is-ready .orbit__plane {
    opacity: 1;
    offset-path: var(--orbit-path, none);
    /* Знак нарисован носом вверх, поэтому к направлению пути +90° */
    offset-rotate: auto 90deg;
    offset-anchor: 50% 50%;
    offset-distance: 0%;
    /* Круг за шесть секунд: медленно, чтобы не мельтешило */
    animation: orbit-fly 6s linear infinite;
  }

  @keyframes orbit-fly {
    to { offset-distance: 100%; }
  }
}


/* --- Бесконечное движение первого экрана выключается ------------------------

   Пульсация точек, огни и самолёты идут по кругу без конца. Пока первый
   экран на виду — это оживление, а как только он ушёл вверх или вкладку
   свернули, это просто расход батареи. Метку is-still ставит js/motion.js
   по IntersectionObserver и по visibilitychange.

   Именно play-state, а не display: возобновление должно подхватывать
   движение с того же места, а не начинать круг заново. */

.hero.is-still .route__plane,
.hero.is-still .route__pulse,
.hero.is-still .route__city,
.hero.is-still .orbit.is-ready .orbit__plane {
  animation-play-state: paused;
}


/* ==========================================================================
   2. HYZMATLARYMYZ — карточки услуг
   ========================================================================== */

/* Колонки не перечислены, а посчитаны: браузер кладёт столько карточек
   в ряд, сколько влезает при минимальной ширине 17rem. Порогов не нужно —
   сетка перестраивается сама на любой ширине, включая складные телефоны
   и планшет в портрете. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: clamp(var(--space-4), 2vw, var(--space-5));
}

.card {
  display: flex;
  flex-direction: column;
  /* без этого колонка не может стать уже своего содержимого
     и сетка выталкивает страницу вбок при крупном шрифте */
  min-width: 0;
  padding: var(--space-5);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base);
}

@media (min-width: 48em) {
  .card {
    padding: var(--space-6);
  }
}

.card:hover {
  border-color: var(--copper);
}

.card__icon {
  color: var(--copper);
  margin-bottom: var(--space-4);
}

.card__title {
  margin-bottom: var(--space-3);
  /* Размер задан явно: на главной это h3, на странице «Wizalar» — h2.
     Уровень заголовка разный, а выглядеть должны одинаково. */
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

.card__text {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  max-width: none;
}

/* Ссылка «Подробнее» всегда прижата к низу карточки, чтобы
   карточки с разной длиной текста выглядели ровно. */
.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  margin-top: auto;          /* прижимает ссылку к низу карточки */
  padding-top: var(--space-5);
  color: var(--copper-dark);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.card__link .icon {
  transition: transform var(--transition-fast);
}

.card__link:hover .icon {
  transform: translateX(3px);
}


/* --- Услуги на телефоне: строки вместо карточек ----------------------------

   На маленьком экране шесть карточек с абзацами занимали два с половиной
   экрана. Полные описания и так лежат на страницах услуг, поэтому здесь
   остаётся строка: значок, название, три-пять слов и стрелка. Нажимается
   вся строка целиком — ссылка растянута на неё псевдоэлементом, поэтому
   вложенных ссылок не появляется и разметка остаётся прежней.

   На экране от 48em карточки возвращаются в прежнем виде.               */

.card__short {
  display: none;
}

@media (max-width: 47.99em) {

  .card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-4);
    /* Строка примерно в 72 пункта: палец попадает, а шесть строк
       умещаются в один экран. */
    min-height: 72px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    position: relative;
  }

  .card__icon {
    width: 26px;
    height: 26px;
    margin: 0;
  }

  .card__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    letter-spacing: 0;
  }

  .card__short {
    display: block;
    grid-column: 2;
    margin: 2px 0 0;
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
  }

  .card__icon {
    grid-row: 1 / span 2;
  }

  /* От ссылки остаётся одна стрелка, а нажимается вся строка */
  .card__link {
    grid-row: 1 / span 2;
    grid-column: 3;
    align-self: center;
    justify-content: center;
    min-width: var(--tap);
    min-height: var(--tap);
    margin: 0;
    padding: 0;
    font-size: 0;              /* прячем надпись, значок остаётся */
    color: var(--copper);
  }

  .card__link .icon {
    font-size: var(--text-base);
  }

  .card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .card__text {
    display: none;
  }
}


/* ==========================================================================
   3. NÄHILI IŞLEÝÄRIS — пять шагов
   ========================================================================== */

.steps {
  display: grid;
  gap: var(--space-6);
  /* Счётчика здесь нет нарочно: номера шагов стоят прямо в разметке.
     Заведённый и неиспользуемый counter-reset только сбивал с толку —
     по нему можно было решить, что нумерация считается стилями. */
}

.step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-4);
  min-width: 0;
}

/* Столбик с номером. Растягивается на всю высоту шага —
   это нужно, чтобы соединительная линия дотянулась до следующего номера. */
.step__marker {
  position: relative;
}

.step__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background-color: var(--bg);
  border: 1px solid var(--copper);
  border-radius: var(--radius-full);
  color: var(--copper-dark);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

/* Соединительная линия между шагами — пунктирная, как дуга в знаке.
   На телефоне вертикальная, на широком экране становится горизонтальной. */
.step:not(:last-child) .step__marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 48px;
  bottom: calc(-1 * var(--space-6));
  width: 1px;
  background-image: var(--dash-line-vertical);
  opacity: var(--dash-opacity);
}

.step__icon {
  color: var(--copper);
  margin-bottom: var(--space-3);
}

.step__title {
  margin-bottom: var(--space-2);
}

.step__text {
  color: var(--muted);
  font-size: var(--text-sm);
  max-width: 60ch;
}

/* На широком экране шаги встают в ряд, линия становится горизонтальной */
@media (min-width: 64em) {
  .steps {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-5);
  }

  .step {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    /* Без этого grid раздаёт лишнюю высоту строкам, и кружок с номером
       у более коротких шагов «раздувается» — иконки перестают быть в ряд. */
    align-content: start;
  }

  .step:not(:last-child) .step__marker::after {
    left: 56px;
    right: calc(8px - var(--space-5));
    top: 24px;
    bottom: auto;
    width: auto;
    height: 1px;
    background-image: var(--dash-line);
  }
}


/* ==========================================================================
   4. NÄME ÜÇIN BIZ — четыре блока
   Без рамок-карточек: только тонкая линия сверху, чтобы было больше воздуха.
   ========================================================================== */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--space-6) clamp(var(--space-5), 2vw, var(--space-6));
}

/* Значок стоит в одной строке с заголовком, а не отдельной строкой сверху:
   так блок короче на высоту значка, а связь «знак — название» читается
   лучше, чем когда они стоят друг под другом. */
.feature {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.feature__icon {
  width: 24px;
  height: 24px;
  margin: 0;
  color: var(--copper);
}

.feature__title {
  margin: 0;
  font-size: var(--text-h4);
}

.feature__text {
  grid-column: 2;
  margin-top: var(--space-2);
}

.feature__text {
  color: var(--muted);
  font-size: var(--text-sm);
  max-width: none;
}


/* ==========================================================================
   5. UGURLAR — куда чаще всего обращаются

   Сетка карточек: вид города, флаг, страна. Карточки намеренно НЕ ссылки —
   страниц по отдельным странам у нас нет, а вести в никуда нельзя.

   Сама сетка и кнопки фильтра собираются из data/countries.json
   скриптом sync-layout.js — разметку править не нужно.
   ========================================================================== */

/* --- Фильтр по регионам ---------------------------------------------------
   Без скриптов кнопки бесполезны, поэтому до появления класса js
   их не видно, а карточки показаны все. */

.countries__filter {
  display: none;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.js .countries__filter {
  display: flex;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-4);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .chip:hover {
    border-color: var(--copper);
    background-color: var(--copper-tint);
    color: var(--copper-dark);
  }
}

/* Выбранный регион. Признак — aria-pressed, а не лишний класс:
   так состояние кнопки слышно в программе чтения с экрана. */
.chip[aria-pressed="true"] {
  background-color: var(--copper);
  border-color: var(--copper);
  color: #FFFFFF;
  font-weight: var(--weight-semibold);
}

@media (hover: hover) and (pointer: fine) {
  .chip[aria-pressed="true"]:hover {
    background-color: var(--copper-dark);
    border-color: var(--copper-dark);
    color: #FFFFFF;
  }
}


/* --- Сетка ---------------------------------------------------------------- */

/* Две карточки в ряд на 320px, четыре на мониторе — без единого порога.
   min() нужен, чтобы на самых узких экранах карточка могла стать уже
   9rem и сетка не выехала за край. */
.countries__grid {
  display: grid;
  /* Ширина колонки не перечислена порогами, а посчитана: 28vw растёт
     вместе с экраном, а clamp не даёт карточке стать ни уже 8,5rem,
     ни шире 15rem. Получается 2 карточки в ряд на телефоне, 3 на планшете
     в портрете и 4 на мониторе — без единой точки перелома. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(8.5rem, 28vw, 15rem)), 1fr));
  gap: clamp(var(--space-3), 1.6vw, var(--space-5));
  margin: 0;
  padding: 0;
  list-style: none;
}


/* --- Карточка страны ------------------------------------------------------- */

/* Карточка смотрит на свою ширину, а не на ширину экрана: одна и та же
   карточка стоит и в сетке из двух колонок, и из четырёх. */
.countries__grid {
  container-type: inline-size;
}

.country {
  position: relative;
  overflow: hidden;
  /* Переезд при переключении фильтра. Скрипт задаёт сдвиг мгновенно,
     а доигрывает его этот переход — см. js/main.js, раздел 4. */
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
  border-radius: var(--radius-md);
  /* Пропорции 3:2 заданы и здесь, и в атрибутах width/height у картинки:
     место под фотографию занято ещё до того, как она загрузится, поэтому
     страница не дёргается. */
  aspect-ratio: 3 / 2;
  /* Пока фотографии нет, карточка не пустая: тёмная плашка с фирменным
     пунктиром. Флаг и название на ней читаются так же. */
  background-color: var(--dark);
  background-image: var(--dash-line);
  background-size: auto 1px;
  background-position: center bottom 34%;
  background-repeat: repeat-x;
}

.country__photo {
  position: absolute;
  inset: 0;
}

/* picture — просто обёртка, она должна вести себя как блок нужного размера.
   Двигается и масштабируется при наведении только сама картинка. */
.country__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.country__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-hover);
}

/* Затемнение под подписью. Без него светлая фотография съедает текст,
   а какие фотографии подставят завтра — заранее не известно.

   Плотность подобрана по худшему случаю: даже если снимок окажется
   совершенно белым, название получит 11:1 контраста, а город — 5,7:1.
   Поэтому нижняя треть карточки, где и лежит подпись, затемнена
   почти непрозрачно, и только выше затемнение сходит на нет. */
.country::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top,
                      rgba(20, 22, 26, 0.94) 0%,
                      rgba(20, 22, 26, 0.88) 34%,
                      rgba(20, 22, 26, 0.55) 58%,
                      rgba(20, 22, 26, 0.10) 82%,
                      rgba(20, 22, 26, 0) 100%);
}

/* В узкой карточке подпись мельче и плотнее, в широкой — крупнее.
   Считается от ширины сетки, а не окна. */
@container (min-width: 34rem) {
  .country__name { font-size: var(--text-base); }
  .country__label { padding: var(--space-4); }
}

@container (min-width: 52rem) {
  .country__name { font-size: var(--text-lg); }
}

.country__label {
  position: absolute;
  /* Затемнение — это ::after, а псевдоэлемент рисуется последним, поверх
     всего остального. Без этой строки оно легло бы прямо на подпись. */
  z-index: 1;
  inset-inline: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-3);
  padding: var(--space-3);
}

.country__flag {
  grid-row: 1 / span 2;
  width: 24px;
  height: 18px;
  border-radius: 2px;
  /* Тонкая светлая рамка: у флагов Японии и подобных белое поле
     иначе сливается с затемнением. */
  box-shadow: 0 0 0 1px rgba(242, 241, 238, 0.35);
}

.country__name {
  grid-column: 2;
  color: var(--on-dark);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  transition: color var(--transition-fast);
}

.country__city {
  grid-column: 2;
  color: var(--on-dark-muted);
  font-size: var(--text-xs);
  line-height: 1.3;
}

/* Затемнение декоративное: событий мыши ему ловить незачем. Без этой
   строки оно перехватывало бы нажатия у карточки-ссылки — кликабельной
   осталась бы только сама подпись. */
.country::after {
  pointer-events: none;
}

/* Сетка выбора страны считается auto-fill, а не auto-fit, как на главной.

   Причина не вкусовая. При одной карточке WebKit схлопывает у auto-fit
   все колонки в ноль, и карточка пропадает с экрана совсем: замер дал
   «0px 0px» в Safari против «696px 0px» в Chrome. Проверенных стран
   поначалу будет как раз одна-две, так что это не редкий случай, а
   первый же.

   Заодно так честнее выглядит: одна карточка остаётся карточкой, а не
   растягивается во всю строку баннером.

   Правило заведено от 48em и выше: ниже карточки лежат лентой с
   прокруткой пальцем, как на главной, и колонок там нет вовсе. */
@media (min-width: 48em) {
  .countries--plain .countries__grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(8.5rem, 28vw, 15rem)), 1fr));
  }
}


/* --- Карточка-ссылка -------------------------------------------------------

   На главной карточки стран не кликабельны: страниц по странам там нет.
   На странице визы — наоборот, каждая ведёт к требованиям по этой стране.
   Разметка та же самая, добавляется только ссылка вокруг содержимого. */

.country__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Обводка рисуется у всей карточки, а не у ссылки внутри: ссылка
   тонкая и обводка легла бы посередине фотографии. */
.country__link:focus-visible {
  outline: none;
}

.country:has(.country__link:focus-visible) {
  outline: 3px solid var(--copper-on-dark);
  outline-offset: 2px;
}

/* Сколько стран проверено. Строка служебная, поэтому тише заголовка. */
.countries__count {
  margin: 0 0 var(--space-4);
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Медная линия выезжает по нижнему краю */
.country__label::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--copper);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}

/* Наведение есть только там, где есть курсор: на телефоне карточки
   просто стоят на месте. */
@media (hover: hover) and (pointer: fine) {
  .country:hover .country__photo img {
    transform: scale(1.07);
  }

  .country:hover .country__label::after {
    transform: scaleX(1);
  }

  .country:hover .country__name {
    color: #FFFFFF;
  }
}


/* --- Лента стран на телефоне ------------------------------------------------

   Сетка два на шесть занимала почти два экрана. Лента режет её до одной
   строки и добавляет то, чего на телефоне не хватало: листание пальцем.
   Карточка чуть уже экрана, поэтому следующая выглядывает — видно,
   что здесь можно листать.

   Прокрутка примагничивается к началу карточки (scroll-snap), а лента
   выходит за поля контейнера, чтобы карточки уезжали под самый край.
   ---------------------------------------------------------------------------- */

@media (max-width: 47.99em) {

  .countries__grid {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 78%;
    gap: var(--space-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-pad);
    margin-inline: calc(var(--container-pad) * -1);
    padding: 2px var(--container-pad) var(--space-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .countries__grid::-webkit-scrollbar {
    display: none;
  }

  .country {
    scroll-snap-align: start;
  }

  /* Кнопки фильтра — одной строкой, тоже с прокруткой: на узком экране
     они переносились на две строки и съедали высоту. */
  .countries__filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
    scrollbar-width: none;
  }

  .countries__filter::-webkit-scrollbar {
    display: none;
  }

  .chip {
    flex: none;
  }
}


/* --- «А если моей страны нет» ---------------------------------------------
   Не серая приписка, а приглашение спросить: пунктирная рамка из фирменной
   линии и ссылка на контакты. */

/* Обычная строка, а не плашка: рамка с заливкой выбивалась из общей
   системы и тянула на себя внимание сильнее, чем заслуживает. */
.countries__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  max-width: none;
  margin-top: var(--space-5);
  color: var(--muted);
  font-size: var(--text-sm);
}

.countries__more span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.countries__more a {
  font-weight: var(--weight-semibold);
  /* Отдельная ссылка, а не часть абзаца: по ней должен попадать палец */
  padding-block: var(--space-2);
}

.countries__empty {
  margin-top: var(--space-5);
  color: var(--muted);
}


/* ==========================================================================
   6. KÖP BERILÝÄN SORAGLAR — вопросы и ответы

   Построен на <details>/<summary>: раскрывается даже при отключённом
   JavaScript. Скрипт добавляет только удобство — закрывает соседний вопрос,
   когда открывают новый.
   ========================================================================== */

.faq {
  /* Счётчик вопросов. Номера рисует CSS, в разметке их нет:
     добавили вопрос — нумерация пересчиталась сама. */
  counter-reset: faq;
  border-top: 1px solid var(--line);
}

.faq__item {
  counter-increment: faq;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur-base) var(--ease-hover);
}

/* Открытый вопрос слегка подсвечен, соседние приглушены —
   взгляд сразу находит, что именно раскрыто. */
.faq__item[open] {
  background-color: var(--copper-tint);
}

/* Приглушаем только сам вопрос, но не его номер: при более сильном
   приглушении текст перестаёт добирать положенные 4,5:1 контраста.
   Сейчас приглушённый вопрос даёт 5,4:1 — читается и в ярком свете. */
.faq:has(.faq__item[open]) .faq__item:not([open]) .faq__q h3 {
  opacity: 0.75;
}

.faq:has(.faq__item[open]) .faq__item:not([open]):hover .faq__q h3 {
  opacity: 1;
}

.faq__q {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  cursor: pointer;
  list-style: none;          /* убираем стандартный треугольник */
  transition: color var(--transition-fast);
}

@media (min-width: 48em) {
  .faq__q {
    gap: var(--space-5);
    padding: var(--space-6) var(--space-5);
  }
}

.faq__q::-webkit-details-marker {
  display: none;
}

/* Номер вопроса: тонкая медная цифра слева.

   Без ведущего нуля: шаги в блоке «Как мы работаем» нумеруются
   обычными цифрами, и держать рядом два разных вида нумерации —
   1, 2, 3 в одном месте и 01, 02, 03 в другом — незачем. */
.faq__q::before {
  content: counter(faq);
  align-self: start;
  /* Тёмная медь, а не обычная: цифра мелкая, ей нужен контраст повыше */
  color: var(--copper-dark);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}

@media (min-width: 48em) {
  .faq__q::before {
    font-size: var(--text-lg);
    line-height: 1.5;
  }
}

.faq__q:hover {
  color: var(--copper-dark);
}

/* Сам вопрос — акцидентным шрифтом и крупно */
.faq__q h3 {
  margin: 0;
  color: inherit;
  transition: opacity var(--dur-base) var(--ease-hover);
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.005em;
  line-height: 1.35;
}

@media (min-width: 48em) {
  .faq__q h3 {
    font-size: var(--text-h3);
  }
}

/* Плюс превращается в минус поворотом одной палочки: вертикальная
   ложится на горизонтальную. Иконку не подменяем — она одна и та же. */
.faq__icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 4px;
  color: var(--copper);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.faq__icon-v {
  transform-origin: 10px 10px;
  transition: transform var(--dur-base) var(--ease-out);
}

.faq__item[open] .faq__icon-v {
  transform: rotate(90deg);
}


/* --- Ответ ----------------------------------------------------------------

   Раскрытие через grid-template-rows: 0fr → 1fr. Это единственный способ
   плавно показать содержимое, высота которого заранее не известна: не нужно
   ни задавать её числом, ни считать скриптом.

   Здесь это анимация, а не переход: пока вопрос закрыт, браузер содержимое
   вовсе не рисует, и переходу не от чего отталкиваться. Анимация же
   отыгрывается с первого же кадра появления. */

.faq__a {
  display: grid;
  grid-template-rows: 1fr;
  padding: 0 var(--space-4) var(--space-5);
}

@media (min-width: 48em) {
  .faq__a {
    padding: 0 var(--space-5) var(--space-6);
    /* Ответ выровнен по левому краю вопроса, а не по номеру */
    padding-left: calc(var(--space-5) + var(--space-5) + 1.9ch);
  }
}

.faq__a-inner {
  position: relative;
  /* Обязательно: без этого содержимое вылезает за пределы строки,
     которую мы схлопываем. */
  overflow: hidden;
  min-height: 0;
  padding-left: var(--space-5);
}

/* Медная линия слева от ответа */
.faq__a-inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  background-color: var(--copper);
  transform: scaleY(1);
  transform-origin: top center;
}

.faq__a-inner p {
  color: var(--muted);
  font-size: var(--text-sm);
  max-width: 72ch;
}

@media (min-width: 48em) {
  .faq__a-inner p {
    font-size: var(--text-base);
  }
}

@media (prefers-reduced-motion: no-preference) {

  .faq__item[open] .faq__a {
    animation: faq-open var(--dur-base) var(--ease-out);
  }

  @keyframes faq-open {
    from { grid-template-rows: 0fr; opacity: 0; }
    to   { grid-template-rows: 1fr; opacity: 1; }
  }

  /* Линия слева от ответа прорисовывается сверху вниз.
     По умолчанию она на месте — значит, при выключенном движении
     ответ выглядит законченным, а не наполовину нарисованным. */
  .faq__item[open] .faq__a-inner::before {
    animation: faq-line var(--dur-slow) var(--ease-out);
  }

  @keyframes faq-line {
    from { transform: scaleY(0); }
  }
}


/* ==========================================================================
   7. Финальный призыв
   ========================================================================== */

/* Тёмная плашка — как сам знак: сплошной тёмный прямоугольник со скруглением.
   Таких блоков на сайте намеренно немного: этот и подвал. Если сделать больше,
   сайт перестанет быть светлым и плашка потеряет силу. */
.cta {
  position: relative;
  overflow: hidden;
  /* Подвал такой же тёмный, и без разделителя блок призыва сливался
     с ним в одно бесформенное пятно. Фирменный пунктир по нижнему краю
     отделяет их, не добавляя ни рамки, ни лишнего цвета. */
  border-bottom: 1px solid transparent;
  padding-block: var(--space-8);
  background-color: var(--dark);
  color: var(--on-dark);
  text-align: center;
}

@media (min-width: 48em) {
  .cta {
    padding-block: var(--space-9);
  }
}

/* --- Фон: мотив маршрута ---------------------------------------------------
   Те же линии, что на первом экране, только приглушённые до фона.
   Пунктир медленно ползёт вдоль линии: движение на грани заметности,
   его задача — оживить полосу, а не отвлечь от кнопки. */

.cta__art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cta__art svg {
  width: 100%;
  height: 100%;
}

.cta__line {
  stroke: var(--copper-light);
  opacity: 0.18;
  animation: cta-drift 26s linear infinite;
}

.cta__line--soft {
  stroke: var(--on-dark);
  opacity: 0.08;
  animation-duration: 38s;
}

@keyframes cta-drift {
  to { stroke-dashoffset: -360; }
}

/* Пунктирная черта между полосой призыва и подвалом */
.cta::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background-image: var(--dash-line);
  opacity: 0.45;
}

.cta__inner {
  position: relative;   /* поверх фона */
}

/* --- Метка «первая консультация бесплатно» ---------------------------------
   Не серая приписка, а заметная метка: медная точка, медная рамка,
   светлый текст. Это главное обещание блока. */

.cta__title {
  /* Ширина в em, а не в ch. Единица ch — это ширина нуля в текущем шрифте,
     то есть при подмене шрифта она меняется, и заголовок переносится иначе.
     Единица em считается от кегля и при подмене остаётся прежней. */
  max-width: 13em;
  margin-inline: auto;
  color: var(--on-dark);
}

.cta__text {
  max-width: 56ch;
  margin: var(--space-4) auto 0;
  color: var(--on-dark-muted);
  font-size: var(--text-lg);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

@media (max-width: 32.4375em) {
  .cta__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

.cta :focus-visible {
  outline-color: var(--copper-on-dark);
}

/* ==========================================================================
   Плавное появление при прокрутке.
   Класс is-armed навешивает JS — и только если пользователь не просил
   систему уменьшить количество движения. Без JS всё видно сразу.
   ========================================================================== */

[data-reveal] {
  transition: opacity 480ms ease, transform 480ms ease;
}

[data-reveal].is-armed {
  opacity: 0;
  transform: translateY(14px);
}

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

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-armed {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* --------------------------------------------------------------------------
   Плашка «консультация бесплатная» — главный аргумент, поэтому она видна
   рядом с кнопкой, а не спрятана в тексте.
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5);
  background-color: var(--copper-tint);
  border: 1px solid var(--copper);
  border-radius: var(--radius-full);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

/* Медная точка вместо значка: на первом экране и в блоке призыва
   обещание должно выглядеть одинаково. */
.badge::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  background-color: var(--copper);
}

/* На тёмном фоне — тот же вид, только светлее */
.hero .badge,
.cta .badge {
  background-color: rgba(204, 123, 80, 0.14);
  border-color: var(--copper-light);
  color: var(--on-dark);
}

.hero .badge::before,
.cta .badge::before {
  background-color: var(--copper-on-dark);
}

.cta .badge {
  margin-bottom: var(--space-5);
}

/* Точка в блоке призыва тихо пульсирует */
@media (prefers-reduced-motion: no-preference) {
  .cta .badge::before {
    animation: cta-dot 2.8s var(--ease-hover) infinite;
  }

  @keyframes cta-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 138, 95, 0.55); }
    70%      { box-shadow: 0 0 0 7px rgba(217, 138, 95, 0); }
  }
}


/* ==========================================================================
   ФИРМЕННЫЙ ПУНКТИР

   Пунктирная дуга из знака — самая узнаваемая деталь. На сайте она работает
   разделителем между секциями. Это акцент, поэтому линия тонкая
   и полупрозрачная: она отмечает границу, а не притягивает взгляд.
   ========================================================================== */

.section + .section > .container::before,
.section + .section > .container--narrow::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: clamp(var(--space-5), 4vw, var(--space-7));
  background-image: var(--dash-line);
  opacity: var(--dash-opacity);
}

/* Пунктир оживает, когда секция входит в кадр: штрихи медленно «пробегают»
   слева направо и останавливаются. Эффект намеренно почти незаметный —
   разделитель должен отмечать границу, а не отвлекать.

   Пунктир нарисован повторяющимся градиентом, поэтому бежит он сдвигом
   фона: 156px — это ровно двенадцать шагов узора, так что в конце
   пробега рисунок совпадает сам с собой и остановка не заметна. */
@media (prefers-reduced-motion: no-preference) {

  .js .section[data-reveal="dash"] > .container::before,
  .js .section[data-reveal="dash"] > .container--narrow::before {
    opacity: 0;
  }

  .js .section[data-reveal="dash"].is-visible > .container::before,
  .js .section[data-reveal="dash"].is-visible > .container--narrow::before {
    animation: dash-run 1600ms var(--ease-out) both;
  }

  @keyframes dash-run {
    from {
      background-position-x: -156px;
      opacity: 0;
    }
    to {
      background-position-x: 0;
      opacity: var(--dash-opacity);
    }
  }
}


/* --- Самолётик на разделителе ----------------------------------------------

   По пунктирной линии между секциями раз в двенадцать секунд пролетает
   самолётик из фирменного знака. Восемь секунд полёт, четыре — пауза:
   если пустить без паузы, разделитель начинает мельтешить и отвлекать
   ровно от того, что он должен разделять.

   Самолёт нарисован в самом стиле картинкой-ссылкой, а не в разметке.
   Разделители — это псевдоэлементы, детей у них не бывает; зато так
   самолёт появляется сразу на всех разделителях всех страниц, и в
   разметку не пришлось добавлять ни строчки.

   Движется только transform. Полоса, по которой он летит, шириной во
   весь контейнер, а самолёт нарисован у её правого края: тогда путь от
   translateX(-100%) до translateX(0) проводит его ровно от левого края
   до правого, и полоса при этом никогда не вылезает за правый край —
   то есть не может добавить странице прокрутку вбок.

   Цвет задан числом, а не переменной: внутри картинки-ссылки переменные
   не работают. Это тот же медный, что у линии. */

.section + .section > .container,
.section + .section > .container--narrow {
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {

  .js .section[data-reveal="dash"] > .container::after,
  .js .section[data-reveal="dash"] > .container--narrow::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 18px;
    margin-top: -9px;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-44 -44 88 88'><g transform='rotate(90)'><path fill='%23AF5F39' d='M0 -42 C4 -42 6 -37 6 -30 L6 -13 L40 9 L40 17 L6 6 L6 24 L15 32 L15 38 L0 33 L-15 38 L-15 32 L-6 24 L-6 6 L-40 17 L-40 9 L-6 -13 L-6 -30 C-6 -37 -4 -42 0 -42 Z'/></g></svg>");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 18px 18px;
    /* Нажатия проходят сквозь: самолёт нарисован поверх содержимого */
    pointer-events: none;
    opacity: 0;
  }

  .js .section[data-reveal="dash"].is-visible > .container::after,
  .js .section[data-reveal="dash"].is-visible > .container--narrow::after {
    animation: divider-fly 12s linear 1200ms infinite;
  }

  /* Пока разделителя нет на экране или вкладка свёрнута, самолёт стоит.
     Метку is-still ставит js/motion.js — тем же способом, что и у
     маршрутов в первом экране. */
  .js .section[data-reveal="dash"].is-still > .container::after,
  .js .section[data-reveal="dash"].is-still > .container--narrow::after {
    animation-play-state: paused;
  }

  @keyframes divider-fly {
    0%          { transform: translateX(-100%); opacity: 0; }
    4%          { opacity: 1; }
    62%         { opacity: 1; }
    66%, 100%   { transform: translateX(0); opacity: 0; }
  }
}

/* Раньше здесь пряталась линия перед блоком призыва. Теперь он не .section,
   а тёмная полоса во всю ширину, и правило .section + .section до него
   не достаёт — прятать нечего. */