/* Вводное обучение с маскотом. Один слой поверх страницы: затемнение,
   «окно» вокруг подсвеченного элемента, маскот и облако с текстом.

   Тёмная тема отдельными правилами не нужна: облако намеренно светлое в
   обеих темах — как подсказка активности, — иначе на светлом экране оно
   спорило бы с карточками, а на тёмном терялось. */

.hd-ob{
  position:fixed;
  inset:0;
  z-index:100000;
  animation:hd-ob-in .22s ease both;
  /* Слой во весь экран не должен ловить клики сам по себе: без этого он
     перехватывал ВСЁ, даже когда перехватчик .hd-ob-blocker выключен, и
     в демо не нажимались ни «Резюме», ни подсказка ИИ. Клики принимают
     только те части, которым это нужно, — см. .hd-ob-dock ниже. */
  pointer-events:none;
}
.hd-ob.is-closing{ animation:hd-ob-out .18s ease both; }

@keyframes hd-ob-in{ from{opacity:0} to{opacity:1} }
@keyframes hd-ob-out{ from{opacity:1} to{opacity:0} }

/* Перехватывает клики мимо подсветки: во время обучения интерфейс
   смотрят, а не нажимают. */
.hd-ob-blocker{
  position:absolute;
  inset:0;
  cursor:default;
  pointer-events:auto;
}

/* Само затемнение — гигантская тень вокруг «окна». Так не нужно четыре
   отдельных блока по краям, и подсветка плавно едет одним элементом. */
.hd-ob-hole{
  position:fixed;
  border-radius:12px;
  box-shadow:0 0 0 9999px rgba(15,23,42,.72);
  outline:2px solid rgba(129,140,248,.9);
  outline-offset:0;
  pointer-events:none;
  transition:top .28s cubic-bezier(.4,0,.2,1),
             left .28s cubic-bezier(.4,0,.2,1),
             width .28s cubic-bezier(.4,0,.2,1),
             height .28s cubic-bezier(.4,0,.2,1);
}

/* Маскот и облако едут вместе. */
.hd-ob-dock{
  position:fixed;
  pointer-events:auto;   /* кнопки «Далее», «Назад», «Пропустить» */
  display:flex;
  align-items:flex-end;
  gap:6px;
  max-width:400px;
  transition:top .28s cubic-bezier(.4,0,.2,1), left .28s cubic-bezier(.4,0,.2,1);
}
/* Порядок: маскот всегда с той стороны дока, где стоит цель — иначе
   между ним и элементом оказалось бы облако. */
.hd-ob-dock.is-left{ flex-direction:row-reverse; }
/* Зеркало — отдельно от порядка: указывающая рука нарисована справа от
   тела, поэтому отражаем маскота, когда цель СЛЕВА от него. */
.hd-ob-dock.is-mirrored .hd-ob-mascot{ transform:scaleX(-1); }

.hd-ob-mascot{
  width:104px;
  flex:none;
  /* Скорость покачивания подобрана не на глаз.
     Firefox рисует маскота только в ЦЕЛЫХ пикселях, поэтому важно не
     время анимации само по себе, а сколько пикселей в секунду проходит
     ход. Было 6px за 1.7s — это 3.5 px/с, то есть 3–4 видимых скачка в
     секунду: ровно то, что выглядело как «2 кадра в секунду», при том
     что страница честно рисовала 240 к/с и анимация тикала 240 раз в
     секунду. Chrome и Яндекс двигают слой с долями пикселя и потому
     были гладкими.
     Проверено сравнением четырёх вариантов в Firefox: 3.5 px/с —
     рывками, ~13 px/с — гладко, независимо от will-change. Здесь
     10px за 0.75s = 13.3 px/с. Замедлять или уменьшать ход нельзя, не
     проверив снова: ниже ~13 px/с рывки возвращаются. */
  animation:hd-ob-float 1.5s ease-in-out infinite;
  will-change:transform;
}
.hd-ob-mascot-svg{ width:100%; height:auto; display:block; overflow:visible; }
.hd-ob-shadow{ fill:rgba(15,23,42,.28); }

@keyframes hd-ob-float{
  0%,100%{ transform:translate3d(0,0,0) }
  50%    { transform:translate3d(0,-10px,0) }
}
.hd-ob-dock.is-mirrored .hd-ob-mascot{ animation:hd-ob-float-mirror 1.5s ease-in-out infinite; }
@keyframes hd-ob-float-mirror{
  0%,100%{ transform:scaleX(-1) translate3d(0,0,0) }
  50%    { transform:scaleX(-1) translate3d(0,-10px,0) }
}

/* Рука поворачивается к цели — угол ставит скрипт. */
.hd-ob-arm-point{
  transform-origin:110px 78px;
  transition:transform .32s cubic-bezier(.34,1.4,.64,1);
}
/* Моргание: глаза сжимаются на мгновение раз в несколько секунд. */
.hd-ob-eyes{
  transform-origin:70px 68px;
  animation:hd-ob-blink 5.2s infinite;
}
@keyframes hd-ob-blink{
  0%,92%,100%{ transform:scaleY(1) }
  95%        { transform:scaleY(.1) }
}

.hd-ob-bubble{
  background:#fff;
  border:1px solid #d8d3f2;
  border-radius:16px;
  padding:14px 16px 12px;
  box-shadow:0 2px 4px rgba(15,23,42,.10), 0 14px 32px rgba(15,23,42,.28);
  min-width:250px;
  max-width:300px;
  margin-bottom:14px;
}

.hd-ob-bubble-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}
.hd-ob-step{
  font-size:10px;
  font-weight:600;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:#8b93a7;
  font-variant-numeric:tabular-nums;
}
.hd-ob-close{
  border:none;
  background:transparent;
  color:#94a3b8;
  cursor:pointer;
  padding:2px;
  line-height:0;
  border-radius:6px;
}
.hd-ob-close svg{ width:14px; height:14px; }
.hd-ob-close:hover{ color:#475569; background:#f1f5f9; }

.hd-ob-title{
  font-size:15px;
  font-weight:700;
  color:#111827;
  margin-bottom:5px;
}
.hd-ob-text{
  font-size:13px;
  line-height:1.55;
  color:#4b5563;
}

.hd-ob-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:13px;
}
.hd-ob-nav{ display:flex; gap:6px; }

.hd-ob-btn{
  border:1px solid #d8d3f2;
  background:#fff;
  color:#4338ca;
  border-radius:9px;
  padding:6px 13px;
  font-size:12.5px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.hd-ob-btn:hover:not(:disabled){ background:#eef2ff; border-color:#a5b4fc; }
.hd-ob-btn:disabled{ color:#c3c7d4; border-color:#e8eaf2; cursor:not-allowed; }
.hd-ob-btn.primary{
  background:linear-gradient(180deg,#6366f1 0%,#4f46e5 100%);
  border-color:transparent;
  color:#fff;
}
.hd-ob-btn.primary:hover{ background:linear-gradient(180deg,#7274f4 0%,#4f46e5 100%); }
.hd-ob-skip{ border-color:transparent; color:#8b93a7; padding-left:4px; }
.hd-ob-skip:hover{ background:#f1f5f9; border-color:transparent; color:#475569; }

/* На узком экране маскот только мешает: облако занимает всю ширину. */
@media (max-width:760px){
  .hd-ob-dock{ max-width:calc(100vw - 32px); }
  .hd-ob-mascot{ width:72px; }
  .hd-ob-bubble{ min-width:0; max-width:none; flex:1; }
}

@media (prefers-reduced-motion: reduce){
  .hd-ob, .hd-ob.is-closing{ animation:none; }
  .hd-ob-mascot, .hd-ob-dock.is-mirrored .hd-ob-mascot{ animation:none; }
  .hd-ob-eyes{ animation:none; }
  .hd-ob-hole, .hd-ob-dock, .hd-ob-arm-point{ transition:none; }
}

/* Пока идёт обучение, резюме нельзя закрыть: следующий шаг рассказывает
   про этот блок, и без него подсвечивать было бы нечего. */
body.hd-ob-running .ai-summary-close{ display:none; }

/* Подсказка ИИ висит в правом нижнем углу и перекрывает карточку
   обращения. На чужих шагах убираем её с глаз, на своём — возвращаем.
   Класс вешается и на <html> — демо-страница прячет карточку ещё до
   старта тура, чтобы она не мигнула раньше времени. */
.hd-ob-hide-suggest #aiSuggestCard{
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}

/* Шаг только показывает элемент: клик по нему открыл бы модалку и
   оборвал бы обучение. Курсор оставляем обычным, чтобы не выглядело
   поломкой. */
.hd-ob-noclick{
  pointer-events:none !important;
  cursor:default !important;
}

/* Атрибут hidden проигрывает нашим display:flex — гасим явно, иначе на
   прощании облако с кнопками остаётся на экране поверх надписи. */
.hd-ob-dock[hidden],
.hd-ob-final[hidden]{ display:none !important; }

/* ── Приветствие и прощание ────────────────────────────────────────
   Не облако с текстом, а крупная надпись поверх затемнения: на этих
   экранах подсвечивать нечего, и карточка выглядела бы как очередной
   шаг. Разметка одна на оба, разные только поза руки и текст. */
.hd-ob.is-splash .hd-ob-hole{ display:none; }
.hd-ob.is-splash::before{
  content:"";
  position:fixed;
  inset:0;
  background:radial-gradient(120% 90% at 50% 45%, rgba(49,46,129,.82) 0%, rgba(15,23,42,.88) 70%);
  animation:hd-ob-in .3s ease both;
}

.hd-ob-final{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:24px;
  text-align:center;
  pointer-events:auto;
  animation:hd-ob-rise .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes hd-ob-rise{
  from{ opacity:0; transform:translateY(14px) }
  to  { opacity:1; transform:translateY(0) }
}

.hd-ob-final-mascot{
  width:172px;
  will-change:transform;
  margin-bottom:6px;
  /* Та же скорость, что и у маскота в доке: медленнее — рывки в Firefox
     (см. комментарий у .hd-ob-mascot). */
  animation:hd-ob-float 1.5s ease-in-out infinite;
  /* Мягкое свечение под маскотом — иначе он «висит» на тёмном фоне. */
  filter:drop-shadow(0 18px 34px rgba(99,102,241,.45));
}
.hd-ob-final-mascot svg{ width:100%; height:auto; display:block; overflow:visible; }

.hd-ob-final-title{
  font-size:clamp(28px, 4vw, 42px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.15;
  /* Градиент по тексту: белый к сиреневому — тот же индиго, что у
     бренда, но читаемый на тёмном. */
  background:linear-gradient(100deg,#ffffff 0%,#e0e7ff 45%,#c7b8ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hd-ob-final-text{
  margin-top:8px;
  font-size:clamp(15px, 1.6vw, 19px);
  font-weight:500;
  color:rgba(226,232,240,.9);
}
.hd-ob-final-note{
  margin-top:14px;
  max-width:34ch;
  font-size:12.5px;
  line-height:1.55;
  color:rgba(199,210,254,.62);
}
/* Светлая таблетка: индиговая кнопка тонула в такой же индиговой
   подложке прощания и на фоне крупной надписи смотрелась мелочью.
   Селекторы с .primary — чтобы перебить базовый вид кнопки. */
.hd-ob-btn.primary.hd-ob-final-btn{
  margin-top:26px;
  padding:14px 44px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.01em;
  border-radius:999px;
  background:linear-gradient(180deg,#ffffff 0%,#eceeff 100%);
  border:1px solid rgba(255,255,255,.85);
  color:#3730a3;
  box-shadow:0 14px 34px rgba(15,23,42,.45), 0 0 0 6px rgba(129,140,248,.14);
  transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s, background .18s;
}
.hd-ob-btn.primary.hd-ob-final-btn:hover{
  background:linear-gradient(180deg,#ffffff 0%,#e2e6ff 100%);
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(15,23,42,.5), 0 0 0 9px rgba(129,140,248,.2);
}
.hd-ob-btn.primary.hd-ob-final-btn:active{ transform:translateY(0); }

/* На приветствии и прощании указка не нужна: показывать не на что, а
   вытянутый палец читается как «тыканье». Меняем руку целиком. */
.hd-ob-arm-wave,
.hd-ob-arm-hip{ display:none; }
.hd-ob.is-splash .hd-ob-arm-point{ display:none; }
.hd-ob.is-intro .hd-ob-arm-hip{ display:block; }
.hd-ob.is-final .hd-ob-arm-wave{
  display:block;
  transform-origin:106px 76px;
  animation:hd-ob-wave 1s ease-in-out infinite;
}
@keyframes hd-ob-wave{
  0%,100%{ transform:rotate(-16deg) }
  50%    { transform:rotate(16deg) }
}

@media (prefers-reduced-motion: reduce){
  .hd-ob.is-splash::before,
  .hd-ob-final,
  .hd-ob-final-mascot{ animation:none; }
  .hd-ob.is-final .hd-ob-arm-wave{ animation:none; }
}