/* The walkthrough: a spotlight on the real page, a coach card beside it, and small animated scenes for what page scale hides. */
:root {
  --z-tour-veil: 30;
  --z-tour-card: 31;
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
}
.tour-veil {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-tour-veil);
  /* The svg box itself must not catch clicks; only the painted shade does, so the spotlight hole is live. */
  pointer-events: none;
}
.tour-shade {
  fill: oklch(0.05 0.01 290 / 0.74);
  pointer-events: visiblePainted;
}
.tour-ring {
  fill: none;
  stroke: var(--violet);
  stroke-width: 2;
  pointer-events: none;
}
.tour-ring.hidden {
  display: none;
}
.tour-card {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-tour-card);
  width: min(400px, calc(100vw - 32px));
  padding: 18px 20px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 60px -12px oklch(0 0 0 / 0.7);
  transition: transform 0.38s var(--ease-out-quint);
  will-change: transform;
}
.tour-card h3 {
  margin: 14px 0 6px;
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.012em;
  text-wrap: balance;
  padding-right: 48px;
}
.tour-card .tour-body {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.tour-card .tour-body b {
  font-weight: 650;
}
.tour-skip {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 9px;
  font-size: 0.8rem;
  color: var(--muted);
  background: transparent;
}
.tour-skip:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.tour-scene {
  border-radius: 12px;
  background: var(--bg);
  overflow: hidden;
}
.tour-scene[hidden] {
  display: none;
}
.tour-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: inherit;
}
.tour-extra {
  margin-top: 12px;
}
.tour-extra[hidden] {
  display: none;
}
.tour-seg {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tour-seg button {
  padding: 6px 10px;
  font-size: 0.82rem;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
}
.tour-seg button:hover {
  background: var(--surface-2);
}
.tour-seg button[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.tour-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.tour-dots {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tour-dots button {
  display: block;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: var(--line);
  transition:
    background 0.16s ease-out,
    transform 0.16s var(--ease-out-quint);
}
.tour-dots button:hover {
  background: var(--muted);
}
.tour-dots .current button {
  background: var(--violet);
  transform: scale(1.25);
}
.tour-nav {
  display: flex;
  gap: 8px;
}
.tour-nav .primary {
  padding: 8px 16px;
  font-size: 0.9rem;
}
.tour-nav .quiet {
  padding: 8px 12px;
  font-size: 0.9rem;
}

/* One quiet invitation on load: the launch button glows once. */
.tour-launch {
  animation: launch-glow 1.8s ease-out 1.4s 1;
}
@keyframes launch-glow {
  0% {
    box-shadow: 0 0 0 0 oklch(0.7 0.18 300 / 0);
  }
  30% {
    box-shadow: 0 0 0 5px oklch(0.7 0.18 300 / 0.4);
  }
  100% {
    box-shadow: 0 0 0 9px oklch(0.7 0.18 300 / 0);
  }
}

/* The real odor strip rises while the smell step is showing. */
.odor-strip.rise i {
  transform-origin: bottom;
  animation: odor-rise 0.5s var(--ease-out-quint) both;
  animation-delay: calc(var(--i, 0) * 14ms);
}
@keyframes odor-rise {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

/* Scene vocabulary. */
.tour-svg text {
  fill: var(--ink);
  font-size: 10px;
}
.tour-svg .caption {
  fill: var(--muted);
  font-size: 9px;
  font-family: var(--mono);
}
.tour-svg .caption.faint {
  fill: var(--faint);
}
.tour-svg .caption.note {
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 600;
  fill: var(--ink);
}
.tour-svg .team-label {
  font-size: 10.5px;
  font-weight: 650;
}
.tour-svg .team.avoid .team-label,
.tour-svg .node.avoid + .team-label {
  fill: var(--ch-c);
}
.tour-svg .team.approach .team-label,
.tour-svg .node.approach + .team-label {
  fill: var(--ch-a);
}
.tour-svg .baseline,
.tour-svg .tick {
  stroke: var(--line);
  stroke-width: 1;
}

/* Sniff. */
.code-bg {
  fill: var(--bg);
  stroke: var(--line);
}
.code-line.plain {
  fill: var(--faint);
}
.code-line.removed {
  fill: var(--red);
}
.code-line.added {
  fill: var(--ch-a);
}
.jev-body {
  fill: var(--ink);
}
.tour-svg .jev-label {
  fill: var(--bg);
  font-size: 12px;
  font-weight: 700;
}
.sniff {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: sniff 1.9s ease-out infinite;
  animation-delay: calc(var(--i, 0) * 0.6s);
}
@keyframes sniff {
  0% {
    transform: scale(2.4);
    opacity: 0;
  }
  25% {
    opacity: 0.55;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.chip {
  opacity: 0;
  transform: translateX(-22px);
  animation: chip-in 0.5s var(--ease-out-quint) forwards;
  animation-delay: calc(1.1s + var(--i, 0) * 0.3s);
}
@keyframes chip-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.chip-bg {
  fill: var(--bg);
  stroke: var(--line);
}
.chip-label {
  font-size: 9.5px;
  font-weight: 600;
}

/* Smell. */
.bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: bar-rise 0.5s var(--ease-out-quint) both;
  animation-delay: calc(var(--i, 0) * 16ms);
}
.bar.receptor {
  fill: var(--red);
}
.bar.lexical {
  fill: var(--ink);
}
.bar.quiet {
  fill: var(--line);
  animation: none;
}
.bar.first-read {
  fill: var(--faint);
}
.bar.second-read {
  fill: oklch(0.5 0.14 300);
}
.bar.second-read.looked {
  fill: var(--violet);
}
.bar.still {
  animation: none;
}
.tour-svg .caption.looked {
  fill: var(--violet);
  font-weight: 700;
}
@keyframes bar-rise {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
.cell {
  fill: var(--line);
}
.cell.lit {
  transform-box: fill-box;
  transform-origin: center;
  animation: cell-light 0.45s var(--ease-out-quint) forwards;
  animation-delay: calc(1.25s + var(--i, 0) * 0.1s);
}
.cell.lit.steady {
  fill: var(--violet);
  animation: cell-breathe 1.6s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * 0.13s);
}
@keyframes cell-light {
  to {
    fill: var(--violet);
    transform: scale(1.6);
  }
}
@keyframes cell-breathe {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}

/* Tug of war. */
.rope {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
}
.team .puller {
  transform-box: fill-box;
  transform-origin: center;
  animation: pull var(--period, 0.6s) ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * 0.09s);
}
.team.avoid .puller {
  fill: var(--ch-c);
}
.team.approach .puller {
  fill: var(--ch-a);
}
.team.winning .puller {
  animation-name: pull-hard;
}
@keyframes pull {
  from {
    transform: translateX(-1.2px) scale(0.96);
  }
  to {
    transform: translateX(1.2px) scale(1.04);
  }
}
@keyframes pull-hard {
  from {
    transform: translateX(-2.4px) scale(0.98);
  }
  to {
    transform: translateX(2.4px) scale(1.12);
  }
}
.knot-body {
  fill: var(--ink);
}
.knot-core {
  fill: var(--bg);
}

/* Dopamine. */
.wire {
  stroke: var(--faint);
  stroke-width: 1.6;
  opacity: 0.75;
}
.wire.weaken {
  animation: wire-weaken 0.9s var(--ease-out-quint) forwards;
  animation-delay: calc(1.1s + var(--i, 0) * 0.09s);
}
@keyframes wire-weaken {
  to {
    stroke-width: 0.35;
    opacity: 0.14;
  }
}
.node.avoid {
  fill: var(--ch-c);
}
.node.approach {
  fill: var(--ch-a);
}
.node.starved {
  animation: starve 0.8s ease-out forwards;
  animation-delay: 1.7s;
}
@keyframes starve {
  to {
    opacity: 0.35;
  }
}
.bolt {
  fill: var(--yellow);
  stroke: var(--ink);
  stroke-width: 0.6;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: bolt-flash 1s steps(1, end) forwards;
  animation-delay: 0.45s;
}
@keyframes bolt-flash {
  0% {
    opacity: 1;
    transform: scale(1.35);
  }
  12% {
    opacity: 0.2;
  }
  22% {
    opacity: 1;
    transform: scale(1.1);
  }
  40% {
    opacity: 0.35;
  }
  55% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0.9;
    transform: scale(1);
  }
}
.treat {
  opacity: 0;
  transform: translateY(-10px);
  animation: treat-in 0.5s var(--ease-out-quint) forwards;
  animation-delay: 0.45s;
}
@keyframes treat-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.cube {
  fill: var(--bg);
  stroke: var(--ink);
  stroke-width: 0.8;
}
.cube-shine {
  fill: oklch(0.92 0.005 25);
}

/* Same smell, same answer. */
.spike {
  stroke: var(--ink);
  stroke-width: 1.6;
  transform-box: fill-box;
  transform-origin: center;
  animation: spike-in 0.25s var(--ease-out-quint) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.spike.row-1 {
  stroke: var(--violet);
  animation-delay: calc(0.9s + var(--i, 0) * 45ms);
}
@keyframes spike-in {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
.check {
  fill: none;
  stroke: var(--ch-a);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  animation: check-in 0.45s var(--ease-out-quint) forwards;
  animation-delay: 1.9s;
}
@keyframes check-in {
  to {
    stroke-dashoffset: 0;
  }
}

/* Reduced motion: every scene shows its end state, the spotlight snaps, nothing loops. */
@media (prefers-reduced-motion: reduce) {
  .tour *,
  .odor-strip.rise i,
  .tour-launch {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.tour-extra .primary {
  padding: 9px 14px;
  font-size: 0.9rem;
}
.tour-proxy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.tour-proxy small {
  font-size: 0.75rem;
  color: var(--muted);
}
.tour-proxy small[hidden] {
  display: none;
}