/* ── The demo cast ─────────────────────────────────────────────────────────
   Everything the recorded first-run block needs, on top of the vendored
   asciinema-player.css.

   A file rather than an inline <style>, which is the convention for the
   marketing pages: index.html and why.html both carry this block, and the
   sixteen terminal colours below are exactly the kind of thing that gets
   changed in one copy. It lives beside the player because it belongs to the
   player — the site's own tokens stay where CLAUDE.md says they are.

   Self-contained on purpose. .terminal and friends exist in index.html's
   inline styles and not in why.html's, so the chrome is redefined here scoped
   under .demo-wrap instead of depending on whichever page includes it.       */

.demo-wrap {
  /* 940px, not full width: the cast is 100 columns and the player sizes the
     type to whatever box it is given. Across a 1200px container the glyphs are
     large enough to look like a mistake, and 28 rows of them push the next
     section off a laptop screen entirely. */
  max-width: 940px;
  margin: 0 auto;
}

/* Code reads as an ink panel in either theme — the same local-token trick
   .terminal uses on the homepage, so the recording sits in the page rather
   than on it. */
.demo-panel {
  background: #0F1C18;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  overflow: hidden;
}
.demo-bar {
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.demo-dot { width: 10px; height: 10px; border-radius: 50%; }
.demo-title {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  color: #7E9C93;
  margin-left: 8px;
}

/* Reserves the player's box before the script runs. Without it the section is
   a few dozen pixels tall until the cast is parsed and then jumps to ~610px,
   taking everything below it down the page — the same layout shift the
   screenshots elsewhere carry width/height to avoid.

   The ratio is measured, not derived: a 100x28 terminal in JetBrains Mono at
   938px renders 611px tall, so 100/65. Deriving it from cols and rows needs the
   font's advance width and line height, which are exactly what changes when the
   webfont is slow or blocked. The player is created with `fit: 'both'` for the
   same reason — it scales the grid to whatever this box turns out to be, so a
   different metric shrinks the type slightly instead of overflowing the panel
   or leaving a band of dead ink. */
.demo-stage {
  aspect-ratio: 100 / 65;
  padding: 8px 10px;
  overflow: hidden;
}
.demo-stage .ap-wrapper,
.demo-stage .ap-player { height: 100%; }

/* Below this width the player is not mounted at all and the static transcript
   stays — see the matching breakpoint in wagoe-cast.js, which is the half that
   actually decides. A 100-column cast scaled into a 292px phone renders at
   under 4px per glyph: legible to nobody, and a fair imitation of a broken
   image. The transcript is short, wraps to the panel, and says the same thing.
   Keep the two numbers in step. */
@media (max-width: 640px) {
  .demo-stage {
    aspect-ratio: auto;
    overflow-x: auto;
  }
}

/* The player paints its own background across the panel, so the theme sets it
   to the panel's ink rather than to a colour of its own. The sixteen terminal
   colours are the on-ink tints index.html uses for .kw/.fn/.str, which is why
   the recording and the hand-written code blocks read as one terminal. */
.asciinema-player-theme-wagoe {
  --term-color-foreground: #CFE8DF;
  --term-color-background: #0F1C18;
  --term-color-0:  #16241F;  --term-color-8:  #40564E;
  --term-color-1:  #E08A7A;  --term-color-9:  #EDA595;
  --term-color-2:  #9BCC7C;  --term-color-10: #B4DE99;
  --term-color-3:  #D7BC69;  --term-color-11: #E6D289;
  --term-color-4:  #7FB2D7;  --term-color-12: #9FC9E6;
  --term-color-5:  #D79CB4;  --term-color-13: #E6B8CB;
  --term-color-6:  #5FD3B6;  --term-color-14: #8FE0C6;
  --term-color-7:  #CFE8DF;  --term-color-15: #FFFFFF;
}

/* The positioning context for the cross-fade. It wraps the stage rather than
   the whole panel, so the overlay covers the terminal and leaves the title bar
   — the frame the panel is recognisable by — in place through the transition. */
.demo-screen { position: relative; }

/* The payoff frame. The flow ends at "the browser shows the generated admin
   CRUD", which a terminal recording cannot show, so the cast hands over to the
   screenshot the proof section already ships and then restarts.
   z-index, because the player draws its own control bar inside the stage and
   an overlay without one lets those buttons sit on top of the image. */
.demo-shot {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: #0F1C18;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
  margin: 0;
}
.demo-shot.is-visible { opacity: 1; }
.demo-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* A caption rather than a bare image: without one the cut reads as the
   recording having glitched into a screenshot. */
.demo-shot figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 16px;
  font-size: 0.8rem;
  color: #CFE8DF;
  background: linear-gradient(transparent, rgba(10, 21, 18, 0.92) 45%);
  text-align: center;
}

/* Shown until the player takes over, and left in place for good if the script
   never runs. An empty ink rectangle is worse than no section at all, and it
   is precisely what a blocked or failed asciinema-player.min.js leaves
   behind. */
.demo-fallback {
  margin: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  /* JetBrains Mono ligates => into a single arrow glyph, which turns the REPL
     prompt `user=>` into `user⇒` — a prompt no Clojure REPL prints. */
  font-variant-ligatures: none;
  font-size: 0.8rem;
  line-height: 1.7;
  color: #CFE8DF;
  padding: 12px 14px;
  white-space: pre;
  overflow-x: auto;
}
.demo-fallback .p { color: #7F978F; }
.demo-fallback .f { color: #8FE0C6; }
.demo-fallback .c { color: #6E877E; }
.demo-fallback .o { color: #9BCC7C; }

/* The line under the panel. index.html styles no bare <a> at all, so a link
   here renders in the browser's default blue-on-ink — which is both unreadable
   and the only element on the homepage that does not belong to the palette. */
.demo-note {
  text-align: center;
  margin-top: 18px;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.demo-note a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.demo-note a:hover { text-decoration-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .demo-shot { transition: none; }
}