/* Formhouse Connected: the autoplay demo's cursor and caption bar (see shared/tour.js). */

.tour-cursor {
  position: absolute; left: 0; top: 0; z-index: 120;
  width: 28px; height: 28px; margin: -4px 0 0 -6px;
  pointer-events: none;
  opacity: 0;
  transition-property: transform, opacity;
  transition-timing-function: var(--ease-in-out);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
}
.tour-cursor.is-on { opacity: 1; }
/* No focus rings while the tour clicks for the viewer (shared/tour.js toggles the class) */
.is-touring :focus-visible { outline: none; }
.tour-cursor svg { width: 100%; height: 100%; display: block; transition: transform var(--t-fast) var(--ease-out); }
.tour-cursor.is-press svg { transform: scale(0.82); }
.tour-cursor__ring {
  position: absolute; left: 2px; top: 1px; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border-radius: 50%; border: 2px solid var(--accent-hi);
  opacity: 0; transform: scale(0.3);
}
.tour-cursor.is-press .tour-cursor__ring { animation: tour-ring 600ms var(--ease-out); }
@keyframes tour-ring { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.6); } }

.tour-bar {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem 0.55rem 0.55rem 0.9rem;
  border-radius: var(--r-pill);
  background: rgba(16, 17, 20, 0.86);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font-size: var(--fs-page-xs);
  max-width: 32rem;
}
.tour-bar__live { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--text-3); }
.tour-bar[data-state='playing'] .tour-bar__live { background: var(--danger); box-shadow: 0 0 0 0 rgba(255, 90, 106, 0.6); animation: live 1.6s ease-out infinite; }
.tour-bar__text { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
.tour-bar__count { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-hi); }
.tour-bar__count:empty { display: none; }
.tour-bar__say { color: var(--text); font-weight: 600; line-height: 1.35; }
.tour-bar__btn {
  flex: none; display: inline-flex; align-items: center; gap: 0.4em;
  min-height: var(--tap-min); padding: 0 1rem; border-radius: var(--r-pill);
  font-size: var(--fs-page-xs); font-weight: 700;
  background: var(--text); color: var(--ink-0);
}
.tour-bar__btn svg { width: 1em; height: 1em; }
.tour-bar[data-state='playing'] .tour-bar__btn { background: var(--glass-strong); color: var(--text); border: 1px solid var(--line-strong); }

.tour-bar--float {
  position: fixed; z-index: 210; left: 50%; translate: -50% 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
  width: calc(100% - 24px);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.8);
}

@media (prefers-reduced-motion: reduce) {
  .tour-bar[data-state='playing'] .tour-bar__live { animation: none; }
}