/* =============================================================================
   Сценка подбора отелей на странице списка. Задача t_25939f89.
   Версия 5 (19.09.2026) — доводка по живому просмотру версии 4.

   Постановка Данила (без изменений):
     «Появляется планетка, на ней машинка, фотки прилетают. Потом планетка
      зумится, опускается на дно экрана, видно только её часть — и машинка
      едет по ней. Планета крутится вместе с фотками, машина ставит штампики
      гуд или не гуд. Никуда ничего не улетает — со штампиком фотка просто
      пропадает, машинка доезжает до следующей».

   ЧТО ИЗМЕНИЛОСЬ ПО СРАВНЕНИЮ С ВЕРСИЕЙ 4
   1. Одна линия грунта на обе фазы:
        --hf-sur = --hf-big * --hf-k   (радиус планеты на экране)
        --hf-grd = --hf-sur + 3px      (дорога)
        --hf-r   = --hf-grd + --hf-spot / 2
      Карточки, придорожный декор и машина стоят на --hf-grd, поэтому во
      вступлении, где планета всего 68 px, ничего не парит над пустотой, как
      это было видно на проде. Зум разворачивает кольцо в дорогу непрерывно —
      один и тот же переход, ничего не пересобирается.
   2. Небо. Над горизонтом было полэкрана пустого фона; теперь там градиент
      неба, солнце и плывущие облака. HUD переехал с верхнего края к
      горизонту и привязан к той же --hf-cap, что и машина, поэтому на
      телефоне и на десктопе держится на одном расстоянии от сцены.
   3. Вердикты расходятся по подаче: ✅ вспыхивает и растворяется вверх,
      ❌ сереет, кренится и проваливается. Плюс под годной карточкой всплывает
      настоящая цена за период из новой выдачи.
   4. Машина отвечает на вердикт: подпрыгивает на ✅, мотает на ❌, перед
      остановкой у отеля даёт стоп-сигнал.

   ПОЧЕМУ ПЛАНЕТА — ВЕКТОР, А НЕ ЭМОДЗИ (замечание Данила 19.09: «земля пиздец
   пиксельная, прям невозможно»)
   Эмодзи 🌍 — растровая картинка: в Apple Color Emoji и Noto её исходник около
   160 px. Шар на экране — 680 px на телефоне и 1040 px на десктопе, то есть
   растяжение в четыре-шесть раз; отсюда и квадраты. Это свойство исходника, а
   не настройка: ни кегль, ни отрисовка через канву, ни сглаживающий фильтр
   этого не лечат — фильтр лишь меняет квадраты на мыло. Поэтому шар нарисован
   в SVG и лежит здесь data-URI: океан градиентом, восемнадцать материков
   разложены по кольцу у самой кромки (в кадре видна только шапка планеты, и
   они один за другим проплывают через неё), блик и затемнение по краю.
   Пересобрать форму: node /root/hf-planet-gen.js --inject <этот файл>
   (генератор детерминированный, сверяется по sha256).
   Побочная польза: бокс точно равен шару, и линия грунта ложится по кромке без
   подгонки под метрики шрифта — раньше подобранный на глаз коэффициент кегля
   дважды врал: сначала планета уезжала вниз, потом дорога с карточками и
   машиной повисла над её кромкой на четыре десятка пикселей.

   ПОЧЕМУ ЗДЕСЬ НЕТ @property (живой разбор 19.09)
   Первая сборка версии 4 регистрировала --hf-r/--hf-k/--hf-ty через @property
   и вешала на них transition, чтобы планета плавно росла. На проде вышло так:
   у .hf-globe переменная уже 1, а у .hf-globe__world и у самой планеты
   по-прежнему 0.2 — анимируемая типизированная переменная перестала доезжать
   до потомков, и планета навсегда осталась размером со вступление. Поэтому
   переменные обычные (меняются мгновенно), а плавность даёт переход самого
   transform: анимируется результат, а не переменная.

   Токены — из UI-кита (/js/vse-ui.css). Здесь свои только полупрозрачные
   подложки, свет и краски неба: в ките их нет по природе.
   ============================================================================= */

/* =============================================================================
   1. ЗАСТАВКА
   ============================================================================= */
.hf-globe{
  position:fixed;inset:0;z-index:85;
  display:none;overflow:hidden;
  /* Небо, а не серая подложка: Данил просил «красочно, ярко, живенько». */
  background:linear-gradient(180deg,#BCE0FF 0%,#D9ECFF 38%,#EFF6FF 68%,#F7FAFF 100%);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:var(--font);color:var(--ink);
  opacity:0;transition:opacity .28s ease;
  /* Планета — эмодзи, а эмодзи растровый: чем крупнее, тем заметнее он
     разваливается на квадраты (на 1233 px это было видно невооружённым
     глазом). 340 — компромисс: шар остаётся горизонтом, картинка держится
     чисто, а видимая дуга даёт восемь карточек в кадре телефона. */
  /* Сколько планеты видно над нижним краем. От вьюпорта, а не константой:
     на 812 px это 211, на маленьком 667 — 173, и сцена нигде не занимает
     то треть экрана, то половину. */
  --hf-cap:clamp(150px,26vh,240px);
  --hf-big:340px;                    /* радиус планеты в фазе полёта */
  --hf-spot:48px;                    /* размер карточки отеля */
  --hf-k:.2;                         /* текущий масштаб планеты */
  --hf-ty:0px;                       /* смещение центра планеты вниз */
  /* Одна линия грунта на обе фазы. --hf-sur — радиус планеты на экране,
     --hf-grd — сама дорога (чуть выше кромки), --hf-r — центр карточки,
     поднятый над дорогой на половину её высоты. Раньше вместо этого был
     постоянный зазор в 30 px: на большой планете его не видно, а во
     вступлении, где планета 68 px, машина висела в воздухе на полрадиуса. */
  --hf-sur:calc(var(--hf-big) * var(--hf-k));
  --hf-grd:calc(var(--hf-sur) + 3px);
  --hf-r:calc(var(--hf-grd) + var(--hf-spot) / 2);
}
.hf-globe.is-on{display:block;opacity:1;}
.hf-globe.is-out{opacity:0;}

/* Фаза полёта: планета выросла и опустилась, видна только шапка. */
.hf-globe.is-cruise{
  --hf-k:1;
  --hf-ty:calc(50vh + var(--hf-big) - var(--hf-cap));
}

/* --- Небо: то, что раньше было пустым фоном ---------------------------------- */
.hf-globe__sky{position:absolute;left:0;right:0;top:0;bottom:var(--hf-cap);pointer-events:none;overflow:hidden;}
.hf-globe__sun{
  position:absolute;right:8%;top:7%;font-size:40px;line-height:1;
  filter:drop-shadow(0 0 22px rgba(255,214,120,.85));
  animation:hfSunBeat 3.4s ease-in-out infinite alternate;
}
@keyframes hfSunBeat{from{transform:scale(1);}to{transform:scale(1.07);}}
.hf-globe__cloud{position:absolute;font-size:34px;line-height:1;opacity:.92;will-change:transform;}
.hf-globe__cloud--a{top:12%;font-size:46px;opacity:.85;animation:hfDrift 26s linear infinite;}
.hf-globe__cloud--b{top:29%;font-size:66px;animation:hfDrift 34s linear infinite -12s;}
.hf-globe__cloud--c{top:46%;font-size:36px;opacity:.75;animation:hfDrift 44s linear infinite -26s;}
@keyframes hfDrift{from{transform:translateX(-24vw);}to{transform:translateX(124vw);}}
.hf-globe__bird{position:absolute;top:20%;font-size:26px;opacity:.9;animation:hfFly 19s linear infinite -6s;}
@keyframes hfFly{
  0%{transform:translate(118vw,0) scaleX(-1);}
  50%{transform:translate(52vw,-22px) scaleX(-1);}
  100%{transform:translate(-18vw,4px) scaleX(-1);}
}

/* --- Мир: планета, кольцо карточек, машина ----------------------------------- */
.hf-globe__world{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform:translate(-50%,-50%) translateY(var(--hf-ty));
  transition:transform 1.05s cubic-bezier(.22,1,.36,1);
}

/* ПЛАНЕТА — ЭМОДЗИ (решение Данила 19.09). Масштаб и позиция на обёртке,
   вращение — на самом символе: смешивать scale и rotate на одном элементе
   нельзя, transform переписал бы сам себя. */
.hf-globe__planet{
  position:absolute;left:50%;top:50%;
  width:calc(var(--hf-big) * 2);height:calc(var(--hf-big) * 2);
  margin:calc(var(--hf-big) * -1) 0 0 calc(var(--hf-big) * -1);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transform:scale(var(--hf-k));
  transition:transform 1.05s cubic-bezier(.22,1,.36,1);
}
/* Шар — вектор инлайном (разбор «почему не эмодзи» — в шапке файла). Бокс
   точно равен шару, поэтому подгонка под метрики шрифта больше не нужна.
   Поворот шагами вместе с лентой (--hf-spin задаёт JS): непрерывная анимация
   здесь была источником всех «то проехал и ничего не сделал, то оценил» —
   её фазу нельзя ни остановить, ни подогнать под приход ответа. */
.hf-globe__emoji{
  display:block;
  width:calc(var(--hf-big) * 2);height:calc(var(--hf-big) * 2);
  background:center/100% 100% no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' width='200' height='200'%3E%3Cdefs%3E%3CradialGradient id='sea' cx='36%' cy='30%' r='78%'%3E%3Cstop offset='0' stop-color='%238FDAFF'/%3E%3Cstop offset='42%' stop-color='%232E90E0'/%3E%3Cstop offset='78%' stop-color='%231667BE'/%3E%3Cstop offset='100%' stop-color='%230C4A96'/%3E%3C/radialGradient%3E%3CradialGradient id='land' cx='40%' cy='32%' r='80%'%3E%3Cstop offset='0' stop-color='%238CD86A'/%3E%3Cstop offset='60%' stop-color='%235FBF52'/%3E%3Cstop offset='100%' stop-color='%233E9B45'/%3E%3C/radialGradient%3E%3CradialGradient id='shade' cx='50%' cy='50%' r='50%'%3E%3Cstop offset='72%' stop-color='%23062F63' stop-opacity='0'/%3E%3Cstop offset='100%' stop-color='%23062F63' stop-opacity='.45'/%3E%3C/radialGradient%3E%3CradialGradient id='gloss' cx='34%' cy='26%' r='42%'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.45'/%3E%3Cstop offset='100%' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CclipPath id='ball'%3E%3Ccircle cx='100' cy='100' r='100'/%3E%3C/clipPath%3E%3C/defs%3E%3Ccircle cx='100' cy='100' r='100' fill='url(%23sea)'/%3E%3Cg clip-path='url(%23ball)'%3E%3Cpath d='M192.0 129.4C191.5 130.9 188.0 129.7 186.0 129.0C184.0 128.3 181.7 126.8 180.0 125.2C178.3 123.6 176.9 121.2 175.9 119.4C175.0 117.7 175.8 115.5 174.5 114.7C173.2 113.8 170.8 115.4 168.3 114.6C165.9 113.7 161.2 111.3 159.9 109.5C158.6 107.6 159.9 104.9 160.7 103.5C161.5 102.0 163.0 100.9 164.6 100.6C166.1 100.3 168.3 101.0 169.9 101.6C171.5 102.2 173.4 105.1 174.2 104.5C175.0 103.9 173.8 99.7 174.7 97.9C175.7 96.1 178.1 93.3 179.8 93.6C181.6 94.0 183.8 97.9 185.0 100.1C186.2 102.2 187.0 104.8 187.2 106.7C187.3 108.7 186.6 110.4 185.9 111.5C185.2 112.7 182.6 112.0 183.1 113.5C183.5 114.9 187.2 117.4 188.7 120.1C190.2 122.7 192.4 127.9 192.0 129.4Z' fill='url(%23land)'/%3E%3Cpath d='M150.8 153.5C149.8 152.4 149.4 150.6 149.1 149.1C148.8 147.6 148.5 146.0 149.1 144.6C149.8 143.1 152.3 141.4 153.1 140.3C154.0 139.3 154.6 139.5 154.3 138.3C154.1 137.0 151.6 134.7 151.4 132.8C151.3 130.9 152.3 128.2 153.4 127.0C154.5 125.7 156.5 125.6 158.1 125.1C159.7 124.5 161.5 123.5 163.0 123.6C164.5 123.8 166.0 124.8 166.9 125.9C167.9 127.0 168.3 128.8 168.6 130.3C168.9 131.8 169.3 133.4 168.6 134.9C167.9 136.3 165.5 138.0 164.6 139.1C163.7 140.1 163.1 139.9 163.4 141.1C163.7 142.4 166.1 144.7 166.3 146.6C166.4 148.5 165.4 151.2 164.3 152.5C163.2 153.7 161.2 153.8 159.6 154.3C158.0 154.9 156.2 155.9 154.7 155.8C153.2 155.6 151.7 154.6 150.8 153.5Z' fill='url(%23land)'/%3E%3Cpath d='M166.0 176.6C166.3 178.0 162.8 178.5 160.8 178.8C158.7 179.0 156.0 179.1 153.6 178.1C151.1 177.1 147.8 173.0 146.0 172.7C144.2 172.5 144.4 176.2 142.7 176.8C141.0 177.4 138.1 177.0 135.6 176.4C133.1 175.7 128.9 174.5 127.8 173.1C126.7 171.6 128.6 169.0 129.1 167.6C129.7 166.1 131.4 165.7 131.2 164.6C131.0 163.4 128.2 161.7 127.9 160.5C127.6 159.3 128.9 158.6 129.5 157.5C130.1 156.4 130.0 154.1 131.6 153.9C133.2 153.8 136.9 156.6 139.1 156.8C141.3 157.0 142.8 154.7 144.6 155.1C146.5 155.6 148.6 158.0 150.3 159.3C151.9 160.6 153.8 161.7 154.6 162.9C155.3 164.2 153.9 165.5 154.7 166.7C155.5 168.0 157.3 168.7 159.2 170.3C161.0 171.9 165.8 175.2 166.0 176.6Z' fill='url(%23land)'/%3E%3Cpath d='M108.6 184.2C107.4 184.3 106.6 183.4 105.1 183.5C103.6 183.7 101.4 185.1 99.5 184.9C97.6 184.6 94.1 183.9 93.6 182.2C93.1 180.5 95.0 176.5 96.5 174.7C98.0 172.8 101.6 172.2 102.4 170.9C103.2 169.7 101.8 168.9 101.5 167.1C101.2 165.3 100.0 161.7 100.5 159.9C101.0 158.2 103.0 157.3 104.5 156.7C106.0 156.1 107.8 156.1 109.4 156.3C111.0 156.4 113.0 156.2 114.0 157.5C115.0 158.8 115.3 162.0 115.4 163.9C115.5 165.8 113.9 167.7 114.7 168.8C115.4 169.9 118.2 169.2 120.1 170.5C121.9 171.8 125.4 174.6 125.7 176.5C126.0 178.3 123.4 180.8 121.7 181.7C119.9 182.6 116.8 181.6 115.2 181.8C113.5 182.1 113.0 182.8 111.9 183.2C110.8 183.6 109.7 184.2 108.6 184.2Z' fill='url(%23land)'/%3E%3Cpath d='M64.0 182.1C62.9 181.6 61.5 181.2 60.3 180.3C59.2 179.4 57.0 178.1 57.1 176.5C57.1 175.0 58.7 172.4 60.6 171.1C62.6 169.8 66.5 169.4 68.7 168.8C70.9 168.2 72.0 168.3 73.6 167.4C75.2 166.6 76.6 164.4 78.2 163.7C79.8 162.9 81.8 162.9 83.2 163.1C84.6 163.2 85.1 164.3 86.8 164.5C88.6 164.7 92.1 163.6 93.7 164.2C95.3 164.8 97.6 166.4 96.5 168.0C95.4 169.7 89.9 172.8 87.2 174.3C84.6 175.7 81.4 175.3 80.6 176.5C79.9 177.7 82.9 179.4 82.7 181.7C82.5 184.0 81.3 188.7 79.5 190.2C77.7 191.7 73.8 191.5 72.0 190.8C70.2 190.0 69.7 187.0 68.9 185.8C68.0 184.6 67.7 184.0 66.9 183.4C66.1 182.8 65.0 182.6 64.0 182.1Z' fill='url(%23land)'/%3E%3Cpath d='M62.8 162.1C61.1 162.0 57.8 159.6 56.2 158.7C54.7 157.8 54.2 156.6 53.3 156.8C52.4 157.1 52.0 159.4 50.7 160.2C49.4 160.9 47.0 161.9 45.4 161.5C43.9 161.2 42.2 159.4 41.3 158.0C40.5 156.5 40.2 154.4 40.5 152.9C40.7 151.5 42.0 150.1 43.0 149.2C43.9 148.4 45.9 148.6 46.4 147.9C46.9 147.1 46.3 146.5 46.1 144.9C45.9 143.2 44.7 139.6 45.2 138.0C45.8 136.3 47.8 134.7 49.3 135.0C50.8 135.4 53.1 138.3 54.2 140.0C55.4 141.7 55.5 144.1 56.1 145.4C56.7 146.7 57.0 147.0 57.8 147.8C58.6 148.5 59.6 148.9 60.8 149.9C61.9 151.0 63.6 152.2 64.6 153.8C65.6 155.4 67.1 158.1 66.8 159.5C66.5 160.8 64.6 162.2 62.8 162.1Z' fill='url(%23land)'/%3E%3Cpath d='M21.6 140.0C21.3 138.5 22.1 136.7 21.2 136.6C20.3 136.5 18.1 138.9 16.2 139.1C14.2 139.3 10.0 139.4 9.5 137.9C9.0 136.3 11.8 131.9 13.4 129.9C14.9 128.0 17.3 126.8 18.8 126.0C20.3 125.1 21.5 125.9 22.3 125.0C23.1 124.2 22.9 123.2 23.7 121.0C24.5 118.7 26.0 113.0 27.2 111.6C28.4 110.3 29.8 112.2 30.8 113.1C31.8 113.9 32.6 115.2 33.1 116.6C33.6 118.0 34.1 119.6 33.9 121.3C33.8 123.0 32.4 125.2 32.2 126.8C32.0 128.3 32.9 129.3 32.7 130.6C32.5 131.9 31.4 132.9 31.0 134.7C30.6 136.6 31.0 139.1 30.4 141.5C29.8 143.9 28.5 148.6 27.2 149.2C26.0 149.8 24.0 146.8 23.1 145.2C22.1 143.7 21.9 141.4 21.6 140.0Z' fill='url(%23land)'/%3E%3Cpath d='M50.0 99.4C49.0 101.0 45.2 101.4 44.0 102.9C42.7 104.5 44.2 107.8 42.7 108.8C41.2 109.8 37.3 109.1 34.9 108.7C32.6 108.4 30.3 107.6 28.5 106.8C26.7 105.9 25.7 104.4 24.1 103.8C22.6 103.1 21.4 103.1 19.2 102.8C17.0 102.4 12.1 102.6 11.0 101.5C9.8 100.4 13.0 97.8 12.5 96.0C12.1 94.3 9.3 93.0 8.3 90.9C7.2 88.9 4.9 85.2 6.2 83.9C7.4 82.6 13.3 83.6 15.9 83.3C18.6 83.1 20.0 82.3 22.0 82.3C23.9 82.3 25.9 82.9 27.8 83.2C29.7 83.5 31.6 83.5 33.2 84.1C34.8 84.7 36.4 85.8 37.5 86.9C38.5 88.0 37.2 89.7 39.3 90.8C41.4 91.9 48.3 92.1 50.1 93.5C51.9 95.0 51.0 97.8 50.0 99.4Z' fill='url(%23land)'/%3E%3Cpath d='M37.0 72.4C36.2 73.1 35.8 75.1 34.9 75.2C34.0 75.3 32.4 74.1 31.4 73.1C30.4 72.0 30.1 69.8 29.0 69.1C27.9 68.3 26.4 69.2 24.8 68.5C23.1 67.8 19.8 66.3 19.2 64.9C18.7 63.4 20.1 60.5 21.4 59.6C22.7 58.6 26.3 59.7 27.1 59.0C27.9 58.4 26.6 57.5 26.1 55.5C25.6 53.5 23.9 48.8 24.1 47.2C24.4 45.5 26.5 45.0 27.8 45.6C29.1 46.2 31.0 49.1 32.2 50.7C33.3 52.2 34.0 53.6 34.8 54.7C35.6 55.9 36.2 56.5 37.0 57.5C37.8 58.5 38.7 59.2 39.7 60.5C40.7 61.8 42.4 63.5 43.0 65.0C43.5 66.6 43.7 68.8 43.1 69.8C42.5 70.9 40.5 70.7 39.5 71.2C38.4 71.6 37.7 71.7 37.0 72.4Z' fill='url(%23land)'/%3E%3Cpath d='M42.6 48.1C39.9 47.3 33.7 45.5 33.6 43.8C33.5 42.2 39.5 39.6 42.0 38.2C44.5 36.9 46.7 36.3 48.5 35.7C50.4 35.1 51.9 35.4 53.3 34.5C54.7 33.7 55.2 31.6 56.7 30.6C58.2 29.5 60.6 28.2 62.3 28.2C64.0 28.2 64.9 30.2 66.9 30.6C68.9 31.1 73.0 29.8 74.3 30.8C75.7 31.8 74.9 34.8 74.9 36.6C74.9 38.5 75.7 40.4 74.1 41.7C72.6 43.0 66.6 43.3 65.5 44.5C64.3 45.7 67.0 46.8 67.2 48.9C67.5 51.0 68.2 54.6 67.1 56.9C66.1 59.2 63.1 62.7 60.9 62.8C58.7 63.0 55.1 60.3 54.0 57.8C53.0 55.3 55.2 49.3 54.5 47.7C53.9 46.2 52.2 48.4 50.2 48.5C48.2 48.5 45.4 48.9 42.6 48.1Z' fill='url(%23land)'/%3E%3Cpath d='M94.4 25.7C94.6 26.8 97.2 29.3 97.4 30.8C97.6 32.3 97.2 34.5 95.8 34.7C94.4 34.8 91.1 32.6 89.2 31.6C87.4 30.6 85.9 29.7 84.6 28.7C83.3 27.8 82.2 26.7 81.4 25.8C80.6 24.8 81.1 23.9 79.7 23.0C78.3 22.2 74.9 21.7 73.0 20.5C71.1 19.3 68.3 16.9 68.2 15.8C68.1 14.6 71.2 14.3 72.6 13.8C74.0 13.4 75.2 13.1 76.6 13.1C77.9 13.1 79.3 13.2 80.6 13.5C81.8 13.8 83.0 15.1 84.2 14.9C85.4 14.7 86.2 12.6 87.9 12.3C89.6 12.0 92.9 12.2 94.3 13.2C95.8 14.2 96.0 16.8 96.5 18.2C97.0 19.7 97.2 20.8 97.2 21.8C97.2 22.8 96.8 23.7 96.3 24.3C95.9 25.0 94.2 24.7 94.4 25.7Z' fill='url(%23land)'/%3E%3Cpath d='M123.8 51.4C122.1 51.4 120.3 49.3 118.4 48.8C116.6 48.3 114.2 49.7 112.7 48.4C111.3 47.2 110.2 43.8 109.7 41.4C109.2 39.1 109.2 36.3 109.9 34.3C110.5 32.3 113.5 30.9 113.8 29.4C114.1 27.9 112.2 27.1 111.5 25.1C110.8 23.2 109.0 19.0 109.5 17.7C110.0 16.4 113.3 18.9 114.5 17.5C115.7 16.1 115.3 11.6 116.6 9.5C117.9 7.4 120.6 4.3 122.4 4.8C124.1 5.3 125.8 10.1 127.0 12.6C128.1 15.1 128.8 17.5 129.2 19.7C129.6 21.9 128.9 24.1 129.2 25.9C129.5 27.7 131.2 29.2 131.0 30.6C130.8 31.9 128.7 33.1 127.9 34.1C127.1 35.1 125.9 34.1 126.1 36.6C126.3 39.1 129.3 46.6 129.0 49.1C128.6 51.5 125.6 51.5 123.8 51.4Z' fill='url(%23land)'/%3E%3Cpath d='M144.7 50.2C144.9 48.4 146.4 46.2 146.2 45.3C146.0 44.4 143.8 45.3 143.5 44.6C143.1 44.0 143.7 42.4 144.1 41.4C144.5 40.3 145.2 39.2 145.9 38.2C146.6 37.3 147.5 36.8 148.3 35.8C149.0 34.8 149.3 34.0 150.3 32.1C151.3 30.3 153.0 25.7 154.3 24.6C155.6 23.5 157.5 24.5 158.3 25.6C159.0 26.6 158.7 29.3 158.8 30.8C158.8 32.3 158.6 33.4 158.5 34.5C158.5 35.5 158.3 36.1 158.6 36.9C159.0 37.7 160.9 38.3 160.7 39.2C160.5 40.1 158.5 41.6 157.5 42.4C156.6 43.3 155.7 43.2 155.0 44.5C154.4 45.7 154.5 48.3 153.6 50.0C152.7 51.7 151.0 53.5 149.6 54.5C148.2 55.5 145.8 56.8 145.0 56.1C144.1 55.4 144.5 52.0 144.7 50.2Z' fill='url(%23land)'/%3E%3Cpath d='M172.3 79.3C171.0 79.7 170.4 79.0 170.1 81.0C169.7 83.0 171.1 89.7 169.9 91.4C168.8 93.1 164.8 92.9 163.2 91.1C161.5 89.3 161.0 83.1 160.2 80.8C159.4 78.5 159.4 78.2 158.3 77.3C157.2 76.4 155.3 76.3 153.7 75.3C152.1 74.2 150.2 72.7 148.9 70.9C147.6 69.0 145.1 65.6 145.8 64.3C146.5 63.0 150.8 62.9 153.0 63.0C155.2 63.1 158.0 65.6 159.3 64.9C160.5 64.2 159.3 59.8 160.3 58.7C161.4 57.6 164.0 57.3 165.4 58.1C166.9 59.0 167.5 62.7 169.0 63.9C170.4 65.2 172.3 64.5 174.0 65.4C175.7 66.2 178.1 67.6 179.0 69.1C179.9 70.6 179.4 72.7 179.3 74.4C179.1 76.0 179.4 78.0 178.2 78.8C177.0 79.6 173.7 78.9 172.3 79.3Z' fill='url(%23land)'/%3E%3Cpath d='M136.8 145.4C135.8 145.1 133.8 141.3 132.8 140.3C131.9 139.4 131.7 139.7 130.9 139.7C130.1 139.7 128.6 140.8 127.9 140.4C127.1 140.0 127.0 138.2 126.3 137.1C125.6 136.1 124.1 135.2 123.7 134.1C123.3 133.0 123.5 131.5 123.7 130.4C123.9 129.3 124.3 128.2 124.9 127.5C125.5 126.9 126.5 126.6 127.3 126.5C128.0 126.4 129.0 127.7 129.5 126.8C130.0 125.9 129.8 121.8 130.5 121.1C131.2 120.3 132.9 121.2 133.7 122.2C134.6 123.1 134.8 125.6 135.5 126.7C136.2 127.8 137.5 127.9 137.9 128.9C138.3 129.8 137.7 131.3 137.8 132.4C137.9 133.4 138.5 134.3 138.6 135.3C138.8 136.3 138.9 137.4 138.9 138.5C138.8 139.7 138.9 141.2 138.5 142.3C138.2 143.4 137.7 145.8 136.8 145.4Z' fill='url(%23land)'/%3E%3Cpath d='M54.6 114.4C53.7 114.5 51.9 115.1 51.0 114.8C50.1 114.5 49.2 113.6 49.1 112.7C48.9 111.7 49.0 110.1 50.0 109.2C51.0 108.3 53.7 107.9 54.9 107.4C56.1 107.0 56.6 106.7 57.3 106.5C58.0 106.2 58.4 106.7 59.2 105.9C60.0 105.2 61.0 102.7 62.1 101.8C63.2 100.9 64.8 100.4 65.8 100.5C66.8 100.6 67.9 101.2 68.0 102.2C68.1 103.1 67.2 105.0 66.4 106.1C65.7 107.3 64.0 108.3 63.7 109.1C63.3 109.8 64.2 110.0 64.3 110.7C64.4 111.4 64.5 112.1 64.3 113.3C64.1 114.5 64.0 117.0 63.2 117.9C62.4 118.7 60.5 118.6 59.4 118.6C58.3 118.5 57.2 118.2 56.7 117.5C56.2 116.8 56.7 114.9 56.4 114.4C56.0 113.9 55.5 114.3 54.6 114.4Z' fill='url(%23land)'/%3E%3Cpath d='M103.6 61.6C103.0 62.2 102.3 63.1 101.3 63.1C100.2 63.2 98.4 61.4 97.4 61.6C96.4 61.9 96.2 64.5 95.2 64.8C94.2 65.2 92.6 64.2 91.4 63.6C90.2 63.0 89.1 62.1 88.0 61.2C86.9 60.3 84.9 59.3 84.8 58.3C84.7 57.2 87.2 56.0 87.3 54.9C87.4 53.9 85.6 53.0 85.3 52.0C85.0 51.1 85.2 50.0 85.5 49.2C85.8 48.3 86.7 47.9 87.3 47.0C87.9 46.1 88.1 43.7 89.2 43.7C90.3 43.8 92.6 46.5 93.9 47.3C95.2 48.1 96.0 48.1 97.0 48.6C98.0 49.1 99.2 49.7 99.9 50.5C100.7 51.2 100.5 52.2 101.7 53.2C102.8 54.1 106.3 55.0 106.9 56.0C107.6 57.1 106.0 58.3 105.4 59.2C104.9 60.2 104.3 60.9 103.6 61.6Z' fill='url(%23land)'/%3E%3Cpath d='M93.5 143.4C93.0 143.5 91.6 146.2 91.0 146.4C90.3 146.6 90.3 145.2 89.8 144.6C89.2 144.1 88.2 143.9 87.7 143.1C87.1 142.3 86.2 140.8 86.6 139.8C86.9 138.8 88.8 137.7 89.7 137.1C90.6 136.6 91.5 136.7 92.1 136.5C92.7 136.3 93.0 137.1 93.4 136.1C93.7 135.0 93.7 131.6 94.3 130.3C94.9 128.9 96.6 127.4 97.2 127.8C97.8 128.2 97.6 131.5 98.0 132.6C98.4 133.7 99.3 133.5 99.4 134.3C99.5 135.1 99.0 136.6 98.7 137.4C98.4 138.3 97.5 138.7 97.6 139.5C97.8 140.3 99.2 141.1 99.5 142.3C99.8 143.4 99.8 145.2 99.5 146.4C99.1 147.7 98.2 149.7 97.4 149.6C96.6 149.5 95.2 146.8 94.5 145.7C93.9 144.7 94.1 143.3 93.5 143.4Z' fill='url(%23land)'/%3E%3Ccircle cx='100' cy='100' r='100' fill='url(%23shade)'/%3E%3Cellipse cx='68' cy='52' rx='52' ry='38' fill='url(%23gloss)'/%3E%3C/g%3E%3C/svg%3E");
  filter:drop-shadow(0 26px 60px rgba(13,42,98,.3));
  transform-origin:50% 50%;
  transform:rotate(var(--hf-spin,0deg));
  transition:transform var(--hf-step,.52s) cubic-bezier(.34,.06,.2,1);
}

/* Атмосфера — тонкий светящийся ободок над кромкой. */
.hf-globe__atmo{
  position:absolute;left:50%;top:50%;
  width:calc(var(--hf-big) * 2 + 26px);height:calc(var(--hf-big) * 2 + 26px);
  margin:calc((var(--hf-big) * -1) - 13px) 0 0 calc((var(--hf-big) * -1) - 13px);
  border-radius:50%;pointer-events:none;
  transform:scale(var(--hf-k));
  transition:transform 1.05s cubic-bezier(.22,1,.36,1);
  box-shadow:0 0 42px 10px rgba(96,160,255,.35), inset 0 0 26px rgba(150,200,255,.35);
}

/* --- Кольцо: карточки и дорога, крутится как поверхность --------------------- */
/* Лента едет теми же шагами и тем же значением --hf-spin, что и планета:
   иначе поверхность и то, что на ней стоит, разъезжаются. */
.hf-globe__ring{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform:rotate(var(--hf-spin,0deg));
  transition:transform var(--hf-step,.52s) cubic-bezier(.34,.06,.2,1);
}

/* Дорога по поверхности: пунктир бежит вместе с кольцом. */
.hf-globe__road{
  position:absolute;left:50%;top:50%;
  width:calc(var(--hf-grd) * 2);height:calc(var(--hf-grd) * 2);
  margin:calc(var(--hf-grd) * -1) 0 0 calc(var(--hf-grd) * -1);
  border-radius:50%;
  border:2px dashed rgba(255,255,255,.62);
  opacity:.45;
  /* width/height и отрицательные margin считаются от --hf-grd: переход по ним
     и даёт плавное «разворачивание» дороги вместе с ростом планеты. */
  transition:opacity .5s ease,
             width 1.05s cubic-bezier(.22,1,.36,1),
             height 1.05s cubic-bezier(.22,1,.36,1),
             margin 1.05s cubic-bezier(.22,1,.36,1);
}
.hf-globe.is-cruise .hf-globe__road{opacity:1;}

/* Карточка отеля стоит на поверхности: наклон = наклону планеты в этой точке. */
.hf-globe__spot{
  position:absolute;left:0;top:0;width:0;height:0;
  transform:rotate(var(--a)) translateY(calc(var(--hf-r) * -1));
  transition:transform .95s cubic-bezier(.22,1,.36,1);
}
.hf-globe__card{
  position:absolute;left:0;top:0;
  width:var(--hf-spot);height:var(--hf-spot);
  margin:calc(var(--hf-spot) / -2) 0 0 calc(var(--hf-spot) / -2);
  border-radius:13px;overflow:hidden;
  background:var(--card) center/cover no-repeat;
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 6px 16px rgba(9,26,58,.28);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-15);
  transform-origin:50% 100%;
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .42s ease,box-shadow .35s ease,filter .42s ease,border-color .3s ease;
}
/* Прилёт со своего места на странице: стартовое смещение считает JS. */
.hf-globe__spot.is-arriving .hf-globe__card{
  transform:translate(var(--dx),var(--dy)) scale(var(--s));
  opacity:.55;
}
/* Машина поравнялась — карточка подаётся вперёд и подсвечивается. */
.hf-globe__spot.is-near .hf-globe__card{
  transform:translateY(-7px) scale(1.16);
  box-shadow:0 12px 26px rgba(9,26,58,.34),0 0 0 3px rgba(255,255,255,.55);
}
/* Ждём ответ у ворот: стучимся. Раньше машина просто стояла, и пауза
   читалась как подвисшая анимация. */
.hf-globe__spot.is-knock .hf-globe__card{animation:hfKnock .52s ease-in-out infinite;}
@keyframes hfKnock{
  0%,100%{transform:translateY(-4px) scale(1.1) rotate(0deg);}
  40%{transform:translateY(-6px) scale(1.1) rotate(-3deg);}
  70%{transform:translateY(-3px) scale(1.1) rotate(2.5deg);}
}
.hf-globe__spot.is-knock::before{
  content:'✊';position:absolute;left:calc(var(--hf-spot) / 2 - 2px);top:calc(var(--hf-spot) / -2 - 2px);
  font-size:15px;line-height:1;animation:hfKnockHand .52s ease-in-out infinite;
}
@keyframes hfKnockHand{0%,100%{transform:translate(0,0);}45%{transform:translate(-5px,2px);}}

/* Вердикты уходят по-разному: годный вспыхивает и растворяется вверх,
   негодный сереет, кренится и проваливается. В версии 4 оба гасли одинаково,
   и разница между ✅ и ❌ читалась только по цвету рамки. */
.hf-globe__spot.is-ok .hf-globe__card{border-color:rgba(74,222,128,.95);box-shadow:0 0 22px rgba(34,197,94,.6);}
.hf-globe__spot.is-no .hf-globe__card{border-color:rgba(248,113,113,.9);filter:grayscale(.85);}
.hf-globe__spot.is-ok.is-gone .hf-globe__card{transform:translateY(-20px) scale(.42);opacity:0;}
.hf-globe__spot.is-no.is-gone .hf-globe__card{transform:translateY(12px) scale(.82) rotate(-9deg);opacity:0;filter:grayscale(1) blur(1.5px);}

/* Тень под карточкой: без неё отель «висит» над грунтом, а не стоит на нём. */
.hf-globe__spot::after{
  content:'';position:absolute;left:50%;top:calc(var(--hf-spot) / 2 - 5px);
  width:30px;height:8px;margin-left:-15px;border-radius:50%;
  background:rgba(9,26,58,.2);filter:blur(2.5px);
  transition:opacity .4s ease;
}
.hf-globe__spot.is-gone::after{opacity:0;}

/* Настоящая цена за период из новой выдачи — всплывает на ✅ под карточкой.
   Это то, ради чего всё затевалось: видно, что отель реально оценили, а не
   просто пометили галочкой. */
.hf-globe__price{
  position:absolute;left:50%;top:calc(var(--hf-spot) / 2 + 7px);
  transform:translateX(-50%);
  padding:2px 6px;border-radius:var(--r-pill,999px);
  background:rgba(255,255,255,.96);color:#15803D;
  font-size:10px;font-weight:700;line-height:1.5;white-space:nowrap;
  box-shadow:0 3px 10px rgba(9,26,58,.22);
  animation:hfPricePop .32s cubic-bezier(.2,.9,.3,1.5);
  transition:opacity .3s ease;
}
@keyframes hfPricePop{from{opacity:0;transform:translate(-50%,6px) scale(.8);}to{opacity:1;transform:translateX(-50%) scale(1);}}
.hf-globe__spot.is-gone .hf-globe__price,
.hf-globe__price.is-gone{opacity:0;}

/* Придорожный декор: между отелями проплывают ёлки и холмы. Сценка от этого
   читается как дорога, а не как список иконок по кругу. */
.hf-globe__deco{
  position:absolute;left:0;top:0;width:0;height:0;
  transform:rotate(var(--a)) translateY(calc(var(--hf-grd) * -1));
  font-size:17px;line-height:1;pointer-events:none;opacity:.85;
  transition:transform .95s cubic-bezier(.22,1,.36,1);
}
.hf-globe__deco span{position:absolute;left:-10px;bottom:-2px;filter:drop-shadow(0 2px 2px rgba(9,26,58,.25));}

/* Искры на галочке — короткий всплеск, без остаточного свечения. */
.hf-globe__spark{
  position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;
  border-radius:50%;background:#4ADE80;pointer-events:none;
  animation:hfSpark .62s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes hfSpark{
  0%{transform:translate(0,0) scale(1);opacity:1;}
  100%{transform:translate(var(--sx),var(--sy)) scale(.2);opacity:0;}
}

/* Штамп поверх карточки. Живёт 620 мс (в версии 4 карточка начинала гаснуть
   через 240 мс, не дорисовав сам штамп, — вердикта фактически не было видно). */
.hf-globe__stamp{
  position:absolute;left:50%;top:50%;font-size:20px;line-height:1;
  transform:translate(-50%,-50%);
  animation:hfStampPop .34s cubic-bezier(.2,.9,.3,1.5);
  filter:drop-shadow(0 2px 4px rgba(9,26,58,.4));
}
@keyframes hfStampPop{
  0%{transform:translate(-50%,-50%) scale(.35) rotate(-18deg);opacity:0;}
  60%{transform:translate(-50%,-50%) scale(1.3) rotate(7deg);opacity:1;}
  100%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1;}
}

/* --- Машина: всегда на вершине, планета крутится под ней --------------------- */
.hf-globe__rig{
  position:absolute;left:0;top:0;
  transform:translate(-50%,-100%) translateY(calc(var(--hf-grd) * -1));
  transition:transform 1.05s cubic-bezier(.22,1,.36,1);
  display:flex;align-items:flex-end;white-space:nowrap;
  filter:drop-shadow(0 4px 6px rgba(9,26,58,.3));
  z-index:4;
}
.hf-globe__rig-in{position:relative;display:flex;align-items:flex-end;animation:hfBump .26s linear infinite;}
@keyframes hfBump{
  0%{transform:translateY(0) rotate(0deg);}
  20%{transform:translateY(-2px) rotate(-1.6deg);}
  45%{transform:translateY(.5px) rotate(.4deg);}
  70%{transform:translateY(-1.4px) rotate(1.5deg);}
  100%{transform:translateY(0) rotate(0deg);}
}
/* Машина крупнее: рядом с карточками 48 px прежние 30 px читались мелочью. */
.hf-globe__auto{font-size:34px;transform:scaleX(-1);}
.hf-globe__crew{font-size:19px;margin:0 -4px 7px;animation:hfCrewBob .44s ease-in-out infinite alternate;}
.hf-globe__crew--b{animation-delay:.22s;}
@keyframes hfCrewBob{from{transform:translateY(0);}to{transform:translateY(-3px);}}
/* Пыль — позади машины. Едем вправо (поверхность уходит влево), значит след
   остаётся слева; в версии 4 пыль летела перед капотом. */
.hf-globe__dust{position:absolute;left:-12px;bottom:2px;font-size:13px;opacity:.5;animation:hfDust .55s linear infinite;}
@keyframes hfDust{0%{opacity:.5;transform:translateX(0) scale(.7);}100%{opacity:0;transform:translateX(-12px) scale(1.2);}}
/* Стоп-сигнал перед остановкой у отеля. */
.hf-globe__brake{
  position:absolute;left:-2px;bottom:9px;width:5px;height:5px;border-radius:50%;
  background:#F87171;opacity:0;transition:opacity .18s ease;
}
.hf-globe.is-braking .hf-globe__brake{opacity:1;box-shadow:0 0 9px 3px rgba(248,113,113,.85);}
/* Машина ждёт ответ у ворот отеля: мотор заглушен, пыли нет. Трясущаяся на
   месте машина читалась как подвисшая анимация. */
.hf-globe.is-idle .hf-globe__rig-in{animation-play-state:paused;}
.hf-globe.is-idle .hf-globe__dust{opacity:0;}

/* Реакция экипажа на вердикт: подпрыгнули на ✅, мотнули головой на ❌. */
.hf-globe__react{
  position:absolute;left:50%;top:-30px;transform:translateX(-50%) scale(.4);
  font-size:19px;line-height:1;opacity:0;pointer-events:none;
}
.hf-globe__react.is-on{animation:hfReact .7s cubic-bezier(.2,.9,.3,1.4) forwards;}
@keyframes hfReact{
  0%{opacity:0;transform:translate(-50%,6px) scale(.4);}
  35%{opacity:1;transform:translate(-50%,-6px) scale(1.15);}
  75%{opacity:1;transform:translate(-50%,-10px) scale(1);}
  100%{opacity:0;transform:translate(-50%,-18px) scale(.9);}
}
.hf-globe.is-yes .hf-globe__rig{animation:hfHop .42s cubic-bezier(.3,.9,.3,1.4);}
@keyframes hfHop{0%,100%{}50%{transform:translate(-50%,-100%) translateY(calc((var(--hf-grd) + 11px) * -1));}}
.hf-globe.is-nope .hf-globe__rig-in{animation:hfNope .4s ease-in-out;}
@keyframes hfNope{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px) rotate(-2deg);}75%{transform:translateX(4px) rotate(2deg);}}

/* Пока ответа нет — над машиной лупа: мы смотрим, но вердикта ещё нет. */
.hf-globe__look{
  position:absolute;left:50%;top:-22px;transform:translateX(-50%);
  font-size:15px;opacity:0;transition:opacity .3s ease;
  animation:hfLook 1.1s ease-in-out infinite alternate;
}
.hf-globe.is-waiting .hf-globe__look{opacity:.9;}
@keyframes hfLook{from{transform:translateX(-50%) translateY(0) rotate(-8deg);}to{transform:translateX(-50%) translateY(-3px) rotate(8deg);}}

/* --- Финал: жесты и зелёное свечение (приём с детальной, один в один) --------- */
/* Жесты держатся над машиной, а не в абстрактных 38% высоты экрана. */
.hf-globe__cheer{
  position:absolute;left:50%;bottom:calc(50% + 46px);width:0;height:0;z-index:6;
  transition:bottom 1.05s cubic-bezier(.22,1,.36,1);
}
.hf-globe.is-cruise .hf-globe__cheer{bottom:calc(var(--hf-cap) + 132px);}
.hf-globe__gesture{
  position:absolute;left:50%;top:50%;font-size:40px;line-height:1;
  transform:translate(-50%,-50%);
  animation:hfGesturePop .32s cubic-bezier(.2,.9,.3,1.5);
}
@keyframes hfGesturePop{
  0%{transform:translate(-50%,-50%) scale(.45) rotate(-14deg);opacity:0;}
  60%{transform:translate(-50%,-50%) scale(1.22) rotate(5deg);opacity:1;}
  100%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1;}
}
.hf-globe.is-done .hf-globe__atmo{
  box-shadow:0 0 60px 16px rgba(52,211,153,.5), inset 0 0 30px rgba(134,239,172,.45);
  animation:hfWin .9s ease;
}
@keyframes hfWin{0%{transform:scale(calc(var(--hf-k) * .97));}55%{transform:scale(calc(var(--hf-k) * 1.03));}100%{transform:scale(var(--hf-k));}}

/* --- HUD: подпись и прогресс -------------------------------------------------- */
/* Привязан к горизонту той же переменной, что и машина: на телефоне и на
   десктопе расстояние до сцены одинаковое. В версии 4 HUD стоял у верхнего
   края, и между ним и планетой зияло полэкрана. */
.hf-globe__hud{
  position:absolute;left:50%;bottom:calc(50% + 138px);transform:translateX(-50%);
  width:min(460px,88vw);text-align:center;z-index:5;
  transition:bottom 1.05s cubic-bezier(.22,1,.36,1);
}
.hf-globe.is-cruise .hf-globe__hud{bottom:calc(var(--hf-cap) + 140px);}
/* Кегль на телефоне меньше заявленного в первой сборке: при fs-20 длинные
   реплики («Звоним на ресепшн…») обрезались многоточием — фраза теряла смысл
   ровно там, где она смешная. */
.hf-globe__cap{
  display:block;font-size:var(--fs-17);font-weight:700;letter-spacing:-.01em;color:var(--ink);
  min-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
  /* Проявление мягкое и короткое: при жёстком fade-in с нуля глаз ловил
     строку на середине и читал как рябь. */
  animation:hfCapIn .26s cubic-bezier(.22,1,.36,1);
}
@keyframes hfCapIn{from{opacity:.3;transform:translateY(3px);}to{opacity:1;transform:none;}}
.hf-globe__sub{
  display:block;margin-top:4px;font-size:var(--fs-13);color:var(--muted);
  min-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hf-globe__bar{display:block;height:4px;margin-top:var(--sp-4);border-radius:var(--r-pill);background:rgba(18,33,59,.12);overflow:hidden;}
.hf-globe__fill{
  display:block;height:100%;width:4%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,#2E6BD6,#6FA8FF);
  transition:width .34s linear;
}
.hf-globe.is-done .hf-globe__fill{background:linear-gradient(90deg,#16A34A,#4ADE80);}
.hf-globe.is-done .hf-globe__cap{color:var(--green);}

/* Десктоп: планета крупнее, шапки видно больше, карточки крупнее. */
@media (min-width:768px){
  .hf-globe{--hf-cap:clamp(200px,34vh,330px);--hf-big:520px;--hf-spot:62px;}
  .hf-globe.is-cruise .hf-globe__hud{bottom:calc(var(--hf-cap) + 180px);}
  .hf-globe.is-cruise .hf-globe__cheer{bottom:calc(var(--hf-cap) + 168px);}
  .hf-globe__auto{font-size:44px;}
  .hf-globe__crew{font-size:24px;}
  .hf-globe__cap{font-size:var(--fs-24);}
  .hf-globe__deco{font-size:22px;}
  .hf-globe__spot::after{width:38px;height:10px;margin-left:-19px;}
  .hf-globe__price{font-size:12px;padding:2px 8px;}
  .hf-globe__sun{font-size:56px;}
  .hf-globe__cloud--b{font-size:88px;}
  .hf-globe__cloud--a{font-size:62px;}
}

/* =============================================================================
   2. ПОЛОСА НАД СПИСКОМ (lite / reduce)
   ============================================================================= */
.hf-scene{
  display:none;align-items:center;gap:var(--sp-3);
  margin:0 0 var(--sp-3);padding:var(--sp-3) var(--sp-4);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--sh-1);font-family:var(--font);color:var(--ink);
}
.hf-scene.is-on{display:flex;}
.hf-scene.is-out{opacity:0;transition:opacity .28s ease;}
.hf-scene__crew{position:relative;flex:0 0 auto;width:96px;height:26px;}
.hf-scene__unit{position:absolute;top:0;display:inline-flex;align-items:flex-end;gap:1px;font-size:var(--fs-15);line-height:1;}
.hf-scene__unit--a{left:0;animation:hfWalkA 2s ease-in-out infinite alternate;}
.hf-scene__unit--b{right:0;animation:hfWalkB 2.3s ease-in-out infinite alternate;}
.hf-scene__tool{font-size:var(--fs-13);transform-origin:50% 90%;animation:hfToolSwing .55s ease-in-out infinite alternate;}
@keyframes hfWalkA{from{transform:translateX(0);}to{transform:translateX(34px);}}
@keyframes hfWalkB{from{transform:translateX(0);}to{transform:translateX(-30px);}}
@keyframes hfToolSwing{from{transform:rotate(-16deg);}to{transform:rotate(16deg);}}
.hf-scene__txt{flex:1;min-width:0;}
.hf-scene__cap{display:block;font-size:var(--fs-13);font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hf-scene__bar{display:block;height:4px;margin-top:6px;border-radius:var(--r-pill);background:var(--line-2);overflow:hidden;}
.hf-scene__fill{display:block;height:100%;width:8%;border-radius:var(--r-pill);background:var(--blue);transition:width .32s linear;}
.hf-scene.is-done .hf-scene__fill{background:var(--green);}
.hf-scene.is-done .hf-scene__cap{color:var(--green);}
.hf-card-unit--collapsing{overflow:hidden;opacity:0;transform:scale(.97);
  transition:max-height .42s ease,opacity .28s ease,transform .28s ease,margin .42s ease,padding .42s ease;}

/* =============================================================================
   3. Доступность: механика остаётся, движение убирается.
   ============================================================================= */
@media (prefers-reduced-motion:reduce){
  .hf-scene__unit--a,.hf-scene__unit--b,.hf-scene__tool{animation:none;}
  .hf-scene__fill,.hf-card-unit--collapsing{transition:none;}
  .hf-scene.is-out{transition:none;}
  .hf-globe__ring,.hf-globe__emoji,.hf-globe__rig-in,.hf-globe__rig,
  .hf-globe__crew,.hf-globe__dust,.hf-globe__look,.hf-globe__gesture,
  .hf-globe__stamp,.hf-globe__atmo,.hf-globe__price,.hf-globe__react,
  .hf-globe__sun,.hf-globe__cloud,.hf-globe__bird,
  .hf-globe__spot.is-knock .hf-globe__card,.hf-globe__spot.is-knock::before{animation:none !important;}
  .hf-globe__world,.hf-globe__planet,.hf-globe__spot,.hf-globe__card,
  .hf-globe__deco,.hf-globe__rig,.hf-globe__fill,.hf-globe__atmo,
  .hf-globe__hud,.hf-globe__cheer{transition:none !important;}
  .hf-globe,.hf-globe.is-out{transition:none;}
}