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

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

   Зоны «Подходят»/«Мимо» и полёты к краям экрана из версии 3 убраны — по
   прямому решению Данила. Карточка теперь исчезает на месте.

   ХАРАКТЕР
   Планета нарисована, а не эмодзи: при зуме до полутора тысяч пикселей
   системный эмодзи мылится (Apple Color Emoji растровый), а градиент с
   атмосферным ободком остаётся чистым на любом экране. Персонажи — эмодзи,
   они маленькие и держат нужную интонацию.

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

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

/* =============================================================================
   1. ЗАСТАВКА
   ============================================================================= */
.hf-globe{
  position:fixed;inset:0;z-index:85;
  display:none;overflow:hidden;
  background:linear-gradient(180deg,#F9FAFC 0%,#F4F6FA 58%,#EDF1F8 100%);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:var(--font);color:var(--ink);
  opacity:0;transition:opacity .28s ease;
  /* Радиус подобран по ширине кадра, а не «на глаз»: видимая дуга равна
     asin(полуширина / радиус ленты). При прежних 620px на телефоне в кадр
     попадали две-три карточки, лента читалась пунктиром. 480 даёт ±21°, то
     есть пять-шесть отелей одновременно при шаге 9°. */
  /* Планета теперь эмодзи, а эмодзи растровый: чем крупнее кегль, тем заметнее
     он разваливается на квадраты (на 1233px это было видно невооружённым
     глазом). Поэтому радиус уменьшен — шар остаётся горизонтом, но глиф
     рисуется вдвое мельче и держится куда чище. Видимая дуга при этом даже
     выросла: asin(187/374) ≈ 30°, то есть в кадре помещается больше отелей. */
  --hf-cap:165px;                    /* сколько планеты видно над нижним краем */
  --hf-big:340px;                    /* радиус планеты в фазе полёта */
  --hf-spot:44px;                    /* размер карточки отеля */
  --hf-r:150px;                      /* текущий радиус кольца карточек */
  --hf-k:.2;                         /* текущий масштаб планеты */
  --hf-ty:0px;                       /* смещение центра планеты вниз */
}
.hf-globe.is-on{display:block;opacity:1;}
.hf-globe.is-out{opacity:0;}

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

/* --- Мир: планета, кольцо карточек, машина ----------------------------------- */
.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 на одном элементе нельзя, animation просто перепишет
   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);
}
/* Глиф эмодзи занимает примерно 0.86 от кегля и сидит не по центру строки, а
   по своим метрикам — поэтому кегль берём с запасом (2.32 радиуса, чтобы шар
   вышел ровно в диаметр), бокс делаем размером с планету, а остаток по
   вертикали снимаем сдвигом. Без этого «планета» уезжала вниз, и карточки
   стояли на пустом месте выше её кромки. */
.hf-globe__emoji{
  display:flex;align-items:center;justify-content:center;
  width:calc(var(--hf-big) * 2);height:calc(var(--hf-big) * 2);
  font-size:calc(var(--hf-big) * 2.32);line-height:1;
  filter:drop-shadow(0 26px 60px rgba(13,42,98,.3));
  transform-origin:50% 50%;
}
/* Планета поворачивается ШАГАМИ, вместе с лентой: один шаг — один отель под
   машиной. Непрерывная CSS-анимация здесь была источником всех «то проехал, то
   не проехал»: фазу нельзя ни остановить, ни подогнать под момент, когда
   пришёл ответ. Теперь угол задаёт JS (--hf-spin), и поверхность с тем, что на
   ней стоит, движется одним и тем же значением. */
.hf-globe__emoji{
  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-r) * 2);height:calc(var(--hf-r) * 2);
  margin:calc(var(--hf-r) * -1) 0 0 calc(var(--hf-r) * -1);
  border-radius:50%;
  border:2px dashed rgba(255,255,255,.55);
  opacity:0;
  /* width/height и отрицательные margin считаются от --hf-r: переход по ним и
     даёт плавное «разворачивание» дороги вместе с ростом планеты. */
  transition:opacity .5s ease .35s,
             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 .4s ease,box-shadow .35s ease,filter .35s 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-gone .hf-globe__card{
  transform:translateY(-16px) scale(.35);
  opacity:0;filter:blur(2px);
}
.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(.5);}

/* Тень под карточкой: без неё отель «висит» над грунтом, а не стоит на нём. */
.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__deco{
  position:absolute;left:0;top:0;width:0;height:0;
  transform:rotate(var(--a)) translateY(calc(var(--hf-r) * -1));
  font-size:17px;line-height:1;pointer-events:none;opacity:.85;
}
.hf-globe__deco span{position:absolute;left:-9px;top:-16px;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;}
}

/* Штамп поверх карточки. */
.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%,-50%) translateY(calc((var(--hf-r) + 16px) * -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{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);}
}
.hf-globe__auto{font-size:30px;transform:scaleX(-1);}
.hf-globe__crew{font-size:17px;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);}}
.hf-globe__dust{position:absolute;right:-10px;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.is-idle .hf-globe__rig-in{animation-play-state:paused;}
.hf-globe.is-idle .hf-globe__dust{opacity:0;}

/* Пока ответа нет — над машиной лупа: мы смотрим, но вердикта ещё нет. */
.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);}}

/* --- Финал: жесты и зелёное свечение (приём с детальной, один в один) --------- */
.hf-globe__cheer{position:absolute;left:50%;top:38%;width:0;height:0;z-index:6;}
.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: подпись и прогресс -------------------------------------------------- */
.hf-globe__hud{
  position:absolute;left:50%;top:clamp(56px,16vh,140px);transform:translateX(-50%);
  width:min(460px,88vw);text-align:center;z-index:5;
}
/* Кегль на телефоне меньше заявленного в первой сборке: при 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;
  animation:hfCapIn .34s cubic-bezier(.22,1,.36,1);
}
@keyframes hfCapIn{from{opacity:0;transform:translateY(6px);}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,.10);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){
  /* На широком экране дуга видна далеко в обе стороны, поэтому планету можно
     сделать крупнее: при 760px в кадре помещается десяток отелей, и лента
     читается как настоящая дорога, а не как три карточки у машины. */
  .hf-globe{--hf-cap:235px;--hf-big:520px;--hf-spot:58px;}
  .hf-globe__auto{font-size:38px;}
  .hf-globe__crew{font-size:21px;}
  .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;}
}

/* =============================================================================
   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__crew,.hf-globe__dust,.hf-globe__look,.hf-globe__gesture,
  .hf-globe__stamp,.hf-globe__atmo{animation:none !important;}
  .hf-globe__world,.hf-globe__planet,.hf-globe__spot,.hf-globe__card,
  .hf-globe__rig,.hf-globe__fill,.hf-globe__atmo{transition:none !important;}
  .hf-globe,.hf-globe.is-out{transition:none;}
}