/* EMBER mascot-led guided tour — Ember GLIDES beside each target and POINTS at it.
   Transitions are gated to the `.moving` class (step changes only) so live scroll
   tracking is instant and never chases/jitters. Themed via shared CSS vars. */
:root {
  --bg: #0e1116; --panel: #161b22; --panel2: #1c232d; --line: #2a323d;
  --ink: #e7edf3; --muted: #93a1b0; --brand: #ff7a18; --brand2: #7ec9ff;
}

.ember-tour { position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  --sx: 50%; --sy: 50%; --sw: 0px; --sh: 0px; }
.ember-tour[hidden] { display: none; }

/* Backdrop: four dim panels around the spotlight rect. */
.ember-tour-dim { position: fixed; pointer-events: auto; background: rgba(8, 11, 15, .72); }
.ember-tour-dim.t { left: 0; top: 0; right: 0; height: var(--sy); }
.ember-tour-dim.b { left: 0; right: 0; bottom: 0; top: calc(var(--sy) + var(--sh)); }
.ember-tour-dim.l { left: 0; top: var(--sy); width: var(--sx); height: var(--sh); }
.ember-tour-dim.r { right: 0; top: var(--sy); left: calc(var(--sx) + var(--sw)); height: var(--sh); }

/* Spotlight ring on the target. */
.ember-tour-ring { position: fixed; pointer-events: none; border-radius: 12px;
  left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh);
  box-shadow: 0 0 0 3px var(--brand), 0 10px 40px rgba(255, 122, 24, .28); }
.ember-tour-ring[data-empty="1"] { display: none; }
.ember-tour.moving .ember-tour-ring { transition: left .42s cubic-bezier(.4,0,.2,1), top .42s cubic-bezier(.4,0,.2,1), width .42s ease, height .42s ease; }

/* The Ember guide = figure + pointing beam + speech bubble, moving + DRAGGABLE as
   one unit (drag Ember or the bubble — both move together). */
.ember-tour-guide { position: fixed; pointer-events: auto; z-index: 9001;
  display: flex; align-items: center; gap: 2px; cursor: grab; user-select: none; touch-action: none; }
.ember-tour-guide.dragging { cursor: grabbing; }
.ember-tour.moving .ember-tour-guide:not(.dragging) { transition: left .45s cubic-bezier(.34,1.1,.42,1), top .45s cubic-bezier(.34,1.1,.42,1); }
.ember-tour-guide:focus { outline: none; }
.ember-tour-guide[data-place="right"]  { flex-direction: row; }
.ember-tour-guide[data-place="left"]   { flex-direction: row-reverse; }
.ember-tour-guide[data-place="bottom"] { flex-direction: column; }
.ember-tour-guide[data-place="top"]    { flex-direction: column-reverse; }
.ember-tour-guide[data-place="center"] { flex-direction: column; }

/* Ember figure — alive (gentle bob), drop-shadow halo. */
.ember-tour-figure { flex: none; line-height: 0; animation: ember-bob 2.6s ease-in-out infinite; }
.ember-tour-figure svg { filter: drop-shadow(0 6px 16px rgba(255, 122, 24, .45)); display: block; }
@keyframes ember-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .ember-tour-figure { animation: none; } }

/* Pointing beam (triangle) — sits between Ember and the target, on the target side. */
.ember-tour-beam { flex: none; width: 0; height: 0; order: -1; }
.ember-tour-guide[data-place="center"] .ember-tour-beam { display: none; }
.ember-tour-guide[data-place="right"]  .ember-tour-beam { border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 13px solid var(--brand); animation: ember-pt-x 1s ease-in-out infinite; }
.ember-tour-guide[data-place="left"]   .ember-tour-beam { border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 13px solid var(--brand); animation: ember-pt-x 1s ease-in-out infinite reverse; }
.ember-tour-guide[data-place="bottom"] .ember-tour-beam { border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 13px solid var(--brand); animation: ember-pt-y 1s ease-in-out infinite; }
.ember-tour-guide[data-place="top"]    .ember-tour-beam { border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 13px solid var(--brand); animation: ember-pt-y 1s ease-in-out infinite reverse; }
@keyframes ember-pt-x { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@keyframes ember-pt-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .ember-tour-beam { animation: none !important; } }

/* Speech bubble — sized to its content (no wasted empty space) up to a max. */
.ember-tour-bubble { width: fit-content; min-width: 220px; max-width: min(320px, calc(100vw - 120px));
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px 11px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  font: 15px/1.5 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.ember-tour-title { margin: 0 0 5px; font-size: 15px; font-weight: 700; color: var(--ink); }
.ember-tour-say { margin: 0 0 12px; color: var(--ink); }

.ember-tour-foot { display: flex; align-items: center; gap: 8px; }
.ember-tour-dots { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.ember-tour-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--panel2);
  border: 1px solid var(--line); padding: 0; cursor: pointer; }
.ember-tour-dot[aria-current="step"] { background: var(--brand); border-color: var(--brand); }
.ember-tour-dot:focus-visible { outline: 2px solid var(--brand2); outline-offset: 2px; }
.ember-tour-btn { cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; border-radius: 9px;
  padding: 7px 13px; border: 1px solid var(--line); background: var(--panel2); color: var(--ink); }
.ember-tour-btn:hover { border-color: var(--brand2); }
.ember-tour-btn.primary { background: var(--brand); color: #160a04; border-color: var(--brand); }
.ember-tour-btn.primary:hover { filter: brightness(1.08); }
.ember-tour-btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.ember-tour-btn.ghost:hover { color: var(--ink); border-color: var(--line); }
.ember-tour-btn:focus-visible { outline: 2px solid var(--brand2); outline-offset: 2px; }
.ember-tour-btn:disabled { opacity: .4; cursor: default; }

@media (max-width: 560px) {
  .ember-tour-guide { max-width: calc(100vw - 16px); }
  .ember-tour-bubble { width: calc(100vw - 110px); }
}