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

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

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

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

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

/* Плавный переход радиуса кольца и масштаба планеты между фазами. Без
   @property переменные в transform меняются скачком — сцена соберётся
   правильно, но без плавности (осознанный фолбэк для старых браузеров). */
@property --hf-r  { syntax:'<length>'; inherits:true; initial-value:150px; }
@property --hf-k  { syntax:'<number>'; inherits:true; initial-value:.2; }
@property --hf-ty { syntax:'<length>'; inherits:true; initial-value:0px; }

/* =============================================================================
   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;
  --hf-cap:230px;                    /* сколько планеты видно над нижним краем */
  --hf-big:620px;                    /* радиус планеты в фазе полёта */
  --hf-spot:46px;                    /* размер карточки отеля */
  --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),
             --hf-r 1.05s cubic-bezier(.22,1,.36,1),
             --hf-k 1.05s cubic-bezier(.22,1,.36,1),
             --hf-ty 1.05s cubic-bezier(.22,1,.36,1);
}

.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%;overflow:hidden;
  transform:scale(var(--hf-k));
  transition:transform 1.05s cubic-bezier(.22,1,.36,1);
  background:
    radial-gradient(circle at 34% 26%,#6FA8FF 0%,#2E6BD6 34%,#17408F 72%,#0D2A62 100%);
  box-shadow:0 30px 80px rgba(13,42,98,.28);
}
/* Материки и океанский блик крутятся вместе с кольцом — один период, один старт. */
.hf-globe__land{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(ellipse 30% 16% at 24% 30%,rgba(122,214,160,.95) 0%,rgba(122,214,160,.9) 62%,rgba(122,214,160,0) 100%),
    radial-gradient(ellipse 18% 24% at 58% 62%,rgba(122,214,160,.9) 0%,rgba(122,214,160,.85) 62%,rgba(122,214,160,0) 100%),
    radial-gradient(ellipse 24% 12% at 78% 34%,rgba(122,214,160,.92) 0%,rgba(122,214,160,.86) 62%,rgba(122,214,160,0) 100%),
    radial-gradient(ellipse 14% 10% at 44% 80%,rgba(122,214,160,.85) 0%,rgba(122,214,160,.8) 62%,rgba(122,214,160,0) 100%);
  opacity:.95;
}
/* Мягкие облака — второй слой, чуть быстрее материков: даёт глубину. */
.hf-globe__clouds{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(ellipse 26% 9% at 40% 22%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 20% 7% at 70% 52%,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 16% 6% at 22% 66%,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 70%);
  filter:blur(1.5px);
}
/* Свет и терминатор. */
.hf-globe__shade{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 42%),
    radial-gradient(circle at 76% 82%,rgba(4,18,46,.5) 0%,rgba(4,18,46,0) 55%);
}
/* Атмосфера — тонкий светящийся ободок над кромкой. */
.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-globe__ring{position:absolute;left:50%;top:50%;width:0;height:0;}
.hf-globe.is-cruise .hf-globe__ring{animation:hfSpin var(--hf-period,20s) linear infinite;}
.hf-globe.is-cruise .hf-globe__land{animation:hfSpin var(--hf-period,20s) linear infinite;}
.hf-globe.is-cruise .hf-globe__clouds{animation:hfSpin calc(var(--hf-period,20s) * .78) linear infinite;}
@keyframes hfSpin{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}

/* Дорога по поверхности: пунктир бежит вместе с кольцом. */
.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;transition:opacity .5s ease .35s;
}
.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__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__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;
}
.hf-globe__cap{
  display:block;font-size:var(--fs-20);font-weight:700;letter-spacing:-.01em;color:var(--ink);
  min-height:26px;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){
  .hf-globe{--hf-cap:320px;--hf-big:860px;--hf-spot:62px;}
  .hf-globe__auto{font-size:38px;}
  .hf-globe__crew{font-size:21px;}
  .hf-globe__cap{font-size:var(--fs-24);}
}

/* =============================================================================
   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__land,.hf-globe__clouds,.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;}
}