/* ============================================================================
   THE FIRST-VISIT TOUR (owner, Sept 29) — js/tour.js
   "Options get highlighted, and you go next, next ... with a glowing purple
   RGB, blue RGB, circling around the options."

   The page dims around one control (a huge box-shadow on the "hole", so the
   control itself stays lit and untouched), a ring of purple -> indigo -> blue
   turns slowly around it with a soft glow of the same colours behind, and a
   small card beside it says what it is. The ring's turn is a registered custom
   property (@property), so browsers without it simply show a still ring.
   The palette is the Mahi indigo family; no literal here is green-dominant
   (the gates sweep stylesheets for green).
   ========================================================================== */

@property --tour-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.tour {
  position: fixed;
  inset: 0;
  z-index: 90;
  --x: 0px; --y: 0px; --w: 0px; --h: 0px; --r: 16px;
  --tour-glide: 380ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --tour-violet: #7C3AED;
  --tour-indigo: #4F46E5;
  --tour-blue: #2563EB;
  --tour-purple: #A855F7;
}
.tour[hidden] { display: none; }

/* the spotlight: everything but the hole is dimmed */
.tour__hole,
.tour__ring,
.tour__halo {
  position: absolute;
  pointer-events: none;
  transition: left var(--tour-glide), top var(--tour-glide), width var(--tour-glide), height var(--tour-glide), border-radius var(--tour-glide);
}
.tour__hole {
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border-radius: var(--r);
  box-shadow: 0 0 0 200vmax rgba(14, 12, 38, 0.64);
}

/* the ring, 3px outside the hole, and its glow */
.tour__ring,
.tour__halo {
  left: calc(var(--x) - 4px);
  top: calc(var(--y) - 4px);
  width: calc(var(--w) + 8px);
  height: calc(var(--h) + 8px);
  border-radius: calc(var(--r) + 4px);
}
.tour__ring,
.tour__halo > i {
  box-sizing: border-box;
  padding: 3px;
  background: conic-gradient(from var(--tour-a),
    var(--tour-violet), var(--tour-indigo), var(--tour-blue), var(--tour-purple), var(--tour-violet));
  /* only the border shows: the gradient is cut out of the middle */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: tourTurn 3.2s linear infinite;
}
.tour__halo { filter: blur(12px); opacity: .95; animation: tourBreathe 2.4s ease-in-out infinite alternate; }
.tour__halo > i {
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 7px;
}
@keyframes tourTurn { to { --tour-a: 360deg; } }
@keyframes tourBreathe { from { opacity: .6; } to { opacity: 1; } }

/* ---- the card ---- */
.tour__card {
  position: absolute;
  width: min(340px, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 18px 18px 14px;
  background: var(--paper, #FFFFFF);
  color: var(--ink, #16181C);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.28),
    0 22px 50px -14px rgba(14, 12, 38, 0.55);
  transition: left var(--tour-glide), top var(--tour-glide);
}
.tour__step {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tour-violet);
}
.tour__title {
  margin: 5px 0 6px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.tour__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-70, rgba(22, 24, 28, 0.7));
}
.tour__acts {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.tour__acts button {
  min-height: 40px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.tour__acts button[hidden] { display: none; }
.tour__skip {
  margin-right: auto;
  padding: 0 8px;
  background: none;
  border: 0;
  color: var(--muted, #6B7080);
  font-weight: 500 !important;
}
.tour__skip:hover { color: var(--ink, #16181C); text-decoration: underline; }
.tour__back {
  padding: 0 16px;
  background: var(--paper, #FFFFFF);
  border: 1px solid var(--line, rgba(22, 24, 28, 0.1));
  color: var(--ink, #16181C);
}
.tour__back:hover { border-color: var(--tour-indigo); }
.tour__next {
  padding: 0 20px;
  border: 0;
  color: #FFFFFF;
  background: linear-gradient(135deg, #6D28D9, var(--tour-indigo) 55%, var(--tour-blue));
  box-shadow: 0 6px 18px -8px rgba(79, 70, 229, 0.9);
}
.tour__next:hover { filter: brightness(1.08); }
.tour__acts button:focus-visible { outline: 2px solid var(--tour-indigo); outline-offset: 2px; }
/* the last step: the caret is in the box, "Start" is the one thing to press */
.tour[data-final="true"] .tour__step { color: var(--tour-blue); }

/* ---- a phone: the card is a sheet at the bottom (or the top) ---- */
.tour[data-layout="sheet"] .tour__card {
  left: 12px;
  right: 12px;
  width: auto;
  top: auto;
  bottom: calc(12px + env(safe-area-inset-bottom));
  padding: 16px 16px 12px;
}
.tour[data-layout="sheet"][data-sheet="top"] .tour__card {
  top: calc(12px + env(safe-area-inset-top));
  bottom: auto;
}
.tour[data-layout="sheet"] .tour__acts button { min-height: 44px; }
.tour[data-layout="sheet"] .tour__title { font-size: 18px; }

/* ---- "Show me around", beside "Get help from a designer" ---- */
@media (max-width: 899px) {
  /* two inline links on the disclosure line: room between their tap areas */
  .dock__foot .tourlink { margin-left: 14px; }
}

/* ---- reduced motion: the same tour, standing still ---- */
@media (prefers-reduced-motion: reduce) {
  .tour__ring,
  .tour__halo,
  .tour__halo > i { animation: none !important; }
  .tour__halo { opacity: .8; }
  .tour__hole,
  .tour__ring,
  .tour__halo,
  .tour__card { transition: none !important; }
}
.tour[data-reduced="true"] .tour__ring,
.tour[data-reduced="true"] .tour__halo,
.tour[data-reduced="true"] .tour__halo > i { animation: none; }