/* ═══ GastroDrome: стили поверх базы carrier ═══
   Здесь только то, чем drome отличается от carrier-лендинга:
   • линии флагов с мачтой и командной строки с кнопками нет → шапка ниже
     (--header-total: 84px — app-бар + hazard);
   • hero — полноширинная сцена аэродрома с пролетающим самолётиком. */

/* ─── Шапка без гирлянды ─────────────────────────────────────── */

:root {
  /* Фолбэк no-JS: командной строки в шапке нет, высота =
     app-бар (80px) + hazard-линия (4px). */
  --header-total: 84px;
}

/* Выбор языка: единая граница «компактного режима» drome — 800px.
   Шире 800: язык выбирается флагами на гирлянде сцены, список в шапке
   скрыт (base.css прячет его по умолчанию и показывает на ≤1180px —
   здесь возвращаем скрытие для диапазона 800–1180). Уже 800: флаги
   мелки и переносятся на вторую гирлянду — прячем их, остаётся список. */
@media (min-width: 800px) {
  .lang-select { display: none; }
  /* Навигация app-бара: base.css прячет её на ≤1180px (граница carrier),
     в drome компактный режим начинается позже — возвращаем показ
     для диапазона 800–1180. */
  .main-nav { display: flex; }
}

/* Скрытие флагов на узких экранах — media-блок в самом конце файла
   (должен идти ПОСЛЕ блока .drome-flags, иначе display:flex его
   перевесит). */

/* ─── Hero: сцена аэродрома ──────────────────────────────────── */

.drome-hero {
  /* Отступ ровно под fixed-шапку; снизу 0 — сцена стыкуется
     со следующей секцией без зазора. */
  padding: calc(var(--header-total) + 16px) 0 0;
  background: var(--bg-lowest);
}

.drome-stage {
  position: relative;
  overflow: hidden;
  line-height: 0; /* убрать щель под inline-картинкой */
}

.drome-scene {
  display: block;
  width: 100%;
  height: auto;
}

/* ─── Самолётик: периодический пролёт справа налево по полосе ──
   Полоса на сцене — мокрый асфальт с огнями в нижней трети картинки
   (~76–88% высоты). Маршрут в процентах от контейнера, поэтому при
   сжатии экрана самолётик остаётся «на полосе».
   Цикл 15с: пролёт ~9.3с (0→62% таймлайна), затем самолётик ждёт
   за левым краем ~5.7с — «заход на новый круг». */

.drome-plane {
  position: absolute;
  /* Рулёжка по полосе: колёса стоят на мокром асфальте (~76–88% высоты
     сцены, колёса на ~82%). Позиция от НИЗА: ширина самолёта зажата
     clamp(140px…380px), поэтому его высота в % сцены зависит от ширины
     экрана — top «уплыл» бы, а bottom держит колёса на полосе всегда. */
  bottom: 18%;
  left: 105%;               /* старт — за правым краем сцены */
  width: clamp(140px, 26%, 380px);
  /* Замедлили пролёт для читаемости: 20s вместо 12s */
  animation: drome-flight 20s linear infinite;
  will-change: left;
}

.drome-plane img {
  display: block;
  width: 100%;
  height: auto;
  /* Мягкая тень под самолётом: на полосе работает как контактная
     тень — «прижимает» колёса к мокрому асфальту. */
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.6));
  /* Лёгкое покачивание в полёте (болтанка) — независимо от маршрута. */
  animation: drome-bob 2.6s ease-in-out infinite alternate;
}

@keyframes drome-flight {
  0%   { left: 105%; }
  /* Уводим далеко за левый край с запасом в пикселях на ширину баннера (~600px), 
     чтобы хвост гарантированно скрывался даже на сверхшироких экранах */
  62%  { left: calc(-25% - 850px); }
  100% { left: calc(-25% - 850px); }
}

@keyframes drome-bob {
  from { transform: translateY(-2%) rotate(-1.2deg); }
  to   { transform: translateY(5%) rotate(1.4deg); }
}

/* ─── Рекламный баннер над самолётом (B2B контекст) ─── */
.drome-banner {
  position: absolute;
  /* Баннер летит ВЫШЕ самолёта (низ баннера над верхней кромкой
     фюзеляжа + зазор 10px). Якорим через bottom, а не top/переводом:
     высота баннера зависит от текста (nowrap) и кегля (vw) — top бы
     «уплывал». */
  bottom: calc(100% + 10px);
  left: 98%;
  margin-left: 28px;
  padding: 16px 30px; /* Увеличили отступы (высоту), чтобы тексту было просторно */
  border-radius: 10px;
  background: rgba(10, 18, 42, 0.85);
  /* Рамка и цвет переключаются через анимацию banner-theme-swap */
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  line-height: 1.2;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  /* Комбинируем болтанку и смену цвета рамки */
  animation:
    drome-bob 2.6s ease-in-out infinite alternate,
    banner-theme-swap 40s infinite;
  animation-delay: 0.15s;
  display: grid;
}

/* Буксировочный трос: диагональ от левого нижнего угла баннера вниз
   к хвосту самолёта (вращение с опорой на правый край — у фюзеляжа). */
.drome-banner::before {
  content: '';
  position: absolute;
  right: 100%;
  bottom: -2px;
  width: 34px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.45);
  transform-origin: right bottom;
  transform: rotate(-35deg);
}

.banner-text {
  grid-area: 1 / 1;
}

/* Смена текстов и их индивидуальные цвета */
.banner-msg-1 { 
  color: var(--cyan-bright); 
  text-shadow: 0 0 14px rgba(0, 238, 252, 0.4);
  animation: banner-swap-1 40s infinite; 
}
.banner-msg-2 { 
  color: var(--orange); 
  text-shadow: 0 0 14px rgba(255, 107, 53, 0.4);
  animation: banner-swap-2 40s infinite; 
}

/* Анимация рамки баннера (синхронно с текстами) */
@keyframes banner-theme-swap {
  0%, 49.99% { border: 1px solid rgba(0, 238, 252, 0.35); }
  50%, 100% { border: 1px solid rgba(255, 107, 53, 0.4); }
}

@keyframes banner-swap-1 {
  0%, 49.99% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes banner-swap-2 {
  0%, 49.99% { opacity: 0; }
  50%, 100% { opacity: 1; }
}

/* Уважение к системной настройке «меньше движения»: самолётик
   и баннер просто припаркованы у края полосы, без анимаций движения. */
@media (prefers-reduced-motion: reduce) {
  .drome-plane {
    left: 10%;
    animation: none;
  }
  .drome-plane img, .drome-banner { animation: none; }
}

/* На узких экранах полоса визуально уже — самолётик чуть крупнее
   относительно сцены, чтобы оставался читаемым. bottom ниже (15%):
   полоса на мобилке начинается ближе к низу кадра. */
@media (max-width: 640px) {
  .drome-plane { width: 34%; bottom: 15%; }
}

/* ─── Парад флагов на гирлянде сцены ───────────────────────────
   Те же классы .flag (стили, колыхание, тултипы, is-active — из
   base.css), что и у carrier на мачте, но контейнер не в шапке,
   а абсолютным слоем поверх сцены: флаги висят под провисающим
   фалом в верхней части картинки, там, где нарисована гирлянда
   лампочек. При скролле уезжает вместе со сценой — сворачивание
   из main.js (логика .flag-line) здесь не задействовано. */

.drome-flags {
  position: absolute;
  inset: 0;
  z-index: 4; /* поверх самолётика */
  display: flex;
  flex-wrap: wrap; /* на узких экранах гирлянда переносится ниже */
  align-items: flex-start;
  /* Растягиваем гирлянду равномерно от края до края экрана. */
  justify-content: space-between;
  gap: 0;
  /* Гирлянда прижата к верху картинки (под ряд лампочек): 34px — точка
     крепления центральных флагов; края дополнительно подняты --arc'ом. */
  padding: 34px 24px 0;
  pointer-events: none; /* сцена остаётся «прозрачной» для кликов */
}

.drome-flags .flag { pointer-events: auto; }

/* ─── Порталы-иконки в шапке ───────────────────────────────────
   Быстрые ссылки зарегистрированного клиента: админка (вышка) и
   экран арены. Вместо carrier-командной строки (которая наращивала
   высоту шапки и ломала сцену) — круглые иконочные кнопки в той же
   стилистике, что .drome-sound-btn со сцены: тонкий циановый контур,
   стекло с blur. Ссылки — на поддомены tower./arena.gastrodrome.com. */
.portal-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: var(--text);
  background: rgba(0, 238, 252, 0.08);
  border: 1px solid rgba(0, 238, 252, 0.25);
  /* Прямоугольник со скруглением как у .btn/.flag-чипов — круглые
     кнопки выпадали из общей геометрии интерфейса (всё 8px/14px). */
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: background 0.2s, transform 0.15s;
}

.portal-btn:hover {
  background: rgba(0, 238, 252, 0.18);
  transform: scale(1.08);
}

/* Подсказка при наведении: перенос блока .btn[data-tip] из base.css
   (там тултип определён только у .btn, .flag и .cta-form-btn).
   Открывается ВНИЗ от кнопки — шапка прижата к верхней кромке окна. */
.portal-btn { position: relative; }

.portal-btn::after {
  content: attr(data-tip);
  position: absolute;
  /* +26px: ниже кнопки хватает места и на hazard-полосу (4px
     разделителя под app-баром) — раньше тултип на неё наезжал. */
  top: calc(100% + 26px);
  right: 0;
  z-index: 60;
  padding: 7px 12px;
  border-radius: var(--radius);
  background: var(--bg-bright);
  border: 1px solid rgba(0, 238, 252, 0.25);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(5, 13, 37, 0.7);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.portal-btn:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* Кнопка звука сцены ── */

.drome-sound-btn {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 5; /* над флагами и самолётиком */
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: var(--text);
  background: rgba(5, 13, 37, 0.7);
  border: 1px solid rgba(0, 238, 252, 0.25);
  /* Прямоугольник со скруглением как у .btn/.flag-чипов — круглые
     кнопки выпадали из общей геометрии интерфейса (всё 8px/14px). */
  border-radius: var(--radius);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.2s, transform 0.15s;
}

.drome-sound-btn:hover { background: rgba(5, 13, 37, 0.9); transform: scale(1.08); }

/* Показываем только актуальную иконку: 🔊 в обычном режиме, 🔇 в выключенном. */
.drome-sound-btn .drome-sound-off { display: none; }
.drome-sound-btn.is-muted .drome-sound-on  { display: none; }
.drome-sound-btn.is-muted .drome-sound-off { display: inline; }

/* ─── Блики на зеркальном шаре ─────────────────────────────────
   Три белые искры поверх шара: вспышка (точка + крест лучей),
   затухание и пауза до следующего мерцания. Позиции задаются
   инлайново (--x/--y, проценты сцены), фаза — --spark-delay,
   чтобы искры мерцали вразнобой, а не синхронно. */

.drome-spark {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.85);
  transform: translate(-50%, -50%) scale(0);
  animation: drome-spark 3.2s ease-in-out infinite;
  animation-delay: var(--spark-delay, 0s);
  pointer-events: none;
  z-index: 2; /* над сценой, под флагами */
}

/* Золотая вариация блика: тёплый цвет точки, лучей и свечения —
   для искр у неоновой вывески GASTRO. */
.drome-spark-gold {
  background: #ffd166;
  box-shadow: 0 0 12px 2px rgba(255, 200, 90, 0.85);
}
.drome-spark-gold::before,
.drome-spark-gold::after {
  background: #ffd166;
  box-shadow: 0 0 6px rgba(255, 200, 90, 0.9);
}

/* Крест лучей: две пересекающиеся тонкие полоски с свечением. */
.drome-spark::before,
.drome-spark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
}
.drome-spark::before { width: 24px; height: 1.5px; transform: translate(-50%, -50%); }
.drome-spark::after  { width: 1.5px; height: 24px; transform: translate(-50%, -50%); }

/* Вспышка занимает ~1/4 цикла: резко разгорается, чуть дрожит и гаснет;
   остальное время искра «спит» (scale 0, невидима). */
@keyframes drome-spark {
  0%, 30%, 100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  6%            { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
  12%           { transform: translate(-50%, -50%) scale(0.7); opacity: 0.8; }
  20%           { transform: translate(-50%, -50%) scale(1.05); opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .drome-spark {
    animation: none;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.6;
  }
}

/* Пустой слот под будущий флаг: занимает место в гирлянде (space-between
   резервирует крайнюю позицию), но невидим и некликабелен. <i>, чтобы
   не влиять на :nth-of-type-нумерацию флагов-<span>. */
.flag-slot {
  flex: 0 0 auto;
  width: 26px;   /* ширина слота «вымпела», как у .flag */
  height: 40px;
  visibility: hidden;
}

/* Провис дуги без SVG-фала (25 флагов, центр — 13-й): base.css описывал
   23 флага, поэтому вся схема переопределяется здесь. Центральная
   группа осталась +14px (как в carrier, идеально под гирляндой сцены),
   края задраны сильнее: -20px на крайних (на 10px выше прежнего -10),
   плавный спад к центру. */
.drome-flags .flag:nth-of-type(1),
.drome-flags .flag:nth-of-type(25) { --arc: -20px; }
.drome-flags .flag:nth-of-type(2),
.drome-flags .flag:nth-of-type(24) { --arc: -11px; }
.drome-flags .flag:nth-of-type(3),
.drome-flags .flag:nth-of-type(4),
.drome-flags .flag:nth-of-type(22),
.drome-flags .flag:nth-of-type(23) { --arc: -5px; }
.drome-flags .flag:nth-of-type(5),
.drome-flags .flag:nth-of-type(6),
.drome-flags .flag:nth-of-type(20),
.drome-flags .flag:nth-of-type(21) { --arc: 4px; }
.drome-flags .flag:nth-of-type(7),
.drome-flags .flag:nth-of-type(8),
.drome-flags .flag:nth-of-type(18),
.drome-flags .flag:nth-of-type(19) { --arc: 8px; }
.drome-flags .flag:nth-of-type(9),
.drome-flags .flag:nth-of-type(10),
.drome-flags .flag:nth-of-type(16),
.drome-flags .flag:nth-of-type(17) { --arc: 11px; }
/* Группа центра (11–15) — 14px из base.css (n+9..n+15), не переопределяется. */

/* ─── Welcome: что такое GastroDrome ──────────────────────────
   Первый текстовый блок сразу под сценой аэродрома. Переиспользует
   стили hero-типографики из base.css (hero-title/hero-sub/metrics),
   но выстраивает их по центру без правой колонки-визуала —
   визуал (сцена) уже стоит выше. */
.drome-welcome {
  padding: 72px 0 60px;
  text-align: center;
  background: var(--bg);
}

.drome-welcome .hero-sub {
  max-width: 860px;
  margin: 18px auto 0;
}

.drome-welcome .metrics {
  /* Чипы-факты по центру, уже полного контейнера. */
  max-width: 900px;
  margin: 40px auto 0;
}

@media (max-width: 640px) {
  .drome-welcome { padding: 48px 0 40px; }
}

/* ─── Голосовая секция: полоса «фудтраки-контраст» ─────────────
   Два фото между демо-канбаном и карточками преимуществ: слева
   обычный фудтрак (повар тычет в экран, слегка обесцвечен), справа
   фудтрак с ICAO-канбаном (гарнитура). Колонки повторяют сетку
   voice-grid (1fr 1fr, зазор 44px): правое фото по ширине совпадает
   с карточкой «Микрофон активирован». */
.drome-ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: stretch;
  margin-top: 44px;
}

.drome-ba-item {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.drome-ba-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Источник 800×400 (2:1); кадр 16/9 делает карточку чуть крупнее,
     бока слегка подрезаются — герои в кадре по центру. */
  aspect-ratio: 16 / 9;
  /* Плавный зум при наведении (см. :hover ниже). */
  transition: transform 0.45s ease;
}

/* Наведение: фото увеличивается внутри рамки — overflow:hidden
   у .drome-ba-item обрезает края, рамка стоит на месте. */
.drome-ba-item:hover img {
  transform: scale(1.07);
}

/* «Было» приглушаем: лёгкое обесцвечивание даёт эффект прошлого. */
.drome-ba-before img { filter: grayscale(0.35) contrast(0.95); }
.drome-ba-before { border-color: rgba(255, 255, 255, 0.14); }

.drome-ba-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
}

.drome-ba-badge-before {
  color: var(--text-dim);
  background: rgba(10, 14, 30, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.drome-ba-badge-after {
  color: var(--cyan-bright);
  background: rgba(0, 238, 252, 0.12);
  border: 1px solid rgba(0, 238, 252, 0.35);
}

/* На узких экранах фото складываются вертикально. */
@media (max-width: 799px) {
  .drome-ba { grid-template-columns: 1fr; gap: 12px; }
}

/* Карточки палуб: в carrier они наползали на баннер decks-hero
   (margin-top: -45px из sections.css). В drome баннера нет — ниже
   фото-пары нужен нормальный отступ, поэтому перевешиваем. */
.arena-grid { margin-top: 48px; }

/* Карточки миров без картинок: бейдж мира в carrier лежал абсолютом
   на картинке арены — теперь это первый чип в теле карточки
   (arena-body — flex-колонка с gap 10px, чип просто встаёт в поток). */
.arena-body .arena-badge { position: static; align-self: flex-start; }

/* ─── Шоукейс трёх арен ────────────────────────────────────────
   Один широкий кадр (1000×500, 2:1) с тремя экранами миров после
   карточек-описаний: та же рамка и скругления, что у фото-пар,
   при наведении — лёгкий зум. Естественная пропорция, без кадрирования. */
.drome-showcase {
  margin: 48px 0 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.drome-showcase img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.45s ease;
}

.drome-showcase:hover img { transform: scale(1.04); }

/* ─── VIP: иллюстрация ровно в колонку сетки карточек ─────────
   Сюжетная сцена (priority-полоса, очередь) с мелкими деталями —
   в стандартной колонке game-head-img (≤480px) они читаются плохо.
   Сетка .vip-features ниже — 2 колонки 1fr с гэпом 16px; чтобы
   вертикальные края картинки совпадали с правой карточкой
   («Динамический расчёт времени»), гэп заголовка и ширину картинки
   сводим к той же геометрии: колонка = 50% − 8px (правая ячейка
   2-колоночной сетки с гэпом 16px). */
#vip .game-head { gap: 16px; }
#vip .game-head-img { width: calc(50% - 8px); }

/* ─── Картинки секций: единый стиль фото-пар ──────────────────
   Скрины в шапках секций (QR-игра, VIP) получают то же оформление,
   что у фото-пар и шоукейса: скругление var(--radius-lg), тонкая
   рамка и мягкий зум при наведении (кадр растёт внутри своей
   округлой формы — transform масштабирует и радиус тоже). */
#game .game-head-img,
#vip .game-head-img {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: transform 0.45s ease;
}

#game .game-head-img:hover,
#vip .game-head-img:hover { transform: scale(1.04); }

/* ─── Тариф: строки заметок слева ─────────────────────────────
   Блок .pricing-note (лётные испытания + сноска автоперевода) в carrier
   центрирован по дизайну, но стоит сразу под «Дополнительной
   экипировкой» и читается как её строки — выравниваем так же,
   как аддоны (слева) и сводим межстрочный гэп к тем же 8px. */
.pricing-note {
  text-align: left;
  gap: 8px;
  /* Стык «экипировка → заметки»: карточный гэп 28px здесь читался
     как пустая строка — сводим к тем же 8px, строки идут лентой. */
  margin-top: -20px;
}

@media (max-width: 1024px) {
  #vip .game-head-img { width: 100%; }
}

/* ─── Компактный режим: скрытие флагов ─────────────────────────
   Блок обязан стоять ПОСЛЕ .drome-flags: при равной специфичности
   побеждает позднее правило, иначе display:flex перевешивает
   скрытие и флаги остаются на экране. */
@media (max-width: 799px) {
  .drome-flags { display: none; }
}