/*!
 * Zontik hero — первый экран с анимированной иллюстрацией.
 * Все селекторы начинаются с .zh / .zh- и не затрагивают остальную страницу.
 *
 * Устройство сцены (см. README.md):
 *   .zh-l--*   — группы компоновки. Их transform задаётся переменными композиции ниже.
 *   .zh-anim   — вложенные группы анимации. Их transform/opacity меняют только @keyframes.
 *   .zh-fx     — элементы подсветки, которые видны только во время акцентов (в покое opacity: 0).
 *   .zh-dt     — второстепенные детали фона, скрытые в телефонной композиции.
 *   .zh-only-wide — детали, которые есть только в широкой (десктопной) композиции.
 */

/* ------------------------------------------------------------------ */
/* 1. Композиции                                                       */
/* ------------------------------------------------------------------ */

/* Компактная квадратная композиция — планшеты и небольшие ноутбуки (768–1023 px).
   Сцена нарисована в системе координат 1000 × 1000; эта композиция — исходная. */
.zh-art {
  --zh-layout: compact;
  --zh-frame-h: 1000;        /* высота кадра в единицах сцены; ширина всегда 1000 */
  --zh-amp: 1;               /* множитель амплитуды движения */
  --zh-wide: none;           /* display для деталей широкой композиции */
  --zh-detail: inline;       /* display для второстепенных деталей фона */
  --zh-c1: translate(188px, 134px);
  --zh-c2: translate(64px, 206px);
  --zh-c3: translate(826px, 196px);
  --zh-plane: none;
  --zh-bg: none;
  --zh-fg: none;
}

/* Широкая композиция — десктоп от 1024 px: кадр 1000 × 720 без пустой левой половины. */
@media (min-width: 1024px) {
  .zh-art {
    --zh-layout: wide;
    --zh-frame-h: 720;
    --zh-wide: inline;
    --zh-c1: translate(185px, 52px) scale(.66);
    --zh-c2: translate(70px, 100px) scale(.78);
    --zh-c3: translate(842px, 92px) scale(.62);
    --zh-plane: translate(200px, -58px) scale(.78);
    --zh-bg: translate(20px, -100px) scale(.96);
    --zh-fg: translate(60px, -86px) scale(.87);
  }
}

/* Телефонная квадратная композиция — до 767 px: крупнее передний план, меньше деталей фона,
   меньше амплитуда. */
@media (max-width: 767.98px) {
  .zh-art {
    --zh-layout: mini;
    --zh-amp: .7;
    --zh-detail: none;
    --zh-c1: translate(150px, 146px) scale(.9);
    --zh-c3: translate(820px, 200px) scale(.9);
    --zh-plane: translate(28px, 32px) scale(.95);
    --zh-bg: translate(20px, 22px) scale(.96);
    --zh-fg: translate(-28px, 8px) scale(1.04);
  }
}

/* ------------------------------------------------------------------ */
/* 2. Первый экран                                                     */
/* ------------------------------------------------------------------ */

.zh {
  --zh-ink: #0e1a47;
  --zh-text: #46557f;
  --zh-muted: #56648c;
  --zh-brand: #002fbd;
  --zh-brand-strong: #00238f;
  position: relative;
  overflow-x: clip;
  background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 78%);
  color: var(--zh-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.zh__inner {
  box-sizing: border-box;
  max-width: 1440px;
  margin-inline: auto;
  padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 48px) clamp(24px, 5vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(28px, 6vw, 48px);
}

.zh__content { min-width: 0; }

.zh__eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #e9efff;
  color: var(--zh-brand);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .01em;
}

.zh__title {
  margin: 0;
  font-size: clamp(1.75rem, 1.05rem + 3.6vw, 3.25rem);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--zh-ink);
}
.zh__title-line { display: block; }
.zh__title-line--accent { color: var(--zh-brand); }

.zh__lead {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: clamp(1rem, .94rem + .3vw, 1.175rem);
  line-height: 1.55;
  color: var(--zh-text);
}

.zh__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.zh-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: 12px;
  background: var(--zh-brand);
  color: #fff;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 10px 24px -14px rgba(0, 47, 189, .75);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.zh-cta:hover { background: var(--zh-brand-strong); box-shadow: 0 12px 26px -12px rgba(0, 47, 189, .8); }
.zh-cta:focus-visible { outline: 3px solid #8fb0ff; outline-offset: 3px; }

/* Иллюстрация */
.zh-art {
  width: 100%;
  min-width: 0;
  justify-self: center;
}
.zh-art__frame {
  position: relative;
  width: 100%;
  /* Размер зарезервирован до отрисовки: страница не прыгает. */
  aspect-ratio: 1000 / var(--zh-frame-h);
}
.zh-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@supports not (aspect-ratio: 1 / 1) {
  .zh-art__frame { height: 0; padding-top: calc(var(--zh-frame-h) * .1%); }
  .zh-svg { position: absolute; top: 0; left: 0; }
}

/* Управление анимацией — вне рисунка. Высота строки зарезервирована всегда. */
.zh-art__controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 40px;
  margin-top: 6px;
}
.zh-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: 0;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--zh-muted, #56648c);
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.zh-toggle[hidden] { display: none; }
.zh-toggle:hover { color: var(--zh-brand, #002fbd); background: #edf2ff; }
.zh-toggle:focus-visible { outline: 2px solid var(--zh-brand, #002fbd); outline-offset: 2px; }
.zh-toggle__icon { flex: none; fill: currentColor; }
.zh-toggle__play { display: none; }
.zh-toggle[data-state="paused"] .zh-toggle__pause { display: none; }
.zh-toggle[data-state="paused"] .zh-toggle__play { display: inline; }

.zh-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Планшеты и небольшие ноутбуки: текст и иллюстрация одной центрированной колонкой. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .zh__content { width: 100%; max-width: 600px; margin-inline: auto; }
  .zh-art { max-width: 600px; }
}

/* Телефоны: иллюстрация на всю ширину контейнера. */
@media (max-width: 767.98px) {
  .zh-art { max-width: 560px; }
  .zh__title { text-wrap: balance; }
}
@media (max-width: 479.98px) {
  .zh-cta { width: 100%; }
}

/* Десктоп: две колонки, текст слева, иллюстрация справа. */
@media (min-width: 1024px) {
  .zh__inner {
    grid-template-columns: minmax(0, 4.4fr) minmax(0, 5.6fr);
    align-items: center;
    column-gap: clamp(32px, 4vw, 72px);
    min-height: min(calc(100vh - 72px), 840px);
    min-height: min(calc(100svh - 72px), 840px);
  }
  .zh__title { font-size: clamp(2.125rem, 3.3vw, 2.875rem); }
  .zh-art { justify-self: stretch; }
}

/* ------------------------------------------------------------------ */
/* 3. Сцена: компоновка                                                */
/* ------------------------------------------------------------------ */

.zh-l--c1    { transform: var(--zh-c1); }
.zh-l--c2    { transform: var(--zh-c2); }
.zh-l--c3    { transform: var(--zh-c3); }
.zh-l--plane { transform: var(--zh-plane); }
.zh-l--bg    { transform: var(--zh-bg); }
.zh-l--fg    { transform: var(--zh-fg); }

.zh-only-wide { display: var(--zh-wide); }
.zh-dt        { display: var(--zh-detail); }

/* ------------------------------------------------------------------ */
/* 4. Сцена: анимация. Цикл 12 с, все элементы на одной шкале времени. */
/*    В начале и в конце цикла каждый элемент в покое и в одном и том  */
/*    же состоянии, поэтому повтор не заметен.                         */
/*                                                                     */
/*    Движение — отдельные свойства трансформации translate и rotate,  */
/*    затухание — fill-opacity / stroke-opacity. Анимации transform и  */
/*    opacity у SVG-элементов Chromium выносит в отдельные слои и      */
/*    масштабирует их растр: контуры карточек заметно мылятся.         */
/*    Выбранные свойства рисуются в общем слое SVG и остаются чёткими. */
/*    У подсветок (.zh-fx) максимальная непрозрачность — в --zh-max.   */
/* ------------------------------------------------------------------ */

.zh-anim {
  animation-duration: var(--zh-cycle, 12s);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

/* 0–2 с: письмо едва заметно приподнимается и возвращается. */
.zh-a-letter { animation-name: zh-letter; }
@keyframes zh-letter {
  0%, 1.667% { translate: 0 0; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  8.333%     { translate: 0 calc(var(--zh-amp, 1) * -6px); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  15.833%, 100% { translate: 0 0; }
}

/* 2–5 с: маркер проходит по линии от письма к карточке (линия остаётся видимой).
   Маркер — короткий штрих с круглыми концами, который смещается вдоль самой линии. */
.zh-a-mk { animation-name: zh-mk-run, zh-mk-fade; }
@keyframes zh-mk-run {
  0%, 16.667% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
  39.583%, 45% { stroke-dashoffset: -100; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
  /* маркер уже невидим — спокойно возвращается в начало линии */
  95%, 100%   { stroke-dashoffset: 0; }
}
@keyframes zh-mk-fade {
  0%, 16.667% { stroke-opacity: 0; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  20.833%, 37.5% { stroke-opacity: var(--zh-max, 1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  41.25%, 100% { stroke-opacity: 0; }
}
/* Прибытие маркера: мягкий ореол у точки входа карточки. */
.zh-a-in { animation-name: zh-in; }
@keyframes zh-in {
  0%, 35.833% { fill-opacity: 0; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  40%         { fill-opacity: var(--zh-max, 1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  44.167%, 100% { fill-opacity: 0; }
}

/* 5–8 с: по очереди подсвечиваются три предложения перевозчиков — только локальные
   акценты (ветка линии, точка, подложка значка), без выбора «победителя». */
.zh-a-o1 { animation-name: zh-o1; }
.zh-a-o2 { animation-name: zh-o2; }
.zh-a-o3 { animation-name: zh-o3; }
@keyframes zh-o1 {
  0%, 41.667% { fill-opacity: 0; stroke-opacity: 0; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  45%, 46.667% { fill-opacity: var(--zh-max, 1); stroke-opacity: var(--zh-max, 1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  50%, 100%   { fill-opacity: 0; stroke-opacity: 0; }
}
@keyframes zh-o2 {
  0%, 50%     { fill-opacity: 0; stroke-opacity: 0; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  53.333%, 55% { fill-opacity: var(--zh-max, 1); stroke-opacity: var(--zh-max, 1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  58.333%, 100% { fill-opacity: 0; stroke-opacity: 0; }
}
@keyframes zh-o3 {
  0%, 58.333% { fill-opacity: 0; stroke-opacity: 0; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  61.667%, 63.333% { fill-opacity: var(--zh-max, 1); stroke-opacity: var(--zh-max, 1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  66.667%, 100% { fill-opacity: 0; stroke-opacity: 0; }
}

/* 8–10 с: световой акцент идёт к документу, документ приподнимается и возвращается. */
.zh-a-gl { animation-name: zh-gl-run, zh-gl-fade; }
@keyframes zh-gl-run {
  0%, 66.667% { stroke-dashoffset: 16; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
  75%, 80%    { stroke-dashoffset: -100; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
  95%, 100%   { stroke-dashoffset: 16; }
}
@keyframes zh-gl-fade {
  0%, 66.667% { stroke-opacity: 0; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  69.583%, 72.917% { stroke-opacity: var(--zh-max, 1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  75.417%, 100% { stroke-opacity: 0; }
}
.zh-a-doc { animation-name: zh-doc; }
@keyframes zh-doc {
  0%, 72.5%   { translate: 0 0; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  77.5%       { translate: 0 calc(var(--zh-amp, 1) * -5px); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  83.333%, 100% { translate: 0 0; }
}

/* 9–11 с: ореол у документа плавно затухает. */
.zh-a-dochalo { animation-name: zh-dochalo; }
@keyframes zh-dochalo {
  0%, 72.917% { fill-opacity: 0; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  76.25%      { fill-opacity: var(--zh-max, 1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  92.5%, 100% { fill-opacity: 0; }
}

/* Зонтик: одно медленное покачивание на ±1,5° с 10-й по 2-ю секунду следующего цикла.
   На стыке циклов угол 0°, скорость с обеих сторон одинакова (половинки синусоиды). */
.zh-a-umb { animation-name: zh-umb; }
@keyframes zh-umb {
  0%       { rotate: 0deg; animation-timing-function: cubic-bezier(.61, 1, .88, 1); }
  8.333%   { rotate: calc(var(--zh-amp, 1) * -1.5deg); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  16.667%, 83.333% { rotate: 0deg; animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  91.667%  { rotate: calc(var(--zh-amp, 1) * 1.5deg); animation-timing-function: cubic-bezier(.12, 0, .39, 0); }
  100%     { rotate: 0deg; }
}

/* Пауза: вне экрана, на скрытой вкладке или по кнопке. Фаза сохраняется, продолжение без рывка. */
.zh-art[data-zh-play="paused"] .zh-anim { animation-play-state: paused; }

/* Системная настройка «уменьшить движение»: статичная завершённая композиция. */
@media (prefers-reduced-motion: reduce) {
  .zh-anim { animation: none !important; }
  .zh-cta, .zh-toggle { transition: none; }
}