/* ============================================================
   Delusion Index — First-time Tour
   ------------------------------------------------------------
   Spotlight walkthrough for new visitors. A dim plum scrim with
   a glowing cutout around the highlighted element, plus a glossy
   "cue card" tooltip in the tabloid-oracle voice.

   All knobs pull from tokens.css. Delete this file + js/tour.js
   to remove the feature entirely.
   ============================================================ */

/* Scrim is mounted by js/tour.js, not present in index.html */
.tour-root {
  position: fixed;
  inset: 0;
  z-index: 70; /* above header(40)/panels(55)/modals(60), below toast(80) */
  display: none;
}
.tour-root.on { display: block; }

/* The spotlight: a transparent box whose giant box-shadow dims
   everything around it. Border + glow make the cutout feel lit. */
.tour-spot {
  position: absolute;
  border-radius: var(--r-card);
  box-shadow:
    0 0 0 9999px rgba(43, 23, 51, .55),
    0 0 0 3px rgba(255, 79, 163, .9),
    0 0 34px rgba(255, 201, 60, .55);
  transition: top .45s cubic-bezier(.2, .7, .3, 1),
              left .45s cubic-bezier(.2, .7, .3, 1),
              width .45s cubic-bezier(.2, .7, .3, 1),
              height .45s cubic-bezier(.2, .7, .3, 1),
              border-radius .45s;
  pointer-events: none;
}

/* Centered mode (welcome / finale): no cutout, just the dim veil */
.tour-spot.centered {
  box-shadow: 0 0 0 9999px rgba(43, 23, 51, .55);
  width: 0 !important;
  height: 0 !important;
}

/* ---------- Cue card ---------- */
.tour-card {
  position: absolute;
  width: min(340px, calc(100vw - 36px));
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 20px 22px 18px;
  box-shadow: var(--shadow-pop);
  border: 1px solid rgba(255, 79, 163, .14);
  overflow: hidden;
  transition: top .45s cubic-bezier(.2, .7, .3, 1),
              left .45s cubic-bezier(.2, .7, .3, 1);
  animation: tourPop .35s cubic-bezier(.2, .8, .3, 1);
}
@keyframes tourPop {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Gradient top stripe — same signature as delusion cards */
.tour-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--grad-delulu);
}

.tour-kicker {
  font-family: var(--font-accent);
  font-size: 17px;
  color: var(--coral);
  line-height: 1;
}
.tour-title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.3px;
  margin: 4px 0 7px;
}
.tour-text {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* ---------- Footer: dots + buttons ---------- */
.tour-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.tour-dots { display: flex; gap: 5px; margin-right: auto; }
.tour-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(212, 38, 126, .18);
  transition: .2s;
}
.tour-dots span.on {
  background: var(--pink-deep);
  transform: scale(1.25);
}

.tour-skip {
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink-soft);
  padding: 8px 6px;
}
.tour-skip:hover { color: var(--pink-deep); }

.tour-next {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  background: var(--grad-delulu);
  border: none;
  cursor: pointer;
  border-radius: var(--r-pill);
  padding: 9px 18px;
  box-shadow: 0 6px 16px rgba(255, 79, 163, .35);
  transition: transform .15s, filter .2s;
}
.tour-next:hover { filter: brightness(1.05); }
.tour-next:active { transform: scale(.96); }

/* ---------- "take the tour" trigger link ---------- */
.tour-link {
  display: inline-block;
  margin-top: 10px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-accent);
  font-size: 18px;
  color: var(--pink-deep);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: rgba(255, 201, 60, .8);
  text-underline-offset: 4px;
}
.tour-link:hover { color: var(--pink); }