/* =============================================================================
   GENUBRA LIVE LAUGH ENGINE — realm.components.css
   Component styling for the JS-rendered dynamic sections (TCL, tour map + city
   panel, comedy-memory, stage-door checkout, VCG share-wall, scarcity ticker,
   shared text utilities). Authored against the same :root token system as
   realm.css. LINK THIS AFTER realm.css so source-order wins ties.
   ========================================================================== */


/* ###### css-tcl ###### */
/* =============================================================================
   GENUBRA LIVE LAUGH ENGINE — TICKET CONVERSION LOOP (#tcl)
   5 stacked staged blocks: Curiosity -> Hook -> Identity -> Scarcity -> Action.
   JS (ticket.js) toggles .is-revealed per stage as scroll --rc-progress advances
   (ratcheted, never flickers back). Stage 5 carries a live --rc-stage-heat (0..1)
   that intensifies the action stage-light + CTA halo. Built from realm.css tokens;
   visual reference = the dead .tcl-stage rules (section 13). Loaded after realm.css.
   ========================================================================== */

/* ---- LOOP CONTAINER ------------------------------------------------------- */
.rc-tcl {
  position: relative;
  z-index: var(--rc-z-content);
  display: grid;
  gap: var(--rc-6);
  max-width: var(--rc-maxw);
  margin-inline: auto;
  padding-inline: var(--rc-gutter);
}

/* ---- STAGE BLOCK (panel) -------------------------------------------------- */
/* Per-stage tunable: --_lit ramps the stage-light intensity from Curiosity (low)
   toward Action (high). Each stage overrides it below. */
.rc-tcl__stage {
  --_lit: 0.16;
  position: relative;
  isolation: isolate;
  padding: clamp(1.5rem, 5.5vw, 2.8rem);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-r-lg);
  background: linear-gradient(180deg, var(--rc-void-2), var(--rc-void-3));
  box-shadow: var(--rc-shadow);
  /* HIDDEN STATE: dimmed, dropped, blurred, slightly desaturated. */
  opacity: 0.32;
  transform: translateY(22px) scale(0.992);
  filter: blur(3px) saturate(0.7);
  transition:
    opacity var(--rc-t-slow) var(--rc-ease-out),
    transform var(--rc-t-slow) var(--rc-spring),
    filter var(--rc-t-slow) var(--rc-ease-out),
    border-color var(--rc-t) var(--rc-ease),
    box-shadow var(--rc-t) var(--rc-ease);
}

/* Masked gradient hairline border (mirrors the house Panel pattern). */
.rc-tcl__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--rc-accent-22), transparent 40%, var(--rc-glow-18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.5;
  transition: opacity var(--rc-t) var(--rc-ease);
  pointer-events: none;
}

/* Stage-light wash — a warm/neon bloom behind the block. Tracks the live
   spotlight focus the scroll controller writes (--rc-spot-x). Dim until lit. */
.rc-tcl__stage::after {
  content: "";
  position: absolute;
  inset: -45% -15% auto;
  height: 80%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(60% 100% at var(--rc-spot-x) 0%,
    var(--rc-spotlight) 0%,
    var(--rc-accent) 30%,
    transparent 70%);
  opacity: calc(var(--_lit) * 0.5);
  filter: blur(34px);
  transition: opacity var(--rc-t-slow) var(--rc-ease);
  pointer-events: none;
}

/* Connecting beam between stacked stages — "staircase to the stage". */
.rc-tcl__stage + .rc-tcl__stage::before { content: ""; } /* keep hairline */
.rc-tcl__stage + .rc-tcl__stage {
  margin-top: var(--rc-2);
}
.rc-tcl__stage:not(:first-child) {
  background-image:
    linear-gradient(180deg, var(--rc-void-2), var(--rc-void-3));
}

/* ---- REVEALED STATE ------------------------------------------------------- */
/* JS adds .is-revealed once maxProgress crosses the stage threshold. */
.rc-tcl__stage.is-revealed {
  opacity: 1;
  transform: none;
  filter: none;
  border-color: var(--rc-line-2);
}
.rc-tcl__stage.is-revealed::before { opacity: 1; }
.rc-tcl__stage.is-revealed::after { opacity: var(--_lit); }
.rc-tcl__stage.is-revealed {
  box-shadow: var(--rc-shadow), 0 0 0 1px var(--rc-accent-12);
}

/* ---- PER-STAGE STAGE-LIGHT RAMP (intensifies toward Action) --------------- */
.rc-tcl__stage--curiosity { --_lit: 0.18; }
.rc-tcl__stage--hook      { --_lit: 0.30; }
.rc-tcl__stage--identity  { --_lit: 0.46; }
.rc-tcl__stage--scarcity  { --_lit: 0.66; }
.rc-tcl__stage--action    { --_lit: 0.92; }

/* Hook leans warm (emotional spotlight). */
.rc-tcl__stage--hook::after {
  background: radial-gradient(60% 100% at var(--rc-spot-x) 0%,
    var(--rc-spotlight) 0%, var(--rc-glow) 34%, transparent 70%);
}
/* Identity leans violet-glow ("your people"). */
.rc-tcl__stage--identity::after {
  background: radial-gradient(60% 100% at var(--rc-spot-x) 0%,
    var(--rc-glow) 0%, var(--rc-accent) 38%, transparent 72%);
}
/* Scarcity runs hot/anxious — accent core, urgent ring on reveal. */
.rc-tcl__stage--scarcity.is-revealed {
  border-color: var(--rc-accent-40);
  box-shadow: var(--rc-shadow), 0 0 0 1px var(--rc-accent-22);
}
/* Action is the hottest — its bloom is also driven by the live --rc-stage-heat
   (0..1) JS writes inline as scroll depth into the action stage increases. */
.rc-tcl__stage--action {
  --rc-stage-heat: 0;
}
.rc-tcl__stage--action.is-revealed {
  border-color: var(--rc-accent);
  box-shadow:
    var(--rc-shadow-2),
    0 0 0 1px var(--rc-accent-40),
    0 0 calc(40px + var(--rc-stage-heat, 0) * 60px)
      color-mix(in srgb, var(--rc-accent) calc(20% + var(--rc-stage-heat, 0) * 45%), transparent);
}
.rc-tcl__stage--action::after {
  opacity: calc(var(--_lit) * 0.5 + var(--rc-stage-heat, 0) * 0.4);
  background: radial-gradient(70% 110% at var(--rc-spot-x) 0%,
    var(--rc-spotlight) 0%, var(--rc-accent) 28%, var(--rc-glow) 50%, transparent 74%);
}
.rc-tcl__stage--action.is-revealed::after {
  opacity: calc(var(--_lit) + var(--rc-stage-heat, 0) * 0.5);
}

/* ---- EYEBROW (kicker voice) ----------------------------------------------- */
.rc-tcl__eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--rc-2);
  margin: 0 0 var(--rc-3);
  font-family: var(--rc-font-mono);
  font-size: var(--rc-fs-xs);
  font-weight: 700;
  letter-spacing: var(--rc-track-eyebrow);
  text-transform: uppercase;
  color: var(--rc-accent);
}
.rc-tcl__eyebrow::before {
  content: "";
  width: 1.8em;
  height: 2px;
  border-radius: var(--rc-r-pill);
  background: linear-gradient(90deg, var(--rc-accent), transparent);
}

/* ---- HEAD (punchline header) ---------------------------------------------- */
.rc-tcl__head {
  margin: 0;
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-h2);
  line-height: var(--rc-lh-snug);
  letter-spacing: var(--rc-track-display);
  text-transform: uppercase;
  color: var(--rc-ink);
  text-wrap: balance;
}
.rc-tcl__stage--action .rc-tcl__head {
  text-shadow: 0 0 calc(18px + var(--rc-stage-heat, 0) * 26px) var(--rc-accent-22);
}

/* ---- BODY ----------------------------------------------------------------- */
.rc-tcl__body {
  margin: var(--rc-3) 0 0;
  max-width: 58ch;
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-lead);
  line-height: var(--rc-lh-body);
  color: var(--rc-ink-soft);
}

/* ---- HEAT (host element; stage 4 becomes the seat heat-map grid) ---------- */
/* The container ticket.js renders the seat-glow grid into. Reserve room + frame
   so the grid (.rc-seatglow / .rc-seatglow__seat — out of this contract) sits in
   a tidy lightbox. When empty it stays an invisible spacer. */
.rc-tcl__heat {
  margin-top: var(--rc-4);
}
.rc-tcl__heat:empty {
  display: none;
}
/* Generic heat-bar treatment shared by any .rc-tcl__heat that is given the
   .rc-stage-heat class (a meter-style readout). Width tracks --rc-heat / the
   per-stage --rc-stage-heat the JS writes live. */
.rc-stage-heat,
.rc-tcl__heat.rc-stage-heat {
  position: relative;
  display: block;
  height: 6px;
  margin-top: var(--rc-4);
  border-radius: var(--rc-r-pill);
  background: var(--rc-accent-12);
  border: 1px solid var(--rc-line-2);
  overflow: hidden;
}
.rc-stage-heat::after {
  content: "";
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(clamp(0, var(--rc-stage-heat, var(--rc-heat, 0)), 1));
  background: linear-gradient(90deg, var(--rc-glow), var(--rc-accent));
  box-shadow: var(--rc-neon);
  transition: transform var(--rc-t) var(--rc-ease-out);
}

/* ---- CTA (stage 5) — replicate the marquee CTA look on the bare button ---- */
.rc-tcl__cta {
  --_glow: calc(0.5 + var(--rc-stage-heat, 0) * 0.5);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rc-2);
  margin-top: var(--rc-5);
  padding: 1.05em 2em;
  isolation: isolate;
  overflow: hidden;
  font-family: var(--rc-font-body);
  font-weight: 800;
  font-size: var(--rc-fs-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rc-ink);
  cursor: pointer;
  border: 0;
  border-radius: var(--rc-r-pill);
  background: linear-gradient(96deg, var(--rc-accent), var(--rc-glow));
  box-shadow: var(--rc-neon), var(--rc-neon-glow);
  transition:
    transform var(--rc-t-fast) var(--rc-spring),
    box-shadow var(--rc-t) var(--rc-ease),
    filter var(--rc-t) var(--rc-ease);
}
.rc-tcl__cta:hover {
  transform: translateY(-2px);
  filter: saturate(1.15) brightness(1.06);
}
.rc-tcl__cta:active { transform: translateY(0) scale(0.985); }
.rc-tcl__cta:focus-visible {
  outline: 2px solid var(--rc-accent);
  outline-offset: 3px;
}
/* Marquee light-sweep bar. */
.rc-tcl__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg,
    transparent 0%, rgba(255, 255, 255, 0.55) 18%, transparent 38%);
  transform: translateX(-120%);
  mix-blend-mode: overlay;
}
/* Halo ring — its bloom grows with the live stage heat. */
.rc-tcl__cta::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -2;
  border-radius: inherit;
  background: radial-gradient(60% 120% at 50% 50%, var(--rc-accent-40), transparent 70%);
  filter: blur(8px);
  opacity: var(--_glow);
  transition: opacity var(--rc-t) var(--rc-ease);
}

/* ---- MOTION (gated behind html:not(.reduce-motion)) ----------------------- */
html:not(.reduce-motion) .rc-tcl__cta::before {
  animation: rc-tcl-sweep 3.4s var(--rc-ease) infinite;
}
@keyframes rc-tcl-sweep {
  0%, 60% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}
/* Action-stage idle pulse once revealed — a soft breathing glow on the CTA. */
html:not(.reduce-motion) .rc-tcl__stage--action.is-revealed .rc-tcl__cta {
  animation: rc-tcl-cta-pulse 2.6s var(--rc-ease) infinite;
}
@keyframes rc-tcl-cta-pulse {
  0%, 100% { box-shadow: var(--rc-neon), var(--rc-neon-glow); }
  50%      { box-shadow: var(--rc-neon), var(--rc-neon-glow), 0 0 32px var(--rc-accent-40); }
}
/* Press-fire feedback: JS toggles .is-firing for 450ms on click. */
html:not(.reduce-motion) .rc-tcl__cta.is-firing {
  animation: rc-tcl-fire 0.45s var(--rc-ease-out);
}
@keyframes rc-tcl-fire {
  0%   { transform: scale(0.96); filter: brightness(1.6); }
  100% { transform: scale(1);    filter: brightness(1); }
}
.reduce-motion .rc-tcl__cta.is-firing { filter: brightness(1.25); }

/* ---- REDUCE-MOTION: calm/static fallbacks --------------------------------- */
/* Hidden stages must not blur/translate dramatically when motion is reduced —
   keep them simply dimmed and let opacity cross-fade only. */
.reduce-motion .rc-tcl__stage {
  transform: none;
  filter: none;
  opacity: 0.5;
  transition: opacity var(--rc-t) linear, border-color var(--rc-t) linear;
}
.reduce-motion .rc-tcl__stage.is-revealed { opacity: 1; }

/* ---- DESKTOP LEGIBILITY / SCALE PASS -------------------------------------- */
@media (min-width: 1024px) {
  .rc-tcl {
    gap: var(--rc-8);
  }
  /* Staircase offset — alternate stages drift toward the stage. */
  .rc-tcl__stage {
    padding: clamp(2.2rem, 4vw, 3.4rem) clamp(2.4rem, 5vw, 3.8rem);
  }
  .rc-tcl__stage:nth-child(even) { margin-inline-start: clamp(2rem, 8vw, 6rem); }
  .rc-tcl__stage:nth-child(odd)  { margin-inline-end: clamp(2rem, 8vw, 6rem); }
  .rc-tcl__head { font-size: var(--rc-fs-h1); line-height: var(--rc-lh-tight); }
  .rc-tcl__body { font-size: var(--rc-fs-lead); }
}

@media (min-width: 1600px) {
  .rc-tcl { max-width: var(--rc-maxw-wide); gap: var(--rc-10); }
  .rc-tcl__stage--action .rc-tcl__head { font-size: var(--rc-fs-hero); }
}

/* ###### css-tourmap ###### */
/* =============================================================================
   CSS-TOURMAP — TOUR MAP REALITY LAYER (#tour-map) + CITY PANEL (#city-panel)
   Emitted by tourmap.js. Loaded AFTER realm.css (source-order wins ties).
   Positioning of nodes lives on the SVG <g transform> attribute and node
   radii/fills/opacity are SVG attributes the JS writes live — this CSS never
   overrides those; it layers glow, pulse, state scaling and the panel chrome.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   MAP HOST + SVG STAGE
   -------------------------------------------------------------------------- */
.rc-tourmap {
  position: relative;
  z-index: var(--rc-z-content);
  display: block;
}

.rc-tourmap__svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 560;
  border-radius: var(--rc-r-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 30% 8%, var(--rc-glow-18), transparent 55%),
    radial-gradient(120% 90% at 80% 96%, var(--rc-accent-12), transparent 55%),
    var(--rc-void-3);
  border: 1px solid var(--rc-line);
  box-shadow: var(--rc-shadow);
  -webkit-tap-highlight-color: transparent;
}

/* Faint masked hairline border to echo the panel pattern (drawn over the svg). */
.rc-tourmap {
  isolation: isolate;
}

/* --- realm graticule ------------------------------------------------------ */
.rc-tourmap__grid line {
  stroke: var(--rc-ink);
  stroke-opacity: 0.06;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* --- tour route arc ------------------------------------------------------- */
.rc-tourmap__route {
  pointer-events: none;
}
.rc-tourmap__route-path {
  fill: none;
  stroke: var(--rc-accent);
  stroke-opacity: 0.34;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 5 9;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px var(--rc-accent-22));
}
html:not(.reduce-motion) .rc-tourmap__route-path {
  animation: rc-tourmap-route 14s linear infinite;
}
@keyframes rc-tourmap-route {
  to { stroke-dashoffset: -140; }
}

/* -----------------------------------------------------------------------------
   NODES — core dot + ring + halo. JS sets fill/stroke/r/opacity attributes
   (and updates them live on scarcity ticks) so we never set color here.
   -------------------------------------------------------------------------- */
.rc-tourmap__nodes { isolation: isolate; }

.rc-tourmap__node {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform var(--rc-t) var(--rc-spring),
    filter var(--rc-t) var(--rc-ease);
  outline: none;
}

/* The <g> itself is translated to position via the transform attribute, so we
   scale the inner pieces rather than the group (group transform = position). */
.rc-tourmap__core,
.rc-tourmap__ring,
.rc-tourmap__halo {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform var(--rc-t) var(--rc-spring),
    opacity var(--rc-t) var(--rc-ease);
}

.rc-tourmap__core {
  filter: drop-shadow(0 0 6px currentColor);
}
.rc-tourmap__ring {
  opacity: 0.85;
}
.rc-tourmap__halo {
  pointer-events: none;
}

/* Focus ring for keyboard users (role=button, tabindex=0). */
.rc-tourmap__node:focus-visible .rc-tourmap__ring,
.rc-tourmap__node:focus-visible .rc-tourmap__core {
  transform: scale(1.25);
}
.rc-tourmap__node:focus-visible {
  filter: drop-shadow(0 0 3px var(--rc-ink));
}

/* Hover + active lift the whole node read. */
.rc-tourmap__node:hover .rc-tourmap__core,
.rc-tourmap__node:hover .rc-tourmap__ring {
  transform: scale(1.3);
}
.rc-tourmap__node:hover .rc-tourmap__halo {
  transform: scale(1.18);
}

/* --active — brightest, biggest read. */
.rc-tourmap__node--active .rc-tourmap__core {
  transform: scale(1.45);
  filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 18px currentColor);
}
.rc-tourmap__node--active .rc-tourmap__ring {
  transform: scale(1.45);
  opacity: 1;
}
.rc-tourmap__node--active .rc-tourmap__halo {
  transform: scale(1.32);
}
.rc-tourmap__node--active .rc-tourmap__label {
  opacity: 1;
}

/* --- PULSE (gated behind reduce-motion) ----------------------------------- */
html:not(.reduce-motion) .rc-tourmap__halo {
  animation: rc-tourmap-halo 2.6s var(--rc-ease) infinite;
}
html:not(.reduce-motion) .rc-tourmap__ring {
  animation: rc-tourmap-ring 2.6s var(--rc-ease) infinite;
}
html:not(.reduce-motion) .rc-tourmap__core {
  animation: rc-tourmap-core 2.6s var(--rc-ease) infinite;
}
/* Active node pulses faster + harder. */
html:not(.reduce-motion) .rc-tourmap__node--active .rc-tourmap__halo {
  animation-duration: 1.7s;
}
html:not(.reduce-motion) .rc-tourmap__node--active .rc-tourmap__ring {
  animation-duration: 1.7s;
}
html:not(.reduce-motion) .rc-tourmap__node--active .rc-tourmap__core {
  animation-duration: 1.7s;
}

@keyframes rc-tourmap-halo {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.28); opacity: 1; }
}
@keyframes rc-tourmap-ring {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.14); opacity: 1; }
}
@keyframes rc-tourmap-core {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

/* --still — calm. No pulse (also applied in reduce-motion via not() gate). */
.rc-tourmap__node--still .rc-tourmap__core,
.rc-tourmap__node--still .rc-tourmap__ring,
.rc-tourmap__node--still .rc-tourmap__halo {
  animation: none;
}
.rc-tourmap__node--still .rc-tourmap__halo {
  opacity: 0.6;
}

/* --- city label ----------------------------------------------------------- */
.rc-tourmap__label {
  font-family: var(--rc-font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  fill: var(--rc-ink-soft);
  opacity: 0;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--rc-void);
  stroke-width: 3px;
  stroke-linejoin: round;
  transition: opacity var(--rc-t) var(--rc-ease);
}
.rc-tourmap__node:hover .rc-tourmap__label,
.rc-tourmap__node:focus-visible .rc-tourmap__label {
  opacity: 1;
}

/* SVG-internal gradient/filter id holders. They live in <defs>; ensure no box
   model leaks. (These are the contract classes rc-map-bg / rc-aura as ids.) */
.rc-aura,
.rc-map-bg { /* referenced by url(#...) — no rendered box of their own */ }

/* -----------------------------------------------------------------------------
   LEGEND — instruction line under the map (rc-whisper base from realm.css).
   -------------------------------------------------------------------------- */
.rc-tourmap__legend {
  margin: var(--rc-3) auto 0;
  max-width: 52ch;
  padding-inline: var(--rc-gutter);
  text-align: center;
  font-size: var(--rc-fs-sm);
  line-height: var(--rc-lh-body);
  color: var(--rc-ink-dim);
}
.rc-tourmap__legend-hot {
  color: var(--rc-accent);
  font-weight: 700;
  text-shadow: 0 0 16px var(--rc-accent-40);
}

/* -----------------------------------------------------------------------------
   EMPTY STATE
   -------------------------------------------------------------------------- */
.rc-tourmap__empty {
  margin: 0;
  min-height: 200px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--rc-6) var(--rc-gutter);
  border-radius: var(--rc-r-lg);
  border: 1px dashed var(--rc-line-2);
  background: var(--rc-void-3);
  color: var(--rc-ink-dim);
  font-size: var(--rc-fs-sm);
}

/* -----------------------------------------------------------------------------
   FALLBACK LIST (no SVG support) — accessible clickable rooms.
   -------------------------------------------------------------------------- */
.rc-tourmap__list {
  display: grid;
  gap: var(--rc-3);
  max-width: var(--rc-maxw);
  margin-inline: auto;
}
.rc-tourmap__list > .rc-whisper {
  margin: 0 0 var(--rc-1);
  color: var(--rc-ink-dim);
  font-size: var(--rc-fs-sm);
  text-align: center;
}
.rc-tourmap__list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rc-2);
}
.rc-tourmap__list-btn {
  position: relative;
  width: 100%;
  display: grid;
  gap: 2px;
  text-align: left;
  padding: var(--rc-3) var(--rc-4);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-r);
  background: var(--rc-void-3);
  box-shadow: var(--rc-shadow);
  color: var(--rc-ink);
  cursor: pointer;
  font: inherit;
  transition:
    transform var(--rc-t) var(--rc-spring),
    border-color var(--rc-t) var(--rc-ease),
    box-shadow var(--rc-t) var(--rc-ease);
}
.rc-tourmap__list-btn:hover,
.rc-tourmap__list-btn:focus-visible {
  transform: translateY(-3px);
  border-color: var(--rc-line-2);
  box-shadow: var(--rc-shadow-2), var(--rc-neon);
  outline: none;
}
.rc-tourmap__list-city {
  font-family: var(--rc-font-display);
  text-transform: uppercase;
  font-size: var(--rc-fs-h3);
  line-height: var(--rc-lh-snug);
  letter-spacing: var(--rc-track-display);
}
.rc-tourmap__list-meta {
  font-family: var(--rc-font-mono);
  font-size: var(--rc-fs-xs);
  letter-spacing: 0.06em;
  color: var(--rc-ink-dim);
}
.rc-tourmap__list-seats {
  margin-top: 2px;
  font-size: var(--rc-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--rc-track-eyebrow);
  font-weight: 700;
  color: var(--rc-accent);
}

/* =============================================================================
   CITY PANEL — backstage dossier. JS writes .rc-citypanel__inner into
   #city-panel (which realm.css already frames) and adds .is-open.
   ============================================================================= */
.rc-citypanel__inner {
  position: relative;
  display: grid;
  gap: var(--rc-3);
}
html:not(.reduce-motion) #city-panel.is-open .rc-citypanel__inner {
  animation: rc-citypanel-in 0.5s var(--rc-ease-out) both;
}
@keyframes rc-citypanel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --- header --------------------------------------------------------------- */
.rc-citypanel__head {
  display: grid;
  gap: var(--rc-1);
}
.rc-citypanel__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0;
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-xs);
  font-weight: 700;
  letter-spacing: var(--rc-track-eyebrow);
  text-transform: uppercase;
  color: var(--rc-accent);
}
.rc-citypanel__eyebrow::before {
  content: "";
  width: 1.8em;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--rc-accent), transparent);
}
.rc-citypanel__city {
  margin: 0;
  font-family: var(--rc-font-display);
  text-transform: uppercase;
  font-size: var(--rc-fs-h2);
  line-height: var(--rc-lh-tight);
  letter-spacing: var(--rc-track-display);
  color: var(--rc-ink);
  outline: none;
}
.rc-citypanel__venue {
  margin: 0;
  font-size: var(--rc-fs-sm);
  color: var(--rc-spotlight);
  font-weight: 600;
}
.rc-citypanel__venue time {
  font-family: var(--rc-font-mono);
  font-weight: 400;
  color: var(--rc-ink-dim);
  letter-spacing: 0.06em;
}

/* --- story line ----------------------------------------------------------- */
.rc-citypanel__story {
  margin: 0;
  font-size: var(--rc-fs-lead);
  line-height: var(--rc-lh-body);
  color: var(--rc-ink-soft);
  text-wrap: pretty;
}

/* --- urgency countdown ---------------------------------------------------- */
.rc-citypanel__urgency {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em var(--rc-2);
  padding: var(--rc-2) var(--rc-3);
  border: 1px solid var(--rc-line-2);
  border-radius: var(--rc-r);
  background:
    linear-gradient(120deg, var(--rc-accent-12), transparent 60%),
    var(--rc-void-2);
}
.rc-citypanel__urgency-label {
  font-family: var(--rc-font-mono);
  font-size: var(--rc-fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rc-ink-dim);
}
.rc-citypanel__urgency-clock {
  font-family: var(--rc-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--rc-fs-h3);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rc-accent);
  text-shadow: 0 0 18px var(--rc-accent-40);
}
.rc-citypanel__urgency-clock.is-live {
  color: var(--rc-spotlight);
  text-shadow: 0 0 18px var(--rc-spot-30);
}
html:not(.reduce-motion) .rc-citypanel__urgency-clock.is-live {
  animation: rc-citypanel-live 1.6s var(--rc-ease) infinite;
}
@keyframes rc-citypanel-live {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* --- seats remaining ------------------------------------------------------ */
.rc-citypanel__seats {
  font-family: var(--rc-font-mono);
  font-size: var(--rc-fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rc-spotlight);
}

/* --- price tiers ---------------------------------------------------------- */
.rc-citypanel__tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rc-2);
}
.rc-citypanel__tier {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rc-3);
  padding: var(--rc-2) var(--rc-3);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-r-sm);
  background: var(--rc-void-3);
  transition: border-color var(--rc-t) var(--rc-ease), background var(--rc-t) var(--rc-ease);
}
.rc-citypanel__tier:hover {
  border-color: var(--rc-line-2);
  background: var(--rc-void-2);
}
.rc-citypanel__tier.is-default {
  border-color: var(--rc-accent-40);
  background: var(--rc-accent-12);
}
.rc-citypanel__tier-name {
  font-size: var(--rc-fs-sm);
  font-weight: 600;
  color: var(--rc-ink);
}
.rc-citypanel__tier-price {
  font-family: var(--rc-font-mono);
  font-size: var(--rc-fs-sm);
  font-weight: 700;
  color: var(--rc-spotlight);
  white-space: nowrap;
}

/* --- CTA (reuses the glowing pill look of .rc-btn--cta) ------------------- */
.rc-citypanel__cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  margin-top: var(--rc-1);
  padding: var(--rc-3) var(--rc-5);
  border: 0;
  border-radius: var(--rc-r-pill);
  cursor: pointer;
  font-family: var(--rc-font-display);
  text-transform: uppercase;
  letter-spacing: var(--rc-track-display);
  font-size: var(--rc-fs-lead);
  line-height: 1.05;
  color: var(--rc-void);
  background: linear-gradient(120deg, var(--rc-accent), var(--rc-glow));
  box-shadow: var(--rc-neon-glow), var(--rc-shadow);
  transition:
    transform var(--rc-t) var(--rc-spring),
    box-shadow var(--rc-t) var(--rc-ease);
}
.rc-citypanel__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.42) 50%,
    transparent 80%
  );
  transform: translateX(-120%);
}
html:not(.reduce-motion) .rc-citypanel__cta::before {
  animation: rc-citypanel-sweep 3.4s var(--rc-ease) infinite;
}
@keyframes rc-citypanel-sweep {
  0%, 100% { transform: translateX(-120%); }
  55%, 70% { transform: translateX(120%); }
}
.rc-citypanel__cta:hover,
.rc-citypanel__cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--rc-neon-glow), var(--rc-shadow-2), 0 0 36px var(--rc-accent-40);
  outline: none;
}
.rc-citypanel__cta:active {
  transform: translateY(0);
}
.rc-citypanel__cta-sub {
  font-family: var(--rc-font-mono);
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: var(--rc-fs-xs);
  font-weight: 600;
  opacity: 0.82;
  color: var(--rc-void);
}

/* --- after line (the chilling kicker) ------------------------------------- */
.rc-citypanel__after {
  margin: 0;
  text-align: center;
  font-style: italic;
  font-size: var(--rc-fs-sm);
  line-height: var(--rc-lh-body);
  color: var(--rc-ink-dim);
}

/* =============================================================================
   DESKTOP LEGIBILITY PASS
   ============================================================================= */
@media (min-width: 1024px) {
  .rc-tourmap__label {
    font-size: 14px;
  }
  .rc-citypanel__inner {
    gap: var(--rc-4);
  }
  .rc-citypanel__city {
    font-size: var(--rc-fs-h1);
  }
  .rc-citypanel__tiers {
    grid-template-columns: repeat(2, 1fr);
  }
  .rc-tourmap__list ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1600px) {
  .rc-tourmap__list ul {
    grid-template-columns: repeat(3, 1fr);
  }
  .rc-citypanel__story {
    font-size: var(--rc-fs-h3);
  }
}

/* =============================================================================
   REDUCE-MOTION SAFETY NET — calm/static fallbacks.
   ============================================================================= */
html.reduce-motion .rc-tourmap__route-path,
html.reduce-motion .rc-tourmap__halo,
html.reduce-motion .rc-tourmap__ring,
html.reduce-motion .rc-tourmap__core,
html.reduce-motion .rc-citypanel__cta::before,
html.reduce-motion .rc-citypanel__urgency-clock.is-live,
html.reduce-motion .rc-citypanel__inner {
  animation: none !important;
}
html.reduce-motion .rc-tourmap__route-path {
  stroke-dasharray: none;
}
html.reduce-motion .rc-citypanel__cta::before {
  display: none;
}

/* ###### css-memory ###### */
/* =============================================================================
   COMEDY MEMORY  (#comedy-memory) — dynamic feed authored against content.js
   DOM contract (exact emitted classes only). Loaded AFTER realm.css.
   Reactive props consumed: inline width (featured fill), inline height (heat
   bar), --rc-heat (chip pip, 0..100). All motion gated on html:not(.reduce-motion).
   ============================================================================= */

/* ---- Outer wrapper + section rhythm ------------------------------------- */
.rc-memory {
  display: grid;
  gap: var(--rc-7);
  max-width: var(--rc-maxw);
  margin-inline: auto;
  padding-inline: var(--rc-gutter);
}

/* ---- Section heading (house voice) -------------------------------------- */
.rc-memory__head {
  display: grid;
  gap: var(--rc-2);
  justify-items: center;
  text-align: center;
}
.rc-memory__kicker {
  font-family: var(--rc-font-mono);
  font-size: var(--rc-fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rc-ink-dim);
}
.rc-memory__title {
  font-size: var(--rc-fs-h1);
  line-height: var(--rc-lh-tight);
}
.rc-memory__sub {
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-lead);
  line-height: var(--rc-lh-body);
  color: var(--rc-ink-soft);
  max-width: 56ch;
}

/* ---- Sub-section blocks -------------------------------------------------- */
.rc-memory__moments,
.rc-memory__heatmap,
.rc-memory__favorite {
  display: grid;
  gap: var(--rc-4);
}
.rc-memory__h3 {
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-h3);
  font-weight: 600;
  line-height: var(--rc-lh-snug);
  color: var(--rc-ink);
  font-style: normal;
}
.rc-memory__hint {
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-sm);
  color: var(--rc-ink-dim);
  margin-top: calc(var(--rc-1) * -1);
}

/* ---- Empty state --------------------------------------------------------- */
.rc-memory__empty {
  text-align: center;
  padding: var(--rc-8) var(--rc-gutter);
  border: 1px dashed var(--rc-line-2);
  border-radius: var(--rc-r-lg);
  background: var(--rc-void-2);
  font-size: var(--rc-fs-lead);
}

/* =============================================================================
   MOMENTS — featured rotating card + clickable rail beneath
   ============================================================================= */

/* ---- Featured moment card (mirrors the panel pattern) ------------------- */
.rc-moment-featured {
  position: relative;
  display: grid;
  gap: var(--rc-3);
  padding: clamp(1.4rem, 5vw, 2.4rem);
  border-radius: var(--rc-r-lg);
  background: linear-gradient(180deg, var(--rc-void-2), var(--rc-void-3));
  border: 1px solid var(--rc-line);
  box-shadow: var(--rc-shadow);
  overflow: hidden;
}
/* spotlight wash from the top, warm crowd-glow */
.rc-moment-featured::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(80% 70% at 50% -10%, var(--rc-spot-30), transparent 62%);
  opacity: 0.9;
}
/* masked gradient hairline border */
.rc-moment-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, var(--rc-accent-22), transparent 40%, var(--rc-glow-18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.rc-moment-featured > * { position: relative; z-index: 1; }

/* gentle highlighted "now showing" pulse when the card rotates in */
html:not(.reduce-motion) .rc-moment-featured {
  animation: rc-mem-spotlight 0.7s var(--rc-ease-out) both;
}
@keyframes rc-mem-spotlight {
  0%   { box-shadow: var(--rc-shadow); }
  45%  { box-shadow: var(--rc-shadow), var(--rc-neon); }
  100% { box-shadow: var(--rc-shadow); }
}

.rc-moment-featured__meta {
  display: flex;
  align-items: center;
  gap: var(--rc-3);
  flex-wrap: wrap;
}
.rc-moment-featured__tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--rc-font-body);
  font-style: normal;
  font-weight: 700;
  font-size: var(--rc-fs-xs);
  letter-spacing: var(--rc-track-eyebrow);
  text-transform: uppercase;
  color: var(--rc-accent);
}
.rc-moment-featured__tag::before {
  content: "";
  width: 1.8em;
  height: 2px;
  margin-right: 0.6em;
  border-radius: var(--rc-r-pill);
  background: linear-gradient(90deg, var(--rc-accent), transparent);
}
.rc-moment-featured__city {
  font-family: var(--rc-font-mono);
  font-size: var(--rc-fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rc-ink-dim);
}
.rc-moment-featured__title {
  /* carries .rc-rise — force legible default in case .is-in never toggles */
  font-size: var(--rc-fs-h2);
  line-height: var(--rc-lh-snug);
  color: var(--rc-ink);
  opacity: 1;
  transform: none;
}
/* let allowed motion re-trigger the rise on rotation without hiding text */
html:not(.reduce-motion) .rc-moment-featured__title {
  animation: rc-mem-rise 0.6s var(--rc-ease-out) both;
}
@keyframes rc-mem-rise {
  0%   { opacity: 0; transform: translateY(20px); filter: blur(4px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

/* ---- Featured heat meter (fill width set inline by JS, 0..heat%) -------- */
.rc-moment-featured__meter {
  position: relative;
  height: 10px;
  margin-top: var(--rc-2);
  border-radius: var(--rc-r-pill);
  background: var(--rc-void);
  border: 1px solid var(--rc-line-2);
  overflow: hidden;
}
.rc-moment-featured__fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rc-glow), var(--rc-accent) 55%, var(--rc-spotlight));
  box-shadow: 0 0 16px var(--rc-accent-40);
}
html:not(.reduce-motion) .rc-moment-featured__fill {
  transition: width var(--rc-t-slow) var(--rc-ease-out);
}
/* hot crawl of light along the filled meter */
html:not(.reduce-motion) .rc-moment-featured__meter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--rc-spot-30), transparent);
  transform: translateX(-100%);
  animation: rc-mem-sweep 3.4s var(--rc-ease) infinite;
  pointer-events: none;
}
@keyframes rc-mem-sweep {
  0%   { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* ---- Rail of moment chips ----------------------------------------------- */
.rc-moment-rail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rc-2);
}
.rc-moment-chip {
  display: flex;
  align-items: center;
  gap: var(--rc-3);
  width: 100%;
  text-align: left;
  padding: var(--rc-3) var(--rc-4);
  border-radius: var(--rc-r);
  background: var(--rc-void-3);
  border: 1px solid var(--rc-line);
  color: var(--rc-ink-soft);
  cursor: pointer;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}
html:not(.reduce-motion) .rc-moment-chip {
  transition:
    transform var(--rc-t-fast) var(--rc-ease),
    border-color var(--rc-t-fast) var(--rc-ease),
    box-shadow var(--rc-t-fast) var(--rc-ease),
    background var(--rc-t-fast) var(--rc-ease);
}
.rc-moment-chip:hover {
  transform: translateY(-2px);
  border-color: var(--rc-line-2);
  box-shadow: var(--rc-shadow), var(--rc-neon);
}
.rc-moment-chip:focus-visible {
  outline: none;
  border-color: var(--rc-accent);
  box-shadow: var(--rc-ring);
}
/* selected (currently featured) tab */
.rc-moment-chip[aria-selected="true"] {
  background: var(--rc-accent-12);
  border-color: var(--rc-accent-40);
  color: var(--rc-ink);
  box-shadow: var(--rc-shadow), var(--rc-neon);
}
.rc-moment-chip__title {
  flex: 1 1 auto;
  font-family: var(--rc-font-body);
  font-weight: 600;
  font-size: var(--rc-fs-body);
  line-height: var(--rc-lh-snug);
  color: inherit;
}
.rc-moment-chip__city {
  flex: 0 0 auto;
  font-family: var(--rc-font-mono);
  font-size: var(--rc-fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rc-ink-dim);
}
/* tiny heat pip — intensity from inline --rc-heat (0..100) */
.rc-moment-chip__heat {
  flex: 0 0 auto;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: var(--rc-accent);
  /* hotter -> more opaque + warmer toward spotlight */
  opacity: calc(0.28 + (var(--rc-heat, 0) / 100) * 0.72);
  box-shadow: 0 0 calc(2px + (var(--rc-heat, 0) / 100) * 12px) var(--rc-spot-30);
}

/* =============================================================================
   HEAT MAP — vertical bars; each bar height set inline by JS (0..pct%)
   ============================================================================= */
.rc-heat {
  display: flex;
  align-items: flex-end;
  gap: clamp(6px, 2vw, 14px);
  height: clamp(150px, 32vw, 240px);
  padding: var(--rc-4) var(--rc-4) var(--rc-2);
  border-radius: var(--rc-r-lg);
  background:
    radial-gradient(120% 80% at 50% 100%, var(--rc-accent-12), transparent 70%),
    var(--rc-void-3);
  border: 1px solid var(--rc-line);
  box-shadow: var(--rc-shadow);
}
.rc-heat__col {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--rc-1);
}
/* the column's vertical track the bar grows inside */
.rc-heat__track {
  flex: 1 1 auto;
  width: 100%;
  min-width: 6px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.rc-heat__bar {
  display: block;
  width: 100%;
  max-width: 56px;
  height: 0%;            /* JS sets inline height to target pct */
  border-radius: var(--rc-r-sm) var(--rc-r-sm) 2px 2px;
  /* glow accent -> spotlight by intensity (bottom hot, top cool-neon) */
  background: linear-gradient(180deg, var(--rc-spotlight), var(--rc-accent) 58%, var(--rc-glow));
  box-shadow: 0 0 14px var(--rc-accent-22), inset 0 1px 0 rgba(255,255,255,0.12);
}
html:not(.reduce-motion) .rc-heat__bar {
  transition: height var(--rc-t-slow) var(--rc-ease-out);
}
.rc-heat__val {
  font-family: var(--rc-font-mono);
  font-size: var(--rc-fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--rc-spotlight);
}
.rc-heat__label {
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-xs);
  line-height: 1.2;
  text-align: center;
  color: var(--rc-ink-dim);
  word-break: break-word;
}

/* =============================================================================
   FAVORITE JOKE — big pull-quote + caption
   ============================================================================= */
.rc-fav {
  position: relative;
  margin: 0;
  padding: clamp(1.8rem, 6vw, 3.2rem);
  border-radius: var(--rc-r-xl);
  text-align: center;
  background:
    radial-gradient(70% 90% at 50% 0%, var(--rc-spot-30), transparent 60%),
    var(--rc-void-3);
  border: 1px solid var(--rc-line);
  box-shadow: var(--rc-shadow);
  overflow: hidden;
}
.rc-fav__quote {
  position: relative;
  margin: 0;
  font-size: var(--rc-fs-h2);
  line-height: var(--rc-lh-snug);
  color: var(--rc-ink);
}
.rc-fav__quote::before {
  content: "\201C";
  display: block;
  font-family: var(--rc-font-display);
  font-size: 2.4em;
  line-height: 0.4;
  color: var(--rc-accent-40);
  margin-bottom: 0.1em;
}
.rc-fav__cap {
  margin-top: var(--rc-4);
  font-family: var(--rc-font-mono);
  font-size: var(--rc-fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rc-ink-dim);
}

/* =============================================================================
   DESKTOP LEGIBILITY / SCALE PASS
   ============================================================================= */
@media (min-width: 1024px) {
  .rc-memory { gap: var(--rc-9); }

  /* moments laid out as featured card beside the rail */
  .rc-memory__moments {
    grid-template-columns: 1.5fr 1fr;
    grid-template-areas:
      "head head"
      "feat rail";
    align-items: start;
    column-gap: var(--rc-6);
    row-gap: var(--rc-4);
  }
  .rc-memory__moments > .rc-memory__h3 { grid-area: head; }
  .rc-moment-featured { grid-area: feat; height: 100%; }
  .rc-moment-rail {
    grid-area: rail;
    align-content: start;
    max-height: 100%;
    overflow: auto;
  }

  .rc-moment-featured__title { font-size: var(--rc-fs-h1); }
  .rc-fav__quote { font-size: var(--rc-fs-h1); }

  .rc-heat { height: clamp(220px, 22vw, 300px); gap: clamp(10px, 1.4vw, 18px); }
  .rc-heat__label { font-size: var(--rc-fs-sm); }
}

@media (min-width: 1600px) {
  .rc-memory { max-width: var(--rc-maxw-wide); }
  .rc-moment-featured__title,
  .rc-fav__quote { font-size: var(--rc-fs-hero); }
}

/* =============================================================================
   REDUCE-MOTION — calm/static (defensive; base already gates animation)
   ============================================================================= */
html.reduce-motion .rc-moment-featured,
html.reduce-motion .rc-moment-featured__title,
html.reduce-motion .rc-moment-featured__fill,
html.reduce-motion .rc-heat__bar,
html.reduce-motion .rc-moment-chip {
  animation: none !important;
  transition: none !important;
}
html.reduce-motion .rc-moment-featured__title { opacity: 1 !important; transform: none !important; }
html.reduce-motion .rc-moment-featured__meter::after { display: none !important; }

/* ###### css-stagedoor ###### */
/* ============================================================================
   STAGE DOOR — Instant Purchase Portal checkout overlay (#stage-door)
   Emitted by ticket.js as .rc-stagedoor (+ is-open / is-loading / is-handoff /
   is-success / is-animating). "Buying = stepping onstage." Mobile-first base,
   desktop legibility pass at >=1024px, ultrawide polish at >=1600px.
   Reactive props consumed: --rc-spot-x, --rc-spot-y, --rc-seat-cols.
   ============================================================================ */

/* ---- Overlay host + dimming scrim ---------------------------------------- */
.rc-stagedoor {
  position: fixed;
  inset: 0;
  z-index: var(--rc-z-stagedoor);
  display: grid;
  place-items: center;
  padding: var(--rc-gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--rc-t) var(--rc-ease), visibility var(--rc-t);
}
.rc-stagedoor.is-open { opacity: 1; visibility: visible; }

.rc-stagedoor__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  cursor: pointer;
  background:
    radial-gradient(120% 90% at var(--rc-spot-x, 50%) var(--rc-spot-y, 34%),
      rgba(8,6,16,0.55), rgba(2,1,6,0.86) 70%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
          backdrop-filter: blur(12px) saturate(115%);
}

/* ---- The panel — you step into the light --------------------------------- */
.rc-stagedoor__panel {
  position: relative;
  z-index: 2;
  width: min(100%, 560px);
  max-height: 90svh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.5rem, 6vw, 2.8rem);
  border: 1px solid var(--rc-line-2);
  border-radius: var(--rc-r-xl);
  color: var(--rc-ink);
  background:
    radial-gradient(120% 60% at 50% -12%, var(--rc-spot-30), transparent 60%),
    linear-gradient(180deg, var(--rc-void-2), var(--rc-void-3));
  box-shadow: var(--rc-shadow-2), 0 0 90px var(--rc-accent-22);
  text-align: center;
}
/* Masked gradient hairline border — native panel signature */
.rc-stagedoor__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, var(--rc-accent-22), transparent 40%, var(--rc-glow-18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.rc-stagedoor__panel > * { position: relative; z-index: 1; }

/* Success panel runs warmer + brighter — the held breath after the laugh. */
.rc-stagedoor__panel--success {
  background:
    radial-gradient(70% 46% at var(--rc-spot-x, 50%) -6%, var(--rc-spot-30), transparent 62%),
    radial-gradient(120% 70% at 50% 120%, var(--rc-glow-18), transparent 60%),
    linear-gradient(180deg, var(--rc-void-2), var(--rc-void-3));
  box-shadow: var(--rc-shadow-2), 0 0 110px var(--rc-accent-22), 0 0 160px var(--rc-spot-30);
}

/* Entrance: panel rises into the spotlight (motion-gated) */
.rc-stagedoor__panel {
  transform: translateY(26px) scale(0.97);
  opacity: 0;
  transition:
    transform var(--rc-t-slow) var(--rc-spring),
    opacity var(--rc-t) var(--rc-ease-out);
}
.rc-stagedoor.is-open .rc-stagedoor__panel { transform: none; opacity: 1; }
html.reduce-motion .rc-stagedoor__panel { transform: none; transition: opacity var(--rc-t) var(--rc-ease); }

/* ---- Spotlight bloom behind the success head ----------------------------- */
.rc-stagedoor__spotlight {
  position: absolute;
  top: -54px;
  left: var(--rc-spot-x, 50%);
  transform: translateX(-50%);
  z-index: 0;
  width: 78%;
  height: 180px;
  pointer-events: none;
  background: radial-gradient(50% 100% at 50% 0%, var(--rc-spotlight), transparent 72%);
  filter: blur(8px);
  opacity: 0.62;
}
html:not(.reduce-motion) .rc-stagedoor.is-success .rc-stagedoor__spotlight {
  animation: rc-sd-bloom 4.6s var(--rc-ease) infinite;
}
@keyframes rc-sd-bloom {
  0%, 100% { opacity: 0.5;  transform: translateX(-50%) scaleY(0.96); }
  50%      { opacity: 0.74; transform: translateX(-50%) scaleY(1.04); }
}

/* ---- Close affordance ----------------------------------------------------- */
.rc-stagedoor__x {
  position: absolute;
  top: var(--rc-3);
  right: var(--rc-3);
  z-index: 4;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: var(--rc-fs-h3);
  line-height: 1;
  color: var(--rc-ink-soft);
  background: rgba(0,0,0,0.42);
  border: 1px solid var(--rc-line-2);
  border-radius: var(--rc-r-pill);
  cursor: pointer;
  transition: color var(--rc-t-fast) var(--rc-ease),
              box-shadow var(--rc-t-fast) var(--rc-ease),
              transform var(--rc-t-fast) var(--rc-ease);
}
.rc-stagedoor__x:hover,
.rc-stagedoor__x:focus-visible {
  color: var(--rc-accent);
  box-shadow: var(--rc-neon);
  outline: none;
}
.rc-stagedoor__x:active { transform: scale(0.92); }

/* ---- Eyebrow / head / body ----------------------------------------------- */
.rc-stagedoor__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--rc-fs-xs);
  font-weight: 700;
  letter-spacing: var(--rc-track-eyebrow);
  text-transform: uppercase;
  color: var(--rc-spotlight);
}
.rc-stagedoor__eyebrow::before {
  content: "";
  width: 1.8em;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--rc-spotlight), transparent);
}

.rc-stagedoor__head {
  margin-top: var(--rc-2);
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-h1);
  line-height: var(--rc-lh-tight);
  letter-spacing: var(--rc-track-display);
  text-transform: uppercase;
  text-wrap: balance;
}
.rc-stagedoor__head:focus { outline: none; }

.rc-stagedoor__body {
  margin-top: var(--rc-3);
  font-size: var(--rc-fs-lead);
  line-height: var(--rc-lh-body);
  color: var(--rc-ink-soft);
}
.rc-stagedoor__body strong { color: var(--rc-ink); }

/* ---- Loading state -------------------------------------------------------- */
.rc-stagedoor__loading {
  margin-top: var(--rc-4);
  font-family: var(--rc-font-mono);
  font-size: var(--rc-fs-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rc-ink-dim);
}
.rc-stagedoor__spinner {
  width: 56px;
  height: 56px;
  margin: var(--rc-2) auto 0;
  border-radius: 50%;
  border: 2px solid var(--rc-line-2);
  border-top-color: var(--rc-accent);
  border-right-color: var(--rc-glow);
  box-shadow: 0 0 28px var(--rc-accent-40);
}
html:not(.reduce-motion) .rc-stagedoor__spinner {
  animation: rc-sd-spin 0.9s linear infinite;
}
@keyframes rc-sd-spin { to { transform: rotate(360deg); } }
/* reduce-motion: a calm pulsing ring instead of a spin */
html.reduce-motion .rc-stagedoor__spinner {
  border-top-color: var(--rc-accent);
  border-right-color: var(--rc-line-2);
  opacity: 0.85;
}

/* ---- Success confirm wrapper --------------------------------------------- */
.rc-stagedoor__confirm {
  /* primary CTA — glowing gradient pill, accent -> glow */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 100%;
  padding: 0.95em 1.4em;
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-body);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--rc-void);
  background: linear-gradient(120deg, var(--rc-accent), var(--rc-glow));
  border: 0;
  border-radius: var(--rc-r-pill);
  box-shadow: var(--rc-neon-glow), 0 10px 30px var(--rc-accent-22);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: transform var(--rc-t-fast) var(--rc-spring),
              box-shadow var(--rc-t-fast) var(--rc-ease);
}
.rc-stagedoor__confirm:hover { transform: translateY(-2px); box-shadow: var(--rc-neon-glow), 0 16px 40px var(--rc-accent-40); }
.rc-stagedoor__confirm:active { transform: translateY(0) scale(0.99); }
.rc-stagedoor__confirm:focus-visible { outline: 2px solid var(--rc-spotlight); outline-offset: 3px; }
/* light-sweep marquee */
.rc-stagedoor__confirm::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  transform: translateX(-120%);
}
html:not(.reduce-motion) .rc-stagedoor__confirm::after {
  animation: rc-sd-sweep 3.4s var(--rc-ease) infinite;
}
@keyframes rc-sd-sweep {
  0%, 60% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}
.rc-stagedoor__confirm [data-confirm-total] { font-variant-numeric: tabular-nums; }

/* ---- Order summary -------------------------------------------------------- */
.rc-stagedoor__order {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rc-2);
  margin: var(--rc-5) 0 0;
  padding: var(--rc-3) var(--rc-4);
  text-align: left;
  background: var(--rc-void-3);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-r-lg);
  box-shadow: var(--rc-shadow);
}
.rc-stagedoor__order > div { display: grid; gap: 2px; }
.rc-stagedoor__order > div:last-child { text-align: right; }
.rc-stagedoor__order dt {
  font-family: var(--rc-font-mono);
  font-size: var(--rc-fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rc-ink-dim);
}
.rc-stagedoor__order dd {
  margin: 0;
  font-size: var(--rc-fs-lead);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rc-ink);
}
.rc-stagedoor__orderid {
  font-family: var(--rc-font-mono);
  font-size: var(--rc-fs-body) !important;
  letter-spacing: 0.06em;
  color: var(--rc-accent) !important;
  text-shadow: 0 0 18px var(--rc-accent-40);
  word-break: break-all;
}

/* ---- VIP upgrade row (a checkbox label) ---------------------------------- */
.rc-stagedoor__upgrade {
  display: flex;
  align-items: center;
  gap: var(--rc-3);
  margin-top: var(--rc-4);
  padding: var(--rc-3) var(--rc-4);
  text-align: left;
  cursor: pointer;
  background: var(--rc-void-3);
  border: 1px solid var(--rc-line-2);
  border-radius: var(--rc-r-lg);
  box-shadow: var(--rc-shadow);
  transition: border-color var(--rc-t-fast) var(--rc-ease),
              box-shadow var(--rc-t-fast) var(--rc-ease),
              transform var(--rc-t-fast) var(--rc-ease);
}
.rc-stagedoor__upgrade:hover { transform: translateY(-2px); box-shadow: var(--rc-shadow-2), var(--rc-neon); }
.rc-stagedoor__upgrade input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--rc-accent);
  cursor: pointer;
}
.rc-stagedoor__upgrade:has(input:checked) {
  border-color: var(--rc-accent);
  box-shadow: var(--rc-shadow-2), 0 0 0 1px var(--rc-accent-40), var(--rc-neon);
}
.rc-stagedoor__upgrade-body {
  display: grid;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}
.rc-stagedoor__upgrade-name {
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-h3);
  line-height: var(--rc-lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--rc-track-display);
}
.rc-stagedoor__upgrade-desc {
  font-size: var(--rc-fs-sm);
  line-height: var(--rc-lh-body);
  color: var(--rc-ink-soft);
}
.rc-stagedoor__upgrade-price {
  flex: 0 0 auto;
  align-self: center;
  font-size: var(--rc-fs-lead);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--rc-spotlight);
  text-shadow: 0 0 22px var(--rc-spot-30);
}

/* ---- Bring-a-friend bundle ------------------------------------------------ */
.rc-stagedoor__bundle {
  margin-top: var(--rc-4);
  padding: var(--rc-3) var(--rc-4);
  text-align: center;
  background: linear-gradient(180deg, var(--rc-void-2), var(--rc-void-3));
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-r-lg);
  box-shadow: var(--rc-shadow);
}
.rc-stagedoor__bundle-head {
  font-size: var(--rc-fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--rc-ink-soft);
}
.rc-stagedoor__bundle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rc-3);
  margin-top: var(--rc-3);
}
.rc-stagedoor__bundle-note {
  margin-top: var(--rc-3);
  font-size: var(--rc-fs-xs);
  line-height: var(--rc-lh-body);
  color: var(--rc-ink-dim);
}
.rc-stagedoor__bundle-note strong {
  color: var(--rc-accent);
  font-variant-numeric: tabular-nums;
}

/* friend stepper buttons */
.rc-stagedoor__friend {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: var(--rc-fs-h3);
  line-height: 1;
  color: var(--rc-ink);
  background: var(--rc-void);
  border: 1px solid var(--rc-line-2);
  border-radius: var(--rc-r-pill);
  cursor: pointer;
  transition: color var(--rc-t-fast) var(--rc-ease),
              border-color var(--rc-t-fast) var(--rc-ease),
              box-shadow var(--rc-t-fast) var(--rc-ease),
              transform var(--rc-t-fast) var(--rc-spring);
}
.rc-stagedoor__friend:hover {
  color: var(--rc-accent);
  border-color: var(--rc-accent);
  box-shadow: var(--rc-neon);
}
.rc-stagedoor__friend:active { transform: scale(0.9); }
.rc-stagedoor__friend:focus-visible { outline: 2px solid var(--rc-accent); outline-offset: 2px; }

.rc-stagedoor__friend-count {
  min-width: 11ch;
  font-size: var(--rc-fs-body);
  color: var(--rc-ink-soft);
  font-variant-numeric: tabular-nums;
}
.rc-stagedoor__friend-count strong {
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-h3);
  color: var(--rc-accent);
  text-shadow: 0 0 18px var(--rc-accent-40);
}

/* ---- Actions row + share + links ----------------------------------------- */
.rc-stagedoor__actions {
  display: grid;
  gap: var(--rc-3);
  margin-top: var(--rc-5);
}
.rc-stagedoor__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 100%;
  padding: 0.8em 1.2em;
  font-size: var(--rc-fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rc-ink);
  background: var(--rc-accent-12);
  border: 1px solid var(--rc-line-2);
  border-radius: var(--rc-r-pill);
  cursor: pointer;
  transition: color var(--rc-t-fast) var(--rc-ease),
              border-color var(--rc-t-fast) var(--rc-ease),
              background var(--rc-t-fast) var(--rc-ease);
}
.rc-stagedoor__share:hover { color: var(--rc-accent); border-color: var(--rc-accent); background: var(--rc-accent-22); }
.rc-stagedoor__share:focus-visible { outline: 2px solid var(--rc-accent); outline-offset: 2px; }

.rc-stagedoor__link {
  color: var(--rc-accent);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--rc-accent-40);
  transition: color var(--rc-t-fast) var(--rc-ease), border-color var(--rc-t-fast) var(--rc-ease);
}
.rc-stagedoor__link:hover { color: var(--rc-spotlight); border-color: var(--rc-spotlight); }

/* ---- Fine print ----------------------------------------------------------- */
.rc-stagedoor__fine {
  margin-top: var(--rc-3);
  font-size: var(--rc-fs-xs);
  line-height: var(--rc-lh-body);
  color: var(--rc-ink-dim);
  text-align: center;
}

/* ===========================================================================
   SEAT HEAT-MAP GLOW  (.rc-seatglow grid of .rc-seatglow__seat)
   Columns from inline --rc-seat-cols; seats toggle .is-taken / .is-open.
   "Taken" seats glow hot (the room filling); open seats sit dim.
   =========================================================================== */
.rc-seatglow {
  display: grid;
  grid-template-columns: repeat(var(--rc-seat-cols, 24), 1fr);
  gap: clamp(2px, 0.5vw, 4px);
  width: 100%;
  padding: var(--rc-2);
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-r);
  background:
    radial-gradient(120% 80% at 50% 120%, var(--rc-accent-12), transparent 60%),
    var(--rc-void-3);
  box-shadow: var(--rc-shadow);
}
.rc-seatglow__seat {
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  background: var(--rc-void);
  border: 1px solid var(--rc-line);
  transition: background var(--rc-t) var(--rc-ease),
              box-shadow var(--rc-t) var(--rc-ease),
              opacity var(--rc-t) var(--rc-ease);
}
/* Open seats = dim, waiting. */
.rc-seatglow__seat.is-open {
  background: var(--rc-void);
  opacity: 0.4;
}
/* Taken seats = lit, hot — the crowd is arriving. */
.rc-seatglow__seat.is-taken {
  background: linear-gradient(160deg, var(--rc-accent), var(--rc-glow));
  border-color: transparent;
  box-shadow: 0 0 8px var(--rc-accent-40);
  opacity: 1;
}
html:not(.reduce-motion) .rc-seatglow__seat.is-taken {
  animation: rc-seat-ignite var(--rc-t-slow) var(--rc-ease-out) both;
}
@keyframes rc-seat-ignite {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
html.reduce-motion .rc-seatglow__seat { transition: background var(--rc-t) var(--rc-ease); }

/* expose the column-count token name for the contract */
.rc-seat-cols { --rc-seat-cols: 24; }

/* ===========================================================================
   DESKTOP LEGIBILITY PASS
   =========================================================================== */
@media (min-width: 1024px) {
  .rc-stagedoor__panel { width: min(100%, 600px); padding: clamp(2rem, 3vw, 3rem); }
  .rc-stagedoor__head { font-size: var(--rc-fs-hero); }
  .rc-stagedoor__actions {
    grid-template-columns: 1.4fr 1fr;
    align-items: stretch;
  }
  .rc-stagedoor__share { text-transform: none; letter-spacing: 0.02em; }
}

@media (min-width: 1600px) {
  .rc-stagedoor__panel { width: min(100%, 660px); }
  .rc-stagedoor__spotlight { height: 220px; }
}

/* ###### css-vcg ###### */
/* ===========================================================================
 * 16 — #vcg  VIRAL CLIP GENERATOR  (live-emitted vocabulary)
 * Premium 9:16 TikTok/Reels export frames. Stage-void + neon + spotlight.
 * Mobile-first; desktop legibility pass at >=1024px; wide pass at >=1600px.
 * All motion gated behind html:not(.reduce-motion). Drives stagger off --vcg-i.
 * ========================================================================= */

/* --- mount + section header --------------------------------------------- */
.vcg-mounted {
  position: relative;
  z-index: var(--rc-z-content);
  display: grid;
  gap: var(--rc-7);
  max-width: var(--rc-maxw-wide);
  margin-inline: auto;
  padding-inline: var(--rc-gutter);
}

.vcg-header {
  display: grid;
  gap: var(--rc-3);
  justify-items: center;
  text-align: center;
  max-width: var(--rc-maxw);
  margin-inline: auto;
}

.vcg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-xs);
  font-weight: 700;
  letter-spacing: var(--rc-track-eyebrow);
  text-transform: uppercase;
  color: var(--rc-accent);
}
.vcg-eyebrow::before {
  content: "";
  width: 1.8em;
  height: 2px;
  border-radius: var(--rc-r-pill);
  background: linear-gradient(90deg, var(--rc-accent), transparent);
}

.vcg-headline {
  font-family: var(--rc-font-display);
  font-size: var(--rc-fs-h1);
  line-height: var(--rc-lh-tight);
  letter-spacing: var(--rc-track-display);
  text-transform: uppercase;
  color: var(--rc-ink);
  text-shadow: 0 0 30px var(--rc-accent-22);
  margin: 0;
}

.vcg-lede {
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-lead);
  line-height: var(--rc-lh-body);
  color: var(--rc-ink-soft);
  max-width: 56ch;
  margin: 0;
}

/* --- empty state -------------------------------------------------------- */
.vcg-empty {
  font-family: var(--rc-font-mono);
  font-size: var(--rc-fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rc-ink-dim);
  text-align: center;
  padding: var(--rc-8) var(--rc-gutter);
  border: 1px dashed var(--rc-line-2);
  border-radius: var(--rc-r-lg);
  background: linear-gradient(180deg, var(--rc-void-2), var(--rc-void-3));
}

/* --- grid --------------------------------------------------------------- */
.vcg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rc-5);
  width: 100%;
}

/* --- card --------------------------------------------------------------- */
.vcg-card {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--rc-3);
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}
/* Per-card entrance stagger driven by the inline --vcg-i index. */
html:not(.reduce-motion) .vcg-card.rc-rise {
  transition-delay: calc(var(--vcg-i, 0) * 0.07s);
}

/* --- 9:16 poster frame -------------------------------------------------- */
.vcg-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--rc-r-xl);
  border: 1px solid var(--rc-line-2);
  background:
    radial-gradient(80% 50% at 50% 12%, var(--rc-spot-30), transparent 60%),
    linear-gradient(180deg, var(--rc-void-2), #030208);
  box-shadow: var(--rc-shadow-2);
  display: grid;
  isolation: isolate;
  transition:
    transform var(--rc-t) var(--rc-spring),
    box-shadow var(--rc-t) var(--rc-ease);
}
.vcg-card:hover .vcg-frame,
.vcg-card:focus-within .vcg-frame {
  box-shadow: var(--rc-shadow-2), var(--rc-neon);
}
html:not(.reduce-motion) .vcg-card:hover .vcg-frame {
  transform: translateY(-4px);
}

/* Masked gradient hairline border (native panel pattern). */
.vcg-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    var(--rc-accent-22),
    transparent 40%,
    var(--rc-glow-18)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Void variant — no poster image; lean harder on the spotlight wash. */
.vcg-frame--void {
  background:
    radial-gradient(70% 50% at var(--rc-spot-x) 14%, var(--rc-spot-30), transparent 62%),
    radial-gradient(120% 80% at 50% 120%, var(--rc-glow-18), transparent 60%),
    linear-gradient(180deg, var(--rc-void-2), var(--rc-void));
}

/* Poster image fills the frame. */
.vcg-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vcg-poster.is-broken { display: none; }

/* Legibility scrim over media. */
.vcg-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 2, 8, 0.55) 0%, transparent 26%),
    linear-gradient(180deg, transparent 35%, rgba(3, 2, 8, 0.92));
}

/* All overlay layers share a padded stack above the scrim. */
.vcg-top,
.vcg-hook,
.vcg-caption,
.vcg-heat,
.vcg-mark {
  position: absolute;
  z-index: 4;
  left: var(--rc-4);
  right: var(--rc-4);
}

/* --- top strip: handle + duration --------------------------------------- */
.vcg-top {
  top: var(--rc-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-2);
}
.vcg-handle {
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-sm);
  font-weight: 700;
  color: var(--rc-ink);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.vcg-handle::before {
  content: "@";
  color: var(--rc-spotlight);
  margin-right: 0.08em;
}
.vcg-dur {
  flex: none;
  display: inline-flex;
  align-items: center;
  font-family: var(--rc-font-mono);
  font-size: var(--rc-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--rc-ink);
  padding: 0.28em 0.6em;
  border-radius: var(--rc-r-pill);
  background: rgba(3, 2, 8, 0.6);
  border: 1px solid var(--rc-line-2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* --- hook overlay (the scroll-stopper) ---------------------------------- */
.vcg-hook {
  top: 38%;
  display: grid;
  place-items: start;
}
.vcg-hook-text {
  margin: 0;
  font-family: var(--rc-font-display);
  font-size: clamp(1.5rem, 8.5vw, 2.4rem);
  line-height: var(--rc-lh-snug);
  letter-spacing: var(--rc-track-display);
  text-transform: uppercase;
  color: var(--rc-ink);
  text-shadow:
    0 2px 18px rgba(0, 0, 0, 0.85),
    0 0 30px var(--rc-accent-22);
}

/* --- reaction-cut caption beat (the landing line) ----------------------- */
.vcg-caption {
  bottom: calc(var(--rc-9) + var(--rc-6));
  display: flex;
}
.vcg-caption-text {
  display: inline;
  font-family: var(--rc-font-body);
  font-weight: 800;
  font-size: var(--rc-fs-body);
  line-height: 1.35;
  color: var(--rc-void);
  background: var(--rc-spotlight);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.12em 0.4em;
  border-radius: var(--rc-r-sm);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
}

/* --- reaction heat row -------------------------------------------------- */
.vcg-heat {
  bottom: calc(var(--rc-8) + var(--rc-3));
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}
.vcg-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.36em;
  padding: 0.3em 0.7em;
  border-radius: var(--rc-r-pill);
  background: rgba(3, 2, 8, 0.58);
  border: 1px solid var(--rc-line-2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-xs);
  color: var(--rc-ink);
}
/* Modifier stem .vcg-pill--{kind} — accent-tints the applause beat hot. */
.vcg-pill--applause {
  background: var(--rc-accent-12);
  border-color: var(--rc-accent-40);
}
.vcg-pill-glyph {
  font-size: 1.05em;
  line-height: 1;
}
.vcg-pill-num {
  font-family: var(--rc-font-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rc-ink);
}

/* --- CTA watermark (always-on conversion seed) -------------------------- */
.vcg-mark {
  bottom: var(--rc-4);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  width: max-content;
  margin: 0;
  padding: 0.5em 0.95em;
  border: 0;
  cursor: pointer;
  border-radius: var(--rc-r-pill);
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rc-void);
  background: linear-gradient(96deg, var(--rc-accent), var(--rc-glow));
  box-shadow: var(--rc-neon-glow);
  transition:
    transform var(--rc-t-fast) var(--rc-spring),
    box-shadow var(--rc-t-fast) var(--rc-ease);
}
.vcg-mark:hover,
.vcg-mark:focus-visible {
  box-shadow: var(--rc-neon-glow), var(--rc-neon);
  outline: none;
}
html:not(.reduce-motion) .vcg-mark:hover {
  transform: translateY(-2px);
}
.vcg-mark-dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--rc-void);
  box-shadow: 0 0 0 3px rgba(7, 6, 10, 0.35);
  flex: none;
}
html:not(.reduce-motion) .vcg-mark-dot {
  animation: vcg-mark-pulse 1.8s var(--rc-ease) infinite;
}
@keyframes vcg-mark-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.7); }
}
.vcg-mark-text { white-space: nowrap; }

/* --- card footer: title + share ----------------------------------------- */
.vcg-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rc-3);
  padding-inline: var(--rc-1);
}
.vcg-meta {
  display: grid;
  gap: 0.2em;
  min-width: 0;
}
.vcg-title {
  margin: 0;
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-body);
  font-weight: 700;
  line-height: 1.2;
  color: var(--rc-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vcg-sub {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--rc-fs-xs);
  color: var(--rc-ink-dim);
}
.vcg-city {
  display: inline-flex;
  align-items: center;
  font-family: var(--rc-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rc-ink-soft);
}
.vcg-city::after {
  content: "·";
  margin-left: 0.5em;
  color: var(--rc-ink-ghost);
}
.vcg-total {
  font-family: var(--rc-font-mono);
  letter-spacing: 0.06em;
  color: var(--rc-ink-dim);
}

.vcg-share {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1.1em;
  cursor: pointer;
  border-radius: var(--rc-r-pill);
  border: 1px solid var(--rc-line-2);
  background: var(--rc-void-3);
  color: var(--rc-ink);
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  transition:
    transform var(--rc-t) var(--rc-spring),
    box-shadow var(--rc-t) var(--rc-ease),
    color var(--rc-t) var(--rc-ease),
    border-color var(--rc-t) var(--rc-ease);
}
.vcg-share::before {
  content: "↗";
  font-size: 1.05em;
  line-height: 1;
  color: var(--rc-accent);
}
.vcg-share:hover,
.vcg-share:focus-visible {
  color: var(--rc-accent);
  border-color: var(--rc-accent-40);
  box-shadow: var(--rc-neon);
  outline: none;
}
html:not(.reduce-motion) .vcg-share:hover {
  transform: translateY(-3px);
}

/* --- macro "share the whole night" rail --------------------------------- */
.vcg-rail {
  position: relative;
  display: grid;
  gap: var(--rc-4);
  justify-items: center;
  text-align: center;
  padding: var(--rc-7) var(--rc-gutter);
  border-radius: var(--rc-r-lg);
  border: 1px solid var(--rc-line);
  background: linear-gradient(180deg, var(--rc-void-2), var(--rc-void-3));
  box-shadow: var(--rc-shadow);
  overflow: hidden;
}
.vcg-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    70% 120% at 50% 0%,
    var(--rc-spot-30),
    transparent 60%
  );
}
.vcg-rail > * { position: relative; z-index: 1; }
.vcg-rail-copy {
  margin: 0;
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-lead);
  color: var(--rc-ink-soft);
  max-width: 44ch;
}
.vcg-rail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 0;
  padding: 0.95em 1.8em;
  border-radius: var(--rc-r-pill);
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-body);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rc-void);
  background: linear-gradient(96deg, var(--rc-accent), var(--rc-glow));
  box-shadow: var(--rc-neon-glow);
  transition:
    transform var(--rc-t) var(--rc-spring),
    box-shadow var(--rc-t) var(--rc-ease);
}
.vcg-rail-btn:hover,
.vcg-rail-btn:focus-visible {
  box-shadow: var(--rc-neon-glow), var(--rc-neon);
  outline: none;
}
html:not(.reduce-motion) .vcg-rail-btn:hover {
  transform: translateY(-3px) scale(1.02);
}

/* --- copy/share toast --------------------------------------------------- */
.vcg-toast {
  position: fixed;
  left: 50%;
  bottom: var(--rc-6);
  z-index: var(--rc-z-top);
  transform: translate(-50%, 140%);
  max-width: min(92vw, 460px);
  padding: 0.85em 1.2em;
  border-radius: var(--rc-r-pill);
  border: 1px solid var(--rc-accent-40);
  background: linear-gradient(180deg, var(--rc-void-2), var(--rc-void-3));
  box-shadow: var(--rc-shadow-2), var(--rc-neon);
  color: var(--rc-ink);
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-sm);
  font-weight: 600;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
html:not(.reduce-motion) .vcg-toast {
  transition:
    transform var(--rc-t) var(--rc-spring),
    opacity var(--rc-t) var(--rc-ease);
}
.vcg-toast.is-on {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* The class-named hook for the inline stagger index (contract: vcg-i). */
.vcg-i { display: contents; }

/* =========================================================================
 * DESKTOP LEGIBILITY / SCALE PASS
 * ========================================================================= */
@media (min-width: 1024px) {
  .vcg-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--rc-6);
  }
  .vcg-card { max-width: none; }
  .vcg-hook-text { font-size: clamp(1.7rem, 2.4vw, 2.3rem); }
  .vcg-rail {
    flex-wrap: wrap;
    padding: var(--rc-8) var(--rc-7);
  }
}

@media (min-width: 1600px) {
  .vcg-grid { grid-template-columns: repeat(4, 1fr); }
  .vcg-hook-text { font-size: clamp(1.8rem, 1.6vw, 2.4rem); }
}

/* =========================================================================
 * REDUCE-MOTION — calm, static, fully legible.
 * ========================================================================= */
html.reduce-motion .vcg-toast {
  transition: none;
}
html.reduce-motion .vcg-frame,
html.reduce-motion .vcg-mark,
html.reduce-motion .vcg-share,
html.reduce-motion .vcg-rail-btn {
  transition: none;
}
html.reduce-motion .vcg-mark-dot {
  animation: none;
}

/* ###### css-ticker-util ###### */
/* =============================================================================
   CSS-TICKER-UTIL — scarcity ticker children + shared inline text/glow utils
   Children rendered by ticket.js into #scarcity-ticker (already styled as the
   fixed pill container). JS also adds .rc-ticker to that same element, so
   .rc-ticker here only augments — it must not fight the container's layout.
   ========================================================================== */

/* The container element also carries .rc-ticker (ticket.js: classList.add).
   #scarcity-ticker (realm.css §11) owns position/flex/pill. We only add a
   cinematic accent hairline + ensure inner rhythm without overriding layout. */
.rc-ticker {
  position: relative;
  isolation: isolate;
}
/* Masked gradient hairline border (mirrors the established panel ::before),
   tuned to the pill radius so it reads as a live, lit edge. */
.rc-ticker::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    var(--rc-accent-22),
    transparent 42%,
    var(--rc-glow-18)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

/* -----------------------------------------------------------------------------
   Live dot — pulsing "we're live" indicator. ticket.js adds .is-pulse on a
   fresh seat-drop (and only when motion is allowed). Base = steady lit dot.
   -------------------------------------------------------------------------- */
.rc-ticker__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: var(--rc-r-pill);
  background: var(--rc-accent);
  box-shadow:
    0 0 0 0 var(--rc-accent-40),
    0 0 10px var(--rc-accent),
    0 0 18px var(--rc-accent-22);
}

/* Always-on gentle "live" breathing; gated behind reduce-motion. */
html:not(.reduce-motion) .rc-ticker__dot {
  animation: rc-ticker-live 1.6s var(--rc-ease) infinite;
}
/* Stronger ripple the instant a seat drops (.is-pulse). */
html:not(.reduce-motion) .rc-ticker__dot.is-pulse {
  animation: rc-ticker-drop 0.6s var(--rc-ease-out);
}
@keyframes rc-ticker-live {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.35); opacity: 0.62; }
}
@keyframes rc-ticker-drop {
  0% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 var(--rc-accent-40),
      0 0 10px var(--rc-accent),
      0 0 18px var(--rc-accent-22);
  }
  55% {
    transform: scale(1.6);
    box-shadow:
      0 0 0 7px transparent,
      0 0 16px var(--rc-accent),
      0 0 26px var(--rc-accent-22);
  }
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 transparent,
      0 0 10px var(--rc-accent),
      0 0 18px var(--rc-accent-22);
  }
}

/* -----------------------------------------------------------------------------
   Label — the room name + "seats shrinking" copy. Compact, soft ink, single
   line with graceful truncation so the pill never overflows on mobile.
   -------------------------------------------------------------------------- */
.rc-ticker__label {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--rc-font-body);
  font-size: var(--rc-fs-sm);
  font-weight: 600;
  line-height: var(--rc-lh-snug);
  letter-spacing: 0.005em;
  color: var(--rc-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -----------------------------------------------------------------------------
   Count — the live numeric readout. Mono, accent, tabular so digits don't
   jitter as the number changes. ticket.js adds .is-tick on a decrement.
   Renders "SOLD OUT" text when seats hit 0.
   -------------------------------------------------------------------------- */
.rc-ticker__count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9em;
  padding: 0.12em 0.5em;
  font-family: var(--rc-font-mono);
  font-size: var(--rc-fs-sm);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--rc-accent);
  background: var(--rc-accent-12);
  border: 1px solid var(--rc-line-2);
  border-radius: var(--rc-r-pill);
  text-shadow: 0 0 12px var(--rc-accent-22);
  white-space: nowrap;
}

/* Decrement flash — punchy "a seat just vanished" cue. */
html:not(.reduce-motion) .rc-ticker__count.is-tick {
  animation: rc-ticker-count-tick 0.6s var(--rc-spring);
}
@keyframes rc-ticker-count-tick {
  0% {
    transform: translateY(0) scale(1);
    color: var(--rc-accent);
    background: var(--rc-accent-12);
  }
  35% {
    transform: translateY(-2px) scale(1.12);
    color: var(--rc-void);
    background: var(--rc-accent);
    text-shadow: 0 0 14px var(--rc-accent-40);
  }
  100% {
    transform: translateY(0) scale(1);
    color: var(--rc-accent);
    background: var(--rc-accent-12);
  }
}

/* Reduce-motion: the decrement still reads, just instantly + statically. */
html.reduce-motion .rc-ticker__count.is-tick {
  color: var(--rc-spotlight);
  border-color: var(--rc-accent-40);
}

/* -----------------------------------------------------------------------------
   Shared inline TEXT / GLOW utilities — color single words inside punchlines
   across modules. Each carries a subtle text-shadow in its own token so the
   word glows against the stage-void. Inline-safe (no display/box changes).
   -------------------------------------------------------------------------- */
.rc-accent {
  color: var(--rc-accent);
  text-shadow: 0 0 14px var(--rc-accent-22);
}
.rc-glow {
  color: var(--rc-glow);
  text-shadow: 0 0 14px var(--rc-glow-18);
}
.rc-spotlight {
  color: var(--rc-spotlight);
  text-shadow: 0 0 16px var(--rc-spot-30);
}
/* .rc-void = void-colored ink; meant to sit on a lit (accent/spotlight) fill,
   so its "glow" is a soft warm halo that lifts it off the bright ground. */
.rc-void {
  color: var(--rc-void);
  text-shadow: 0 0 10px var(--rc-spot-30);
}

/* Reduce-motion path is already static for these (no animation), but drop the
   glow to a calmer level so nothing feels like it's vibrating. */
html.reduce-motion .rc-accent,
html.reduce-motion .rc-glow,
html.reduce-motion .rc-spotlight,
html.reduce-motion .rc-void {
  text-shadow: none;
}

/* =============================================================================
   DESKTOP legibility / scale pass
   ========================================================================== */
@media (min-width: 1024px) {
  .rc-ticker__label {
    font-size: var(--rc-fs-body);
    letter-spacing: 0.01em;
  }
  .rc-ticker__count {
    font-size: var(--rc-fs-body);
    min-width: 2.1em;
    padding: 0.14em 0.6em;
  }
  .rc-ticker__dot {
    width: 10px;
    height: 10px;
  }
}

@media (min-width: 1600px) {
  .rc-ticker {
    gap: 0.85em;
  }
  .rc-ticker__count {
    letter-spacing: 0.03em;
  }
}

/* =============================================================================
   INTEGRATION FIXES — small cross-file reconciliations (loaded last on purpose).
   ========================================================================== */

/* Cold-open fade-out. realm.js adds `.rc-cold-open--out` just before it removes
   the node, but realm.css only ever defined `#cold-open.is-done` — so the
   authored fade never fired and the opening beat vanished abruptly. This rule
   reuses the transition already on the #cold-open base (opacity + visibility,
   var(--rc-t-slow)) so the cinematic opener fades out as intended. The
   `.rc-cold-open--play` state realm.js also sets is a harmless no-op (the
   .cold-open__line keyframes in realm.css run on load, ungated by --play). */
#cold-open.rc-cold-open--out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}