/* tour.css — интерактивный онбординг: синтетический «AI-курсор», спотлайт-подсветка, callout-пузырь.
   Всё рисуется поверх дека (фиксированные слои, pointer-events:none — не перехватывают клики пользователя).
   Тема наследуется через --accent/--panel/--txt/--line дека (работает во всех скинах walbi/midnight/neon/bloomberg). */

/* ── синтетический курсор ─────────────────────────────────────────────────── */
#tour-cursor {
  position: fixed; left: 0; top: 0; z-index: 3000; width: 30px; height: 30px;
  pointer-events: none; will-change: transform; opacity: 0;
  transition: opacity .25s ease; transform: translate(50vw, 50vh);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.55));
}
#tour-cursor.on { opacity: 1; }
#tour-cursor svg { width: 100%; height: 100%; display: block; }
#tour-cursor .tc-arrow { fill: #fff; stroke: color-mix(in srgb, var(--accent) 75%, #000); stroke-width: 1.4; }
/* мягкое «дыхание» вокруг курсора, пока агент активен — читается как «живой ИИ-указатель» */
#tour-cursor::before {
  content: ""; position: absolute; left: -9px; top: -9px; width: 48px; height: 48px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent) 0%, transparent 68%);
  opacity: .0; transition: opacity .25s; animation: tcHalo 1.6s ease-in-out infinite; z-index: -1;
}
#tour-cursor.on::before { opacity: .9; }
@keyframes tcHalo { 0%,100% { transform: scale(.7); opacity: .35; } 50% { transform: scale(1.05); opacity: .9; } }
/* короткое нажатие — курсор «вдавливается» */
#tour-cursor.press { transform: translate(var(--tx), var(--ty)) scale(.82); }

/* ярлычок «AI» у острия — чтобы пользователь понимал, что курсор ведёт ассистент */
#tour-cursor .tc-tag {
  position: absolute; left: 22px; top: 20px; font: 700 9px/1 "Inter", system-ui, sans-serif;
  letter-spacing: .08em; color: #fff; background: var(--accent); padding: 2px 5px; border-radius: 5px;
  text-transform: uppercase; box-shadow: 0 2px 8px rgba(0,0,0,.4); white-space: nowrap;
}

/* жест «думаю» — три точки у острия курсора (показываются классом .thinking) */
#tour-cursor .tc-think { position: absolute; left: 27px; top: -7px; display: none; gap: 3px; padding: 3px 5px; border-radius: 9px;
  background: color-mix(in srgb, var(--panel) 90%, black); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
#tour-cursor.thinking .tc-think { display: flex; }
#tour-cursor .tc-think i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .4; animation: tcThink 1s ease-in-out infinite; }
#tour-cursor .tc-think i:nth-child(2) { animation-delay: .16s; }
#tour-cursor .tc-think i:nth-child(3) { animation-delay: .32s; }
@keyframes tcThink { 0%,100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-3px); opacity: 1; } }

/* ховер: элемент под AI-курсором реагирует как при наведении мыши */
.tour-hover { filter: brightness(1.16) saturate(1.05) !important; transition: filter .15s ease; }

/* ── клик-рябь ────────────────────────────────────────────────────────────── */
.tour-ripple {
  position: fixed; z-index: 2980; pointer-events: none; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; border: 2px solid var(--accent); opacity: .9; animation: tcRipple .55s ease-out forwards;
}
@keyframes tcRipple { from { transform: scale(.4); opacity: .9; } to { transform: scale(3.6); opacity: 0; } }

/* ── спотлайт-кольцо вокруг цели ──────────────────────────────────────────── */
/* приём со «9999px box-shadow»: само кольцо рисует рамку, а его огромная тень затемняет ВСЁ остальное,
   оставляя «дырку» точно над целью. dim добавляется классом — без него только рамка-подсветка. */
#tour-ring {
  position: fixed; z-index: 2900; pointer-events: none; border-radius: 12px; opacity: 0;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: left .42s cubic-bezier(.22,.61,.36,1), top .42s cubic-bezier(.22,.61,.36,1),
              width .42s cubic-bezier(.22,.61,.36,1), height .42s cubic-bezier(.22,.61,.36,1),
              opacity .25s ease, box-shadow .3s ease;
}
#tour-ring.on { opacity: 1; }
#tour-ring.dim {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent),
              0 0 22px color-mix(in srgb, var(--accent) 60%, transparent),
              0 0 0 9999px rgba(0,0,0,.42);   /* мягкая вуаль (раньше было ~.72 — слишком темно) */
}

/* ── callout-пузырь с объяснением ─────────────────────────────────────────── */
#tour-callout {
  position: fixed; z-index: 3001; pointer-events: none; max-width: 300px; min-width: 180px;
  background: color-mix(in srgb, var(--panel) 96%, black);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 14px;
  padding: 12px 14px; box-shadow: 0 16px 50px rgba(0,0,0,.55); color: var(--txt);
  opacity: 0; transform: translateY(6px) scale(.98); transition: opacity .22s ease, transform .22s ease;
}
#tour-callout.on { opacity: 1; transform: none; }
#tour-callout .tco-step { font: 700 10px/1 "Inter", system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; }
#tour-callout .tco-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
#tour-callout .tco-body { font-size: 13px; line-height: 1.45; color: color-mix(in srgb, var(--txt) 88%, var(--dim)); }
/* маленький «клювик» пузыря — направление задаётся data-arrow */
#tour-callout::after {
  content: ""; position: absolute; width: 12px; height: 12px; background: inherit;
  border: inherit; border-right: none; border-bottom: none; transform: rotate(45deg);
}
#tour-callout[data-arrow="up"]::after    { top: -7px; left: var(--arrow-x, 24px); }
#tour-callout[data-arrow="down"]::after  { bottom: -7px; left: var(--arrow-x, 24px); transform: rotate(225deg); }
#tour-callout[data-arrow="left"]::after  { left: -7px; top: var(--arrow-y, 24px); transform: rotate(315deg); }
#tour-callout[data-arrow="right"]::after { right: -7px; top: var(--arrow-y, 24px); transform: rotate(135deg); }

/* ── первичный нудж «Показать платформу?» ─────────────────────────────────── */
#tour-nudge {
  position: fixed; right: 22px; bottom: 90px; z-index: 160; max-width: 280px;
  background: color-mix(in srgb, var(--panel) 96%, black);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); border-radius: 16px;
  padding: 14px 16px; box-shadow: 0 18px 50px rgba(0,0,0,.5); color: var(--txt);
  opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease;
}
#tour-nudge.on { opacity: 1; transform: none; }
#tour-nudge .tn-t { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
#tour-nudge .tn-s { font-size: 12px; color: var(--dim); margin-bottom: 11px; line-height: 1.4; }
#tour-nudge .tn-row { display: flex; gap: 8px; }
#tour-nudge button { flex: 1; border-radius: 9px; padding: 9px 10px; font: 600 12px/1 inherit; cursor: pointer; border: 1px solid var(--line); background: var(--panel2); color: var(--txt); }
#tour-nudge button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
#tour-nudge button.primary:hover { filter: brightness(1.08); }
#tour-nudge button.ghost:hover { color: var(--txt); border-color: var(--accent); }

/* ── кнопка «Пропустить» прямо на туре (снизу по центру, не мешает рации-орбу справа) ── */
/* левый-нижний угол: не пересекается с субтитрами (низ по центру) и рацией-орбом (низ справа) */
#tour-skip {
  position: fixed; left: 18px; bottom: 18px; transform: translateY(8px); z-index: 3002;
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
  font: 600 12px/1 "Inter", system-ui, sans-serif; color: var(--txt);
  background: color-mix(in srgb, var(--panel) 92%, black);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 999px; padding: 9px 16px; cursor: pointer; box-shadow: 0 8px 30px rgba(0,0,0,.45);
}
#tour-skip.on { opacity: .95; pointer-events: auto; transform: none; }
#tour-skip:hover { border-color: var(--accent); filter: brightness(1.08); }

/* ── прогресс-«созвездие»: точка загорается на каждый пройденный шаг (под верхним баром, по центру) ── */
#tour-dots {
  position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 3002;
  display: flex; gap: 7px; align-items: center; padding: 6px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 82%, transparent); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
#tour-dots.on { opacity: .92; }
#tour-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  opacity: 0; transform: scale(.35); transition: opacity .35s ease, transform .4s cubic-bezier(.22,.61,.36,1);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent);
}
#tour-dots i.on { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  #tour-cursor::before { animation: none; }
  #tour-cursor .tc-think i { animation: none; opacity: .8; }
  #tour-ring { transition: opacity .2s ease; }
  .tour-ripple { animation-duration: .3s; }
}
@media (max-width: 820px) {
  #tour-callout { max-width: 76vw; }
  #tour-nudge { right: 12px; left: 12px; max-width: none; bottom: 84px; }
}