/* BOOT's guided tour — brutalist spotlight + comic speech bubble.
   Hard borders, riso offset shadows, square corners, pixel-art motion
   (steps() timing). The global prefers-reduced-motion rule in reset.css
   disables all animation/transition here automatically. */

.tour { position: fixed; inset: 0; z-index: 12000; }

/* Spotlight cutout — lime ring + pink riso ring, then the page dim. */
.tour-spot {
  position: fixed;
  box-shadow:
    0 0 0 3px var(--accent),
    6px 6px 0 3px var(--hover),
    0 0 0 9999px rgba(5, 5, 16, 0.78);
  pointer-events: none;
  transition: left 0.25s, top 0.25s, width 0.25s, height 0.25s;
}
.tour.tour-center .tour-spot { display: none; }
.tour.tour-center::before {
  content: ''; position: fixed; inset: 0; background: rgba(5, 5, 16, 0.78);
}

.tour-card {
  position: fixed; display: flex; align-items: flex-end; gap: 12px;
  max-width: 440px;
}
.tour.tour-center .tour-card {
  left: 50% !important; top: 50% !important; transform: translate(-50%, -50%);
}

/* BOOT — pixel pop-in entrance + slow idle bob (pixel-steps, not smooth) */
.tour-bot {
  width: 120px; image-rendering: pixelated; flex: 0 0 auto;
  filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.55));
  animation: boot-pop 0.35s steps(4) both, boot-bob 2.4s steps(2) 0.5s infinite;
  transform-origin: bottom center;
}
.tour.tour-center .tour-bot { width: 175px; }
@keyframes boot-pop {
  0%   { transform: translateY(30px) scale(0.6); opacity: 0; }
  60%  { transform: translateY(-6px) scale(1.06); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes boot-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* Speech bubble — paper card, ink border, pink riso shadow, two-layer comic tail */
.tour-bubble {
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--hover);
  padding: 14px 16px 12px; position: relative; min-width: 260px;
}
.tour-bubble::before {           /* tail: ink outline layer */
  content: ''; position: absolute; left: -16px; bottom: 24px;
  border: 8px solid transparent; border-right: 16px solid var(--ink);
}
.tour-bubble::after {            /* tail: paper fill layer */
  content: ''; position: absolute; left: -9px; bottom: 27px;
  border: 5px solid transparent; border-right: 11px solid var(--paper);
}

.tour-title {
  font-family: Geologica, sans-serif; font-weight: 900;
  font-size: 16px; letter-spacing: 0.5px; margin-bottom: 7px;
  display: inline-block; line-height: 1.15;
  background: linear-gradient(transparent 62%, var(--accent) 62%);  /* highlighter swipe */
  padding-right: 4px;
}
.tour-copy { font-family: Inter, sans-serif; font-size: 13.5px; line-height: 1.5; }

.tour-btns { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.tour-next {
  background: var(--accent); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-family: Geologica, sans-serif; font-weight: 900; font-size: 13px;
  padding: 6px 16px; cursor: pointer;
  transition: transform 0.06s, box-shadow 0.06s;
}
.tour-next:hover { background: var(--hover); color: var(--white); }
.tour-next:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.tour-skip {
  background: transparent; border: 0; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: #888; text-decoration: underline;
}
.tour-skip:hover { color: var(--hover); }

/* Progress dots — hard squares, lime current */
.tour-dots { display: flex; gap: 5px; margin-top: 11px; }
.tour-dots span { width: 8px; height: 8px; background: #cfcfc6; border: 1px solid var(--ink); }
.tour-dots span.on { background: var(--accent); }