/* Logistics Company — стили страницы. Палитра и шрифт по макету референса Big Trans Group. */

@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/Gilroy-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/Gilroy-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/Gilroy-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #011D3D;
  --panel: #002A45;
  --panel-2: #01315E;
  --accent: #80CEFF;
  --accent-hover: #A8DDFF;
  --muted: #A3A3A3;
  --text: #FFFFFF;
  --error: #FF9E94;
  --line: rgba(255, 255, 255, 0.45);
  --line-soft: rgba(255, 255, 255, 0.15);
  --font: 'Gilroy', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --container: 1140px;
  --gutter: 16px;
  --header-h: 80px;
  --fast: 0.2s;
  --reveal: 0.6s;
}
@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.accent { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Кнопки: прямоугольные, голубые, мелкие заглавные с разрядкой */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  color: var(--bg);
  font: 500 13px/1 var(--font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--fast);
}
.btn:hover { background: var(--accent-hover); }
.btn:disabled { opacity: 0.75; cursor: progress; }

/* Круглые кнопки-иконки с тонкой светлой обводкой */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  transition: border-color var(--fast), color var(--fast);
}
.icon-btn svg { width: 16px; height: 16px; }
a.icon-btn[href]:hover { border-color: var(--accent); color: var(--accent); }

/* Шапка */
.header { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand__logo { height: 28px; width: auto; filter: brightness(0) invert(1); }
/* Номер — вровень с надписью бренда, белый с лёгкой тенью: читается поверх светлого неба (G17). */
.header__phone {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--text);
  text-shadow: 0 1px 3px rgba(1, 29, 61, 0.75);
  transition: color var(--fast);
}
.header__phone:hover { color: var(--accent); }
.header__phone-icon { display: none; width: 18px; height: 18px; }
/* Меню (G20) — перед номером, в тон ему: белое с той же тенью, без подложки. Номер остаётся у правого края —
   якорь посадки газели первого экрана; на телефоне меню нет. */
.header__nav { display: flex; gap: 28px; margin-left: auto; margin-right: 16px; }
.header__nav a {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--text);
  text-shadow: 0 1px 3px rgba(1, 29, 61, 0.75);
  transition: color var(--fast);
}
.header__nav a:hover { color: var(--accent); }
@media (max-width: 767.98px) {
  .header__nav { display: none; }
  .header__phone {
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
  }
  .header__phone-text { display: none; }
  .header__phone-icon { display: block; }
}

/* Первый экран. Пока нет картинки газели — виден градиент из палитры.
   Размер и место картинки считает скрипт посадки в index.html (--hero-img-size, --hero-img-pos). */
.hero {
  display: flex;
  align-items: center;
  min-height: clamp(560px, 100svh, 900px);
  padding: calc(var(--header-h) + 48px) 0 64px;
  background-color: var(--bg);
  background-image:
    linear-gradient(90deg, rgba(1, 29, 61, 0.88) 0%, rgba(1, 29, 61, 0.55) 45%, rgba(1, 29, 61, 0) 80%),
    linear-gradient(0deg, var(--bg) 0%, rgba(1, 29, 61, 0) 35%),
    url('assets/img/hero-gazelle.webp'),
    linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 50%, var(--bg) 100%);
  background-size: cover, cover, var(--hero-img-size, cover), cover;
  background-position: center, center, var(--hero-img-pos, 70% center), center;
  background-repeat: no-repeat;
}
.hero > .container { width: 100%; }
.hero__title {
  max-width: 620px;
  margin: 0 0 32px;
  font-weight: 500;
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.15;
}
@media (min-width: 768px) {
  .hero__inner { padding-right: 96px; } /* место под плавающие кнопки */
  .hero__title { max-width: none; }
  .hero__line { display: block; white-space: nowrap; } /* ровно две строки */
}

/* Форма заявки */
.lead-form--hero { max-width: 720px; }
.lead-form__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.field { display: block; flex: 1 1 200px; }
.field__input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(1, 29, 61, 0.35);
  color: var(--text);
  font: 400 16px var(--font);
  transition: border-color var(--fast);
}
.field__input::placeholder { color: rgba(255, 255, 255, 0.7); }
.field__input:focus { outline: none; border-color: var(--accent); }
.field__input[aria-invalid="true"] { border-color: var(--error); }
.field__error { display: block; margin-top: 6px; font-size: 13px; color: var(--error); }
.field__error:empty { display: none; }
.lead-form__msg { margin: 12px 0 0; font-size: 15px; }
.lead-form__msg a { color: var(--accent); text-decoration: underline; }
@media (max-width: 767.98px) {
  .lead-form__row { flex-direction: column; align-items: stretch; }
  .field { flex: none; }
}

/* Заголовок раздела с короткой голубой чертой */
.section-title {
  margin: 0 0 28px;
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.2;
}
.section-title::after {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 18px;
  background: var(--accent);
}

/* Контакты: карта с синим затемнением, справа панель */
.contacts { position: relative; background: var(--bg); }
.contacts__map { position: relative; height: 320px; background: var(--panel-2); }
.contacts__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.contacts__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* стыки со сценой и подвалом (на телефоне — с блоком контактов): выходит из тёмного и уходит в него (G23, G27),
       но не толще стыка самолёт→газель (G36): 10% и 15% --scene-h; виньетка по высоте шире (90%), иначе верх и низ
       карты от 900 px темнеют на ~90 px */
    linear-gradient(var(--bg), rgba(1, 29, 61, 0) calc(var(--scene-h) * 0.1),
      rgba(1, 29, 61, 0) calc(100% - var(--scene-h) * 0.15), var(--bg)),
    radial-gradient(ellipse 78% 90% at 45% 50%, rgba(1, 49, 94, 0.2) 0%, rgba(1, 29, 61, 0.9) 85%),
    rgba(1, 49, 94, 0.45);
}
.contacts__inner { padding-top: 32px; padding-bottom: 48px; }
.contacts__panel { padding: 32px 24px; background: var(--panel); }
.contacts__list { margin: 0 0 28px; }
.contacts__list dt {
  margin-top: 18px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.contacts__list dt:first-of-type { margin-top: 0; }
.contacts__list dd { min-height: 1.5em; margin: 6px 0 0; }
.contacts__list a { transition: color var(--fast); }
.contacts__list a:hover { color: var(--accent); }
@media (min-width: 900px) {
  .contacts { display: flex; align-items: center; min-height: 640px; }
  .contacts__map { position: absolute; inset: 0; height: auto; }
  .contacts__inner {
    position: relative;
    display: flex;
    justify-content: flex-end;
    padding-top: 64px;
    padding-bottom: 64px;
    pointer-events: none; /* карта двигается вокруг панели */
  }
  .contacts__panel { width: 380px; padding: 40px; background: rgba(0, 42, 69, 0.92); pointer-events: auto; }
}

/* Подвал */
/* Один ряд: иконки, логотип, ©, номер, почта. Не помещается — переносится по центру; на телефоне столбиком. */
.footer { padding: 40px 0 28px; background: var(--bg); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
}
@media (min-width: 1200px) {
  .footer__bottom { justify-content: space-between; }
}
.footer__icons { display: flex; gap: 12px; }
.footer__copy { margin: 0; font-size: 14px; text-align: center; }
.footer__phone, .footer__mail { font-weight: 500; transition: color var(--fast); }
.footer__phone { letter-spacing: 0.06em; }
.footer__phone:hover, .footer__mail:hover { color: var(--accent); }
@media (max-width: 767.98px) {
  .footer { padding-bottom: 136px; } /* низ страницы не прячется под плавающими кнопками */
  .footer__bottom { flex-direction: column; }
}

/* Плавающие кнопки: на телефоне внизу справа, от 768 px — справа по центру */
.float {
  position: fixed;
  z-index: 20;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 768px) {
  .float { right: 24px; top: 50%; bottom: auto; transform: translateY(-50%); }
}
.float__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(1, 29, 61, 0.75);
  color: var(--text);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color var(--fast), color var(--fast);
}
.float__btn:hover { border-color: var(--accent); color: var(--accent); }
.float__btn svg { width: 20px; height: 20px; }

/* Окно заявки */
.modal {
  width: min(460px, calc(100% - 32px));
  max-width: none;
  padding: 0;
  border: 0;
  background: var(--panel);
  color: var(--text);
}
.modal::backdrop { background: rgba(1, 29, 61, 0.85); }
.modal__box { position: relative; padding: 40px 32px 32px; }
.modal .lead-form__row { flex-direction: column; align-items: stretch; }
.modal .field { flex: none; }
.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
  transition: color var(--fast);
}
.modal__close:hover { color: var(--accent); }
.modal__close svg { width: 22px; height: 22px; }

/* Мягкое проявление при прокрутке */
.reveal { transition: opacity var(--reveal) ease, transform var(--reveal) ease; }
.reveal.is-hidden { opacity: 0; transform: translateY(20px); }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; }
  .reveal.is-hidden { transform: none; }
}

/* ---------- Сцена под первым экраном (js/scene.js) ----------
   Компактная полоса: небо с облаками под самолёт, трасса с горами под газель, улица города под людей — фоны-силуэты
   под тёмно-синей тонировкой, виньеткой и затемнением краёв в --bg.
   Скрипт двигает объекты только через transform и opacity; ширины — доли ширины сцены из scene.js (--scene-*-w). */
:root {
  --scene-sky-top: #DCE6F0; /* ровная заливка карты на замерах check.mjs */
}
/* Мера размеров: ~половина экрана; на узких — по ширине. У контактов — мера их стыков. */
.scene, .contacts { --scene-h: clamp(380px, min(54svh, 34vw), 560px); }
/* Три блока подряд (таск 10): А — небо с самолётом, Б — дорога с газелью, В — дорога с людьми. Размеры
   объектов — от --scene-h и ширины (100cqw — ширина .scene__track), не от высоты блока; высота блока — по его
   объекту, без пустого неба. Каждый блок выходит из тёмного сверху и уходит в тёмное снизу (--fade, --fade-end) — стыки
   между блоками как у первого экрана со сценой (G23). */
.scene__track { container-type: inline-size; }
.scene__stage {
  --fade: calc(var(--scene-h) * 0.12);           /* затемнение у верха блока (у А — и у низа) */
  /* Линия земли (колёса газели, ступни людей) — в 2.5% --scene-h над низом блока, под ней затемнение (--fade-end):
     под колёсами и ступнями почти нет тёмной полосы, стык тонкий (G36). */
  --ground: calc(var(--scene-h) * 0.025);
  --fade-end: var(--ground);
  --u: min(100cqw, var(--scene-h) * 4.8);        /* от этой ширины считаются размеры; на очень широких низких экранах — от высоты */
  --scene-dim: rgba(1, 29, 61, 0.2);             /* фон на 20% темнее (G29); check.mjs снимает его для замера «до» */
  position: relative;       /* не закреплена: p — от положения в окне (scene.js, progressFromRect) */
  overflow: hidden;
  container-type: size;
  /* Фон-силуэт блока (таск 17, bg-*.webp 2560×1086) на всю ширину: доля --bg-line высоты картинки — на линии земли,
     тёмный низ картинки под ней уходит за край блока; картинка не меньше блока и ширины сцены. --scene-bg включает
     data-bg (scene.js, за высоту экрана до блока); до загрузки виден запасной --panel-2. */
  --bg-h: max(100cqw * 1086 / 2560, (var(--h) - var(--ground)) / var(--bg-line), var(--ground) / (1 - var(--bg-line)));
  height: var(--h);
  background:
    linear-gradient(var(--bg), rgba(1, 29, 61, 0) var(--fade), rgba(1, 29, 61, 0) calc(100% - var(--fade-end)), var(--bg)),
    linear-gradient(var(--scene-dim), var(--scene-dim)),
    radial-gradient(ellipse 80% 110% at 50% 50%, rgba(1, 29, 61, 0) 45%, rgba(1, 29, 61, 0.6) 100%),
    var(--scene-bg, none) var(--bg-x, 50%) calc(100% + var(--bg-h) * (1 - var(--bg-line)) - var(--ground)) / auto var(--bg-h) no-repeat,
    var(--panel-2);
}
.scene__stage[data-bg][data-block="a"] { --scene-bg: url(assets/img/bg-sky.webp); }
.scene__stage[data-bg][data-block="b"] { --scene-bg: url(assets/img/bg-road.webp); }
.scene__stage[data-bg][data-block="c"] { --scene-bg: url(assets/img/bg-city.webp); }
/* Высоты: А — самолёт (высота 644/2000 ширины) и запас под развевающийся баннер; Б — газель (818/2000), немного неба
   над ней и ещё 1/8 --scene-h (60 px на 1440) — снежные вершины ниже верхнего затемнения; В — земля и холст человека
   (4/3 ширины) ×1.2, но не меньше места под облачко над макушкой (фигура — 850/1024 холста над ступнями).
   Кадр фона: А кончается на облаках средней яркости (80% высоты картинки, тела облаков ниже — за краем), колёса — на
   дальней полосе трассы (88.5%), ступни — на тротуаре у витрин (92.5%, тротуар 91.7–100%); на телефоне картинка В
   правее, чтобы башня была целиком. */
.scene__stage[data-block="a"] {
  --ground: 0px;
  --fade-end: var(--fade);
  --bg-line: 0.8;
  --h: calc(var(--fade) * 2 + var(--scene-plane-w) * var(--u) * 0.322 * 1.15);
}
.scene__stage[data-block="b"] { --bg-line: 0.885; --h: calc(var(--fade) * 1.5 + var(--ground) + var(--scene-gazelle-w) * var(--u) * 0.409 + var(--scene-h) / 8); }
.scene__stage[data-block="c"] {
  --person-h: calc(var(--scene-person-w) * var(--u) * 4 / 3);
  --h: calc(var(--ground) + max(var(--person-h) * 1.2, var(--person-h) * 850 / 1024 + var(--say-room)));
  --bg-line: 0.925;
  --bg-x: 70%;
}
.scene--still .scene__track { display: grid; gap: 4px; } /* prefers-reduced-motion: три статичных кадра подряд */

.scene__obj { position: absolute; left: 0; opacity: 0; will-change: transform, opacity; }
.scene__obj img { width: 100%; }
.scene__plane { top: var(--fade); width: calc(var(--scene-plane-w) * var(--u)); translate: -50% 0; }
.scene__plane-img { position: relative; } /* поверх троса */
/* Трос (левый край banner.webp, y 204/444) — в хвост самолёта (x 1985/2000, y 382/644).
   Баннер той же ширины, что самолёт, его высота — 444/644 высоты самолёта: top = 59.3% − 46% × 68.9%. */
.scene__banner { position: absolute; left: 99.25%; top: 27.6%; transform-origin: 0 46%; }
/* Низ колёс газели — 99.1% высоты картинки. Ступни людей — feetLineY из frames.json (--scene-feet — доля
   холста под ступнями), без него 91.8% холста 768×1024. */
.scene__gazelle { bottom: var(--ground); width: calc(var(--scene-gazelle-w) * var(--u)); translate: -50% 0.9%; }
.scene__person {
  bottom: var(--ground);
  width: calc(var(--scene-person-w) * var(--u));
  aspect-ratio: 768 / 1024;
  translate: -50% calc(var(--scene-feet, 0.082) * 100%);
}
.scene__person img { position: absolute; inset: 0; height: 100%; opacity: 0; }
.scene__sender { transition: opacity var(--reveal); }

/* Реплики людей (G32): облачко над головой говорящего — фон панели контактов, обводка акцентом, белый Gilroy,
   не больше двух строк. Низ хвостика — в 4 px над макушкой. Сдвиг по горизонтали и место хвостика (--tail) задаёт
   scene.js; показ — класс is-on, анимируются только opacity и scale. --say-room — место над макушкой под облачко
   в две строки: 2.5 строки текста с полями + рамка, хвостик 7 px, зазоры 4 px и 6 px до верха блока. */
.scene { --say-fs: 12px; --say-room: calc(var(--say-fs) * 3.5 + 19px); }
@media (min-width: 768px) {
  .scene { --say-fs: 15px; }
}
.scene__say {
  position: absolute;
  left: 0;
  bottom: calc(var(--ground) + var(--person-h) * 850 / 1024 + 11px);
  width: max-content;
  max-width: calc(var(--say-fs) * 13.5);
  margin: 0;
  padding: 0.5em 0.7em;
  border: 1px solid var(--accent);
  border-radius: 0.9em;
  background: var(--panel);
  color: var(--text);
  font: 500 var(--say-fs)/1.25 var(--font);
  opacity: 0;
  scale: 0.85;
  transform-origin: var(--tail, 16px) 100%;
  transition: opacity var(--fast), scale var(--fast);
  will-change: transform, opacity;
}
.scene__say.is-on { opacity: 1; scale: 1; }
/* Длинная реплика (G40): строки делит <br> в разметке, ширина — по длинной строке. На телефоне поля уже — на 360 px
   облачко отправителя рядом с ним отходит от головы меньше. */
.scene__say--long { max-width: none; padding-inline: 0.4em; }
@media (min-width: 768px) {
  .scene__say--long { padding-inline: 0.7em; }
}
.scene__say::after { /* хвостик: квадрат на нижней рамке, повёрнутый углом вниз */
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: inherit;
  border: solid var(--accent);
  border-width: 0 1px 1px 0;
  transform: translateX(var(--tail, 16px)) rotate(45deg);
}