/* Pelicular — the interactive tour of the presentation (§ 5.54), in the charter of framer.css:
   the pages as the tabs of Pelicular's bar, the picture in its frame of glass, the hotspots
   unseen until the pointer finds them, the column of words beside, under it on a small screen. */

.tour { position: relative; }
.tour-fallback[hidden] { display: none; }

.tour-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  margin-bottom: 14px;
}
.tour-pages { display: flex; flex-wrap: wrap; gap: 6px; }
.tour-tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 16px; border-radius: var(--r-control);
  font: 510 0.75rem/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim-readable);
  background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line); cursor: pointer;
  transition: color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease), box-shadow var(--t-state) var(--ease);
}
.tour-tab:hover { color: var(--bright); border-color: var(--line-strong); }
.tour-tab[aria-selected="true"] { color: var(--bright); border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent), 0 0 18px var(--accent-glow); }
.tour-tab .pro, .tour-chip .pro, .tour-keys .pro { letter-spacing: 0.06em; }

.tour-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tour-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px; border-radius: 999px;
  font: 400 0.85rem/1.2 var(--font); color: var(--text); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); cursor: pointer;
  transition: color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease), background var(--t-quick) var(--ease);
}
.tour-chip:hover { color: var(--bright); border-color: var(--line-strong); }
.tour-chip[aria-pressed="true"] { color: var(--bright); border-color: var(--accent); background: rgba(104, 204, 226, 0.1); }
.tour-chip kbd { font-size: 0.72rem; }

.tour-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); gap: 20px; align-items: start; }
@media (max-width: 1080px) { .tour-body { grid-template-columns: minmax(0, 1fr); } }

.tour-caption { margin: 12px 6px 0; font-size: 0.85rem; color: var(--dim-readable); max-width: 68ch; }

/* A picture one points at does not lean back as the still one of the hero did. */
.hero-shot .tour .window { transform: none; }
.tour-frame { min-width: 0; }
.tour-screen {
  position: relative; width: 100%; overflow: hidden; border-radius: calc(var(--r-big) - 8px);
  background: #000206; isolation: isolate;
}
.tour-pic { position: absolute; inset: 0; width: 100%; height: 100%; }
.window .tour-pic, .window .tour-layer img { border-radius: 0; background: #000206; }
.tour-stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tour-stage:empty { display: none; }
.tour-layer { position: absolute; inset: 0; will-change: transform, opacity, clip-path; }
.tour-layer img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tour-band { background: #000206; }

.tour-hots { position: absolute; inset: 0; z-index: 2; }
.tour-hots.moving { visibility: hidden; }
.hot {
  position: absolute; margin: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: help;
  transition: box-shadow var(--t-quick) var(--ease), background var(--t-quick) var(--ease);
}
.hot.go { cursor: pointer; }
.hot:hover, .hot:focus-visible, .hot.on {
  outline: none; background: rgba(104, 204, 226, 0.1);
  box-shadow: 0 0 0 1.5px var(--accent), 0 0 16px var(--accent-glow);
}
.hot.zone:hover, .hot.zone:focus-visible, .hot.zone.on {
  background: rgba(104, 204, 226, 0.04); box-shadow: inset 0 0 0 1.5px rgba(104, 204, 226, 0.55);
}
/* What opens a panel says so by a small point of light, always there. */
.hot.leads::after {
  content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent); opacity: 0.85;
  animation: tour-beacon 2.4s var(--ease) infinite;
}
@keyframes tour-beacon { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

.tour-side {
  position: relative; border-radius: var(--r-card); padding: var(--s5);
  background: linear-gradient(180deg, var(--card-top), var(--card-foot));
  border: 1px solid var(--card-thread); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 14px; min-height: 100%;
}
@media (min-width: 1081px) { .tour-side { position: sticky; top: 76px; } }
.tour-where { margin: 0; font: 510 0.72rem/1.3 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.tour-live { display: flex; flex-direction: column; gap: 10px; min-height: 9.5em; }
.tour-title { margin: 0; font-size: 1.15rem; line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.tour-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.tour-keys[hidden], .tour-command[hidden], .tour-go[hidden], .tour-loupe[hidden], .tour-guide[hidden] { display: none; }
.tour-label { font-size: 0.82rem; color: var(--dim-readable); }
.tour-text { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--text); }
.tour-command { margin: 0; font-size: 0.8rem; color: var(--dim-readable); }
.tour-command code { color: var(--text); font-size: 0.78rem; }
.tour-go { align-self: flex-start; padding: 8px 14px; font-size: 0.85rem; }

.tour-loupe {
  position: relative; height: 120px; border-radius: var(--r-control); border: 1px solid var(--line);
  background-color: #000206; background-repeat: no-repeat; overflow: hidden;
}
.tour-ring {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 5px;
  box-shadow: 0 0 0 1.5px var(--accent), 0 0 14px var(--accent-glow);
}
@media (min-width: 1081px) { .tour-loupe { display: none; } }

.tour-guide { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.tour-guide-label { margin: 0 0 8px; font: 510 0.72rem/1.3 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim-readable); }
.tour-guide-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tour-guide-row .btn { padding: 8px 14px; font-size: 0.85rem; }
.tour-prev[disabled] { opacity: 0.4; cursor: default; box-shadow: none; border-color: var(--line); }
.tour-step { flex: 1; min-width: 6em; font-size: 0.82rem; color: var(--dim-readable); font-variant-numeric: tabular-nums; text-align: center; }

/* Motion reduced, by the system or by the reader: the states change at once, the beacons rest. */
.still .hot.leads::after { animation: none; opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
  .hot.leads::after { animation: none; opacity: 0.85; }
  .hot, .tour-tab, .tour-chip { transition: none; }
}

/* The page in light: the picture stays Pelicular's, dark. */
:root[data-theme="light"] .tour-screen { background: #000206; }