/* The Docent — the site-wide guided tour for The Color of Time.
   Paired with frontend/js/tour.js. The metaphor is the museum's own: when the tour runs, the
   gallery lights go down (a warm dark scrim), a raking light picks out ONE exhibit (a spotlight
   cutout with a thin vermilion rim that glides between targets), and a wall label — the classic
   museum-label anatomy: mono eyebrow, serif title, one-sentence body — explains what the visitor
   is looking at. Every color / face / easing token here is the site's existing system (motion.css
   :root), so the docent reads as part of the exhibit, not a bolted-on product tour. */

/* ---------- the spotlight: one fixed element whose box-shadow is BOTH the scrim and the rim ----
   The cutout is the element's own transparent box; the first two shadows are the raking-light rim
   (a hairline vermilion edge + a soft warm bloom), the last is a viewport-sized scrim. Moving
   between steps transitions top/left/width/height, so the light physically travels to the next
   exhibit — the "slowly moves to that place" the owner asked for. */
.tcot-tour-cut {
  position: fixed;
  z-index: 1200;
  border-radius:24px;
  corner-shape: squircle;
  pointer-events: none;
  box-shadow:
    0 0 0 1.5px rgba(200, 69, 59, .75),
    0 0 26px 5px rgba(200, 69, 59, .22),
    0 0 0 200vmax rgba(20, 14, 8, .55);
  transition:
    top .55s var(--motion-ease-presence, cubic-bezier(.16, 1, .3, 1)),
    left .55s var(--motion-ease-presence, cubic-bezier(.16, 1, .3, 1)),
    width .55s var(--motion-ease-presence, cubic-bezier(.16, 1, .3, 1)),
    height .55s var(--motion-ease-presence, cubic-bezier(.16, 1, .3, 1)),
    opacity .3s linear;
}

/* click-catcher UNDER the card but over the page: a tap anywhere outside the label advances
   (museum pacing: the visitor nods, the docent moves on). Kept separate from the cutout so the
   cutout can stay pointer-events:none and never intercept the card. */
.tcot-tour-catch {
  position: fixed;
  inset: 0;
  z-index: 1199;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- the wall label ---------- */
.tcot-tour-card {
  position: fixed;
  z-index: 1201;
  width: min(330px, calc(100vw - 28px));
  background: var(--color-card, #F7F1E3);
  color: var(--color-ink, #221D17);
  border: 1px solid rgba(34, 29, 23, .16);
  border-radius:22px;
  corner-shape: squircle;
  box-shadow: 0 30px 60px -28px rgba(20, 14, 8, .75), 0 0 0 1px rgba(34, 29, 23, .04);
  padding: 15px 17px 13px;
  outline: none;
  transition:
    top .55s var(--motion-ease-presence, cubic-bezier(.16, 1, .3, 1)),
    left .55s var(--motion-ease-presence, cubic-bezier(.16, 1, .3, 1));
  animation: tcotCardIn .4s var(--motion-ease-presence, cubic-bezier(.16, 1, .3, 1)) both;
}
@keyframes tcotCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.tcot-tour-eyebrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--ff-mono, 'IBM Plex Mono', monospace);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #8a5a4a;
}
.tcot-tour-count { color: #9a8b73; font-weight: 500; letter-spacing: .08em; }

.tcot-tour-title {
  font-family: var(--ff-display, 'Fraunces', serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -.014em;
  margin: 8px 0 0;
}
.tcot-tour-body {
  font-family: var(--ff-body, 'IBM Plex Sans', sans-serif);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(34, 29, 23, .74);
  margin: 7px 0 0;
}
/* step change: the label text rolls in like an instrument readout advancing (the Lab's idiom) */
.tcot-tour-card.is-advancing .tcot-tour-title,
.tcot-tour-card.is-advancing .tcot-tour-body {
  animation: tcotTextRoll .34s var(--motion-ease-roll, cubic-bezier(.3, .1, .3, 1)) both;
}
.tcot-tour-card.is-advancing .tcot-tour-body { animation-delay: .05s; }
@keyframes tcotTextRoll {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* "you are here": one thin segment per stop, filled as the tour advances — a floor plan, not dots */
.tcot-tour-progress {
  display: flex;
  gap: 4px;
  margin-top: 12px;
}
.tcot-tour-progress i {
  flex: 1;
  height: 2px;
  border-radius:3px;
  background: rgba(34, 29, 23, .14);
  transition: background .3s linear;
}
.tcot-tour-progress i.is-lit { background: var(--color-accent, #C8453B); }

.tcot-tour-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
}
.tcot-tour-btn {
  font-family: var(--ff-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  border-radius:12px;
  corner-shape: squircle;
  padding: 7px 12px;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(34, 29, 23, .22);
  color: rgba(34, 29, 23, .78);
}
.tcot-tour-btn:hover { background: rgba(34, 29, 23, .06); }
.tcot-tour-btn:focus-visible { outline: 2px solid var(--color-accent, #C8453B); outline-offset: 2px; }
.tcot-tour-btn[disabled] { opacity: .35; cursor: default; }
.tcot-tour-btn[disabled]:hover { background: transparent; }
.tcot-tour-btn-next {
  margin-left: auto;
  background: var(--color-accent, #C8453B);
  border-color: var(--color-accent, #C8453B);
  color: #F7F1E3;
}
.tcot-tour-btn-next:hover { background: var(--color-accent-hover, #b23a31); }
.tcot-tour-btn-end {
  border: none;
  color: rgba(34, 29, 23, .5);
  padding: 7px 6px;
}
.tcot-tour-btn-end:hover { color: var(--color-ink, #221D17); background: transparent; }

/* ---------- the standing affordance: a quiet TOUR chip on every page ----------
   First visits auto-start the tour (owner request); this chip is the only trace afterwards. */
.tcot-tour-chip {
  position: fixed;
  right: 18px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1099;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ff-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(34, 29, 23, .72);
  background: rgba(247, 241, 227, .92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(34, 29, 23, .2);
  border-radius:15px;
  corner-shape: squircle;
  padding: 8px 12px;
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(20, 14, 8, .55);
  transition: color .2s ease, border-color .2s ease, transform .2s var(--motion-ease-presence, cubic-bezier(.16, 1, .3, 1));
  animation: tcotChipIn .5s var(--motion-ease-presence, cubic-bezier(.16, 1, .3, 1)) both;
}
.tcot-tour-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent, #C8453B);
  opacity: .8;
}
.tcot-tour-chip:hover {
  color: var(--color-ink, #221D17);
  border-color: rgba(200, 69, 59, .55);
  transform: translateY(-1px) rotate(-.6deg);
}
.tcot-tour-chip:focus-visible { outline: 2px solid var(--color-accent, #C8453B); outline-offset: 2px; }
@keyframes tcotChipIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* the chip steps aside while the docent has the floor */
.tcot-tour-chip.is-hidden { display: none; }

/* ---------- small screens: the label docks as a sheet; the light still travels ---------- */
@media (max-width: 640px) {
  .tcot-tour-card {
    left: 14px !important;
    right: 14px;
    width: auto;
    top: auto !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    max-height: 46vh;
    overflow: auto;
  }
}

/* ---------- reduced motion: the light cuts instead of gliding; nothing swings ---------- */
@media (prefers-reduced-motion: reduce) {
  .tcot-tour-cut,
  .tcot-tour-card { transition: none !important; animation: none !important; }
  .tcot-tour-card.is-advancing .tcot-tour-title,
  .tcot-tour-card.is-advancing .tcot-tour-body { animation: none !important; }
  .tcot-tour-chip { animation: none !important; }
}