/* Guided tour ("See the tutorial"): the coach-mark overlay driven by js/tour.js.
   A dimmed page with a cut-out ring around the highlighted control (or an
   un-dimmed caption over a live brain demo) plus a Back/Next/Skip bubble.
   Sits above every panel (5), banner (50) and modal (60/80). */
#tour-root { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
#tour-root[hidden] { display: none; }
/* On a step change the ring + bubble are placed instantly (no sweep across
   the very control the user must tap); the transition is kept only for the
   gentle follow when the page scrolls/resizes mid-step. */
#tour-root.no-anim .tour-ring, #tour-root.no-anim .tour-bubble { transition: none; }
/* Full-screen click-eater: transparent under a spotlight (the ring's own
   box-shadow does the dimming), a visible dim for a no-target modal step. */
.tour-blocker { position: absolute; inset: 0; pointer-events: auto; background: transparent; transition: opacity 0.3s ease; }
.tour-blocker[hidden] { display: none; }
.tour-blocker.modal { background: rgba(0, 0, 0, 0.55); }
/* Opening beat of each step: the dim + highlight are held invisible for ~1s
   (js/tour.js REVEAL_MS) then faded in, so the scene the step set up reads
   before the overlay lands on it. They stay positioned underneath (just
   transparent), so the fade-in needs no reflow. */
#tour-root.pre-reveal .tour-ring,
#tour-root.pre-reveal .tour-blocker,
#tour-root.pre-reveal .tour-veil { opacity: 0; }
/* The spotlight cut-out: a transparent rounded rect whose huge box-shadow
   dims everything around it, ringed in accent so the target reads clearly. */
.tour-ring {
  position: absolute;
  border-radius: 10px;
  pointer-events: none;
  z-index: 2; /* above the veil (which is appended later in the DOM) */
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
  outline: 2px solid var(--accent-bright);
  outline-offset: 1px;
  /* Flash the ring bright -> semi-bright on a loop so it catches the eye on
     every step (not just interactive ones). Only outline colour/width animate,
     so the dimming box-shadow (and the no-dim variant) are untouched. */
  animation: tour-flash 1.1s ease-in-out infinite;
  transition: left 0.34s cubic-bezier(0.33, 1, 0.68, 1), top 0.34s cubic-bezier(0.33, 1, 0.68, 1), width 0.34s cubic-bezier(0.33, 1, 0.68, 1), height 0.34s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.3s ease;
}
@keyframes tour-flash {
  0%, 100% { outline-color: var(--accent-bright); outline-width: 3px; }
  50% { outline-color: var(--accent); outline-width: 2px; }
}
.tour-ring[hidden] { display: none; }
/* spotlightOnly step: keep the accent ring but drop the dimming box-shadow, so
   a popup the step is explaining stays fully readable behind the highlight. */
.tour-ring.no-dim { box-shadow: none; }
/* Interactive step: the blocker gets a click-through hole over this ring, so
   the user's real tap reaches the control. Pulse the outline offset to invite
   the tap, on top of the shared bright/semi-bright flash. */
.tour-ring.interactive { animation: tour-flash 1.1s ease-in-out infinite, tour-pulse 1.4s ease-in-out infinite; }
@keyframes tour-pulse {
  0%, 100% { outline-offset: 1px; }
  50% { outline-offset: 4px; }
}
.tour-bubble {
  position: absolute;
  pointer-events: auto;
  z-index: 3; /* always on top: never dimmed by a veil or the spotlight ring */
  width: min(320px, calc(100vw - 24px));
  padding: 14px 16px 12px;
  color: var(--text);
  background: var(--panel-bg);
  border: 1px solid var(--accent-soft);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  transition: left 0.34s cubic-bezier(0.33, 1, 0.68, 1), top 0.34s cubic-bezier(0.33, 1, 0.68, 1);
  cursor: move; /* the whole bubble is draggable (touch or mouse), see enableBubbleDrag */
  touch-action: none; /* so a touch-drag moves the bubble instead of scrolling */
}
/* Buttons and links inside the bubble keep their own cursor + are not drag handles. */
.tour-bubble .tour-btn, .tour-bubble a { cursor: pointer; }
/* Title kept in the DOM for screen readers (the dialog's heading), but hidden
   visually: on-screen it only distracts and the body text says it all. */
.tour-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tour-body { font-size: 13px; line-height: 1.5; color: var(--muted); }
.tour-body b, .tour-body strong { color: var(--text); }
/* A translucent veil over specific UI (e.g. the controls panel) so a step can
   dim just those while the 3D scene stays interactive. pointer-events:none: it
   only dims, the UI underneath still works. */
.tour-veil {
  position: absolute;
  pointer-events: none;
  z-index: 1; /* below the ring + bubble: dims the UI, never the tour popup */
  background: rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  transition: left 0.34s cubic-bezier(0.33, 1, 0.68, 1), top 0.34s cubic-bezier(0.33, 1, 0.68, 1), width 0.34s cubic-bezier(0.33, 1, 0.68, 1), height 0.34s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.3s ease;
}
.tour-veil[hidden] { display: none; }
/* Scroll arrow: a big accent chevron raised while a step's target is still
   off-screen inside a scrolling panel, bobbing the way the panel is taking
   you, then gliding onto the target and fading (js/tour.js
   updateScrollArrow). Deliberately NOT in the #tour-root.no-anim rule below:
   that glide happens mid-scroll, which is exactly when no-anim is on. */
.tour-scroll-arrow {
  position: absolute;
  z-index: 3; /* over the ring, under the bubble */
  pointer-events: none;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px; /* centre on the (left, top) js/tour.js sets */
  opacity: 0;
  color: var(--accent-bright);
  transition: left 0.42s cubic-bezier(0.33, 1, 0.68, 1), top 0.42s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.32s ease;
}
.tour-scroll-arrow[hidden] { display: none; }
.tour-scroll-arrow.show { opacity: 1; }
.tour-scroll-arrow svg { width: 100%; height: 100%; display: block; }
.tour-scroll-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tour-scroll-arrow.up svg { transform: rotate(180deg); }
.tour-arrow-bob {
  display: block;
  width: 100%;
  height: 100%;
  /* The glow is what makes it read over a dimmed panel; drop-shadow follows
     the chevron's own outline, unlike a box-shadow on the square box. */
  filter: drop-shadow(0 0 9px var(--accent)) drop-shadow(0 0 3px var(--accent-soft));
  animation: tour-arrow-bob 1.15s ease-in-out infinite;
}
.tour-scroll-arrow.up .tour-arrow-bob { animation-name: tour-arrow-bob-up; }
/* Landed on the target: stop nudging and shrink slightly, so the last beat
   reads as "here", not as "keep going". */
.tour-scroll-arrow.landed .tour-arrow-bob { animation: none; transform: scale(0.82); transition: transform 0.32s ease; }
@keyframes tour-arrow-bob {
  0%, 100% { transform: translateY(-5px); }
  50% { transform: translateY(5px); }
}
@keyframes tour-arrow-bob-up {
  0%, 100% { transform: translateY(5px); }
  50% { transform: translateY(-5px); }
}
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.tour-step { font-size: 11px; color: var(--muted); letter-spacing: 0.03em; flex: 0 0 auto; }
.tour-actions { display: flex; gap: 6px; }
.tour-btn {
  padding: 5px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: rgba(var(--ink), 0.06);
  border: 1px solid rgba(var(--ink), 0.12);
  border-radius: 7px;
  cursor: pointer;
}
.tour-btn:hover { background: rgba(var(--ink), 0.12); }
.tour-btn:disabled { opacity: 0.4; cursor: default; }
.tour-skip { background: none; border-color: transparent; color: var(--muted); font-weight: 500; }
.tour-skip:hover { background: rgba(var(--ink), 0.08); color: var(--text); }
/* Next is the primary forward affordance: accent-filled, and greyed (the shared
   :disabled rule) while a hands-on step still awaits its action. */
.tour-next { background: var(--accent); border-color: var(--accent); color: #06131f; }
.tour-next:hover:not(:disabled) { background: var(--accent-bright); border-color: var(--accent-bright); }
.tour-next:disabled { background: rgba(var(--ink), 0.06); border-color: rgba(var(--ink), 0.12); color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .tour-ring, .tour-bubble, .tour-veil, .tour-scroll-arrow { transition: none; }
  .tour-ring, .tour-ring.interactive, .tour-arrow-bob { animation: none; }
}
/* "See the tutorial" button in the #about-modal (replays the guided tour). */
.about-tour-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
}
.about-tour-btn:hover { background: var(--accent-bright); border-color: var(--accent-bright); }