/* =============================================================================
   Сценка подбора отелей на странице списка. Задача t_25939f89.
   Версия 3 (19.09.2026) — доводка по постановке Данила:

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

   ЧТО ОТКУДА ВЗЯТО
   Финал (серия жестов + зелёный вздрог со свечением) повторяет детальную
   страницу: hdGesturePop и hdFreePulse из hotel-detail-v2.css, те же кривые и
   те же длительности — Данил просил «один в один», поэтому значения скопированы
   осознанно, а не подобраны на глаз.

   Цвета, радиусы, кегли и отступы — только токены UI-кита (/js/vse-ui.css).
   Свои значения здесь — полупрозрачные подложки и оттенки свечения (rgba от
   тех же токенов), их в ките нет по природе.
   ============================================================================= */

/* =============================================================================
   1. ЗАСТАВКА (режим full)
   ============================================================================= */

.hf-globe{
  position:fixed;inset:0;z-index:85;                 /* выше шторок (70–79), ниже карты (90) и шапки (1000) */
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-3) calc(var(--sp-5) + var(--safe-b));
  background:rgba(247,247,244,.95);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  font-family:var(--font);color:var(--ink);
  opacity:0;transition:opacity .22s ease;
  overflow:hidden;
}
.hf-globe.is-on{display:flex;opacity:1;}
.hf-globe.is-out{opacity:0;}

/* --- Сцена -------------------------------------------------------------------
   Три зоны: слева «подходят» (сетка, как на странице), по центру планета с
   орбитой, справа мусорка. Зоны — по краям экрана, чтобы карточка действительно
   «улетала в сторону», а не переезжала на пару сантиметров. */
.hf-globe__scene{
  position:relative;width:100%;max-width:640px;
  display:flex;align-items:center;justify-content:center;
  --hf-ball:118px;                                   /* диаметр планеты (мобильный базовый) */
  --hf-orbit:104px;                                  /* радиус орбиты */
  --hf-pin:40px;                                     /* размер карточки-отеля на орбите */
  min-height:300px;
}

.hf-globe__stage{position:relative;width:calc(var(--hf-orbit) * 2 + var(--hf-pin));height:calc(var(--hf-orbit) * 2 + var(--hf-pin));}

/* Свечение планеты. В финале становится зелёным и пульсирует — это и есть
   «глобус светится», о котором просил Данил. */
.hf-globe__glow{
  position:absolute;left:50%;top:50%;width:calc(var(--hf-ball) * 2.1);height:calc(var(--hf-ball) * 2.1);
  margin:calc(var(--hf-ball) * -1.05) 0 0 calc(var(--hf-ball) * -1.05);
  border-radius:50%;
  background:radial-gradient(circle,rgba(30,79,163,.20) 0%,rgba(30,79,163,.07) 46%,rgba(30,79,163,0) 70%);
  animation:hfGlowPulse 2.6s ease-in-out infinite alternate;
}
@keyframes hfGlowPulse{from{transform:scale(.93);opacity:.7;}to{transform:scale(1.05);opacity:1;}}

/* Планета — эмодзи, кадры меняет JS (🌍 → 🌎 → 🌏). Рисовать шар градиентами
   пробовали в v2: на синем круге материки читались как блики, а «вращение»
   сдвигом фона выглядело как ползущая текстура. Три эмодзи-кадра дают понятное
   вращение и живут в одной стилистике с экипажем. */
.hf-globe__ball{
  position:absolute;left:50%;top:50%;width:var(--hf-ball);height:var(--hf-ball);
  margin:calc(var(--hf-ball) / -2) 0 0 calc(var(--hf-ball) / -2);
  display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--hf-ball) * .86);line-height:1;
  filter:drop-shadow(0 8px 18px rgba(18,33,59,.28));
  animation:hfBallBob 3.2s ease-in-out infinite alternate;
}
@keyframes hfBallBob{from{transform:translateY(-3px) rotate(-2deg);}to{transform:translateY(3px) rotate(2deg);}}

/* --- Машина с экипажем -------------------------------------------------------
   Орбита крутится, машина стоит в её верхней точке и потому объезжает планету.
   Собственный поворот — по КАСАТЕЛЬНОЙ (нос вперёд, не «боком»), плюс зеркало:
   эмодзи 🚗 смотрит влево, а едем мы вправо. Тряска — отдельным слоем, иначе
   она подралась бы с поворотом. */
.hf-globe__orbit{
  position:absolute;left:50%;top:50%;width:0;height:0;
  animation:hfOrbit 5.2s linear infinite;
}
@keyframes hfOrbit{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.hf-globe__orbit.is-drive{animation:none;transform:rotate(var(--drive,0deg));transition:transform .34s cubic-bezier(.35,.1,.25,1);}

.hf-globe__car{
  position:absolute;left:0;top:calc(var(--hf-orbit) * -1);z-index:5;   /* поверх карточек: экипаж — главный герой сцены */
  transform:translate(-50%,-50%);
  display:flex;align-items:flex-end;gap:0;
  font-size:var(--fs-15);line-height:1;white-space:nowrap;
  filter:drop-shadow(0 3px 5px rgba(18,33,59,.3));
}
.hf-globe__car-in{display:flex;align-items:flex-end;animation:hfBump .22s linear infinite;}
@keyframes hfBump{
  0%{transform:translateY(0) rotate(0deg);}
  25%{transform:translateY(-1.5px) rotate(-1.5deg);}
  50%{transform:translateY(.5px) rotate(0deg);}
  75%{transform:translateY(-1px) rotate(1.5deg);}
  100%{transform:translateY(0) rotate(0deg);}
}
.hf-globe__auto{font-size:26px;transform:scaleX(-1);}   /* 🚗 смотрит влево, едем вправо */
.hf-globe__crew{font-size:15px;margin:0 -3px 6px;animation:hfCrewBob .42s ease-in-out infinite alternate;}
.hf-globe__crew--b{animation-delay:.21s;}
@keyframes hfCrewBob{from{transform:translateY(0);}to{transform:translateY(-2.5px);}}
/* Пыль из-под колёс — короткие штрихи, только пока машина едет. */
.hf-globe__dust{position:absolute;right:-6px;bottom:0;font-size:11px;opacity:.55;animation:hfDust .5s linear infinite;}
@keyframes hfDust{0%{opacity:.5;transform:translateX(0) scale(.8);}100%{opacity:0;transform:translateX(9px) scale(1.25);}}

/* --- Карточки отелей на орбите ------------------------------------------------ */
.hf-globe__pin{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform:rotate(var(--a)) translateY(calc(var(--hf-orbit) * -1));
  transition:transform .45s cubic-bezier(.3,.8,.3,1);
}
.hf-globe__pin-in{
  position:absolute;left:0;top:0;width:var(--hf-pin);height:var(--hf-pin);
  margin:calc(var(--hf-pin) / -2) 0 0 calc(var(--hf-pin) / -2);
  border-radius:10px;
  background:var(--card) center/cover no-repeat;
  border:2px solid #fff;box-shadow:0 4px 12px rgba(18,33,59,.22);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-15);
  transform:rotate(calc(var(--a) * -1));             /* карточка смотрит на человека */
  transition:transform .6s cubic-bezier(.22,.9,.28,1),opacity .4s ease,box-shadow .3s ease,border-color .3s ease;
}
/* Прилёт со своего места в списке: JS считает смещение и масштаб настоящей
   карточки, здесь только стартовое состояние. */
.hf-globe__pin.is-flying .hf-globe__pin-in{
  transform:translate(var(--dx),var(--dy)) scale(var(--s)) rotate(calc(var(--a) * -1));
  opacity:.7;
}
/* Подъехали проверять — карточка чуть подаётся вперёд. */
.hf-globe__pin.is-checking .hf-globe__pin-in{
  transform:scale(1.14) rotate(calc(var(--a) * -1));
  box-shadow:0 8px 20px rgba(18,33,59,.3);
}
.hf-globe__pin.is-ok .hf-globe__pin-in{border-color:var(--green);animation:hfPinOk .85s ease;}
.hf-globe__pin.is-no .hf-globe__pin-in{border-color:var(--danger);filter:grayscale(.45);}
/* Зелёный вздрог — тот же, что у свободного номера на детальной (hdFreePulse). */
@keyframes hfPinOk{
  0%{box-shadow:0 0 0 0 rgba(22,163,74,.5);}
  18%{transform:translateX(-3px) rotate(calc(var(--a) * -1));}
  36%{transform:translateX(3px) rotate(calc(var(--a) * -1));}
  54%{transform:translateX(-2px) rotate(calc(var(--a) * -1));}
  100%{box-shadow:0 0 0 16px rgba(22,163,74,0);}
}
/* Вердикт-значок поверх карточки. */
.hf-globe__mark{
  /* 18px, а не 22: на живой проверке крупный значок закрывал собой фото отеля,
     ради которого карточку и показывают. */
  position:absolute;left:50%;top:50%;font-size:18px;line-height:1;
  transform:translate(-50%,-50%);
  animation:hfMarkPop .34s cubic-bezier(.2,.9,.3,1.5);
  filter:drop-shadow(0 2px 3px rgba(18,33,59,.35));
}
@keyframes hfMarkPop{
  0%{transform:translate(-50%,-50%) scale(.4) rotate(-16deg);opacity:0;}
  60%{transform:translate(-50%,-50%) scale(1.25) rotate(6deg);opacity:1;}
  100%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1;}
}

/* --- Летящая карточка (вне орбиты) ------------------------------------------
   Пока карточка летит в зону, она живёт отдельным слоем поверх всего: так её
   путь не зависит от вращения орбиты. */
.hf-globe__flyer{
  position:fixed;z-index:6;width:var(--hf-pin);height:var(--hf-pin);
  border-radius:10px;background:var(--card) center/cover no-repeat;
  border:2px solid #fff;box-shadow:0 6px 16px rgba(18,33,59,.25);
  transition:transform .72s cubic-bezier(.2,.9,.25,1),opacity .72s ease;
  pointer-events:none;
}
/* Одобренный уходит зелёной кометой — свечение видно и на светлом фоне. */
.hf-globe__flyer--ok{border-color:var(--green);box-shadow:0 0 22px rgba(22,163,74,.65),0 0 44px rgba(22,163,74,.28);}
.hf-globe__flyer--no{border-color:var(--danger);box-shadow:0 6px 16px rgba(229,72,77,.35);}
/* Зоны принимают карточку заметно, иначе прилёт читается как «картинка просто
   исчезла где-то сбоку». */
.hf-globe__keep.is-hit{animation:hfZoneHit .38s ease;}
@keyframes hfZoneHit{
  0%{box-shadow:0 0 0 0 rgba(30,142,90,.45);}
  55%{box-shadow:0 0 0 12px rgba(30,142,90,0);}
  100%{box-shadow:0 0 0 0 rgba(30,142,90,0);}
}

/* --- Зона «подходят»: сетка, как на странице ---------------------------------- */
.hf-globe__keep{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:86px;padding:var(--sp-2) 6px;
  border-radius:0 var(--r-m) var(--r-m) 0;
  background:linear-gradient(90deg,rgba(30,142,90,.16),rgba(30,142,90,.05));
  border:1px solid rgba(30,142,90,.25);border-left:none;
}
.hf-globe__zone-cap{display:block;font-size:var(--fs-11);font-weight:700;color:var(--green);text-align:center;margin-bottom:5px;}
.hf-globe__grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.hf-globe__cell{
  aspect-ratio:1/1;border-radius:6px;background:var(--card) center/cover no-repeat;
  border:1px solid rgba(30,142,90,.35);
  animation:hfCellIn .34s cubic-bezier(.2,.9,.3,1.4);
}
/* Пустые места сетки. Без них зона «Подходят» в начале — просто пустая плашка,
   и непонятно, что это будущая выдача. С пунктирными ячейками сразу читается
   схема страницы, которая заполняется на глазах. */
.hf-globe__cell--empty{
  background:rgba(255,255,255,.35);border-style:dashed;border-color:rgba(30,142,90,.3);
  animation:none;
}
@keyframes hfCellIn{0%{transform:scale(.4);opacity:0;}100%{transform:scale(1);opacity:1;}}

/* --- Зона «не подходят»: мусорка ---------------------------------------------- */
.hf-globe__bin{
  position:absolute;right:6px;bottom:var(--sp-4);
  width:64px;padding:6px 4px;text-align:center;
  border-radius:var(--r-m);
  background:linear-gradient(180deg,rgba(229,72,77,.12),rgba(229,72,77,.05));
  border:1px solid rgba(229,72,77,.28);
}
.hf-globe__bin-ico{display:block;font-size:26px;line-height:1;}
.hf-globe__bin-cap{display:block;font-size:var(--fs-11);font-weight:700;color:var(--danger);margin-top:2px;}
.hf-globe__bin.is-hit .hf-globe__bin-ico{animation:hfBinHit .34s ease;}
@keyframes hfBinHit{0%{transform:scale(1) rotate(0);}40%{transform:scale(1.18) rotate(-9deg);}100%{transform:scale(1) rotate(0);}}

/* --- Финальные жесты: один в один с детальной (hdGesturePop) ------------------- */
.hf-globe__cheer{position:absolute;left:50%;top:50%;width:0;height:0;z-index:4;}
.hf-globe__gesture{
  position:absolute;left:50%;top:50%;font-size:34px;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;}
}
/* Финал: планета светится зелёным и вздрагивает — приём hdFreePulse с детальной. */
.hf-globe.is-done .hf-globe__glow{
  background:radial-gradient(circle,rgba(22,163,74,.34) 0%,rgba(22,163,74,.12) 46%,rgba(22,163,74,0) 72%);
  animation:hfGlowWin .9s ease;
}
@keyframes hfGlowWin{0%{transform:scale(.8);opacity:.5;}55%{transform:scale(1.18);opacity:1;}100%{transform:scale(1.06);opacity:1;}}
.hf-globe.is-done .hf-globe__ball{animation:hfBallWin .85s ease;}
@keyframes hfBallWin{
  0%{transform:scale(1);}
  18%{transform:translateX(-4px) scale(1.06);}
  36%{transform:translateX(4px) scale(1.06);}
  54%{transform:translateX(-3px) scale(1.04);}
  100%{transform:translateX(0) scale(1);}
}

/* --- Подпись и прогресс -------------------------------------------------------- */
.hf-globe__txt{width:min(440px,88vw);text-align:center;}
.hf-globe__cap{
  display:block;font-size:var(--fs-15);font-weight:700;color:var(--ink);
  min-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation:hfCapIn .3s ease;
}
@keyframes hfCapIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.hf-globe__sub{display:block;margin-top:3px;font-size:var(--fs-12);color:var(--muted);}
.hf-globe__bar{display:block;height:5px;margin-top:var(--sp-3);border-radius:var(--r-pill);background:var(--line-2);overflow:hidden;}
.hf-globe__fill{
  display:block;height:100%;width:4%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--blue),#4C8DF6);
  transition:width .32s linear;
}
.hf-globe.is-done .hf-globe__fill{background:linear-gradient(90deg,#16A34A,#4ADE80);}
.hf-globe.is-done .hf-globe__cap{color:var(--green);}

/* Десктоп — та же сцена крупнее. Мобильный размер базовый (канон mobile-first). */
@media (min-width:768px){
  .hf-globe__scene{--hf-ball:150px;--hf-orbit:132px;--hf-pin:52px;min-height:380px;}
  .hf-globe__keep{width:118px;}
  .hf-globe__bin{width:84px;}
  .hf-globe__auto{font-size:32px;}
  .hf-globe__crew{font-size:18px;}
}

/* =============================================================================
   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);}

/* Карточки, которые не подошли, уезжают плавно — работает в lite/reduce, где
   заставки нет и список виден. В full список закрыт сценой, и платить за
   невидимую анимацию незачем. */
.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__ball,.hf-globe__orbit,.hf-globe__car-in,.hf-globe__crew,
  .hf-globe__glow,.hf-globe__dust,.hf-globe__cell,.hf-globe__gesture,
  .hf-globe__mark{animation:none;}
  .hf-globe__pin,.hf-globe__pin-in,.hf-globe__fill,.hf-globe__flyer{transition:none;}
  .hf-globe,.hf-globe.is-out{transition:none;}
}