/* Base theme — palette, typography, layout, chrome.
 * Overrides the reveal.js base theme. Doctrine: never crowd. */

:root {
  /* --bg: #fbfaf7;  */
  /* --ink: #1c1b19;  */
  --bg: #222;
  --ink: #ddd;

  --muted: #6b6862; /* secondary text */
  --accent: #c8553d; /* warm accent for the "active" line/arrow */
  --accent-soft: #e7b9ad; /* faded accent */
  --line: #cfcabf; /* axes / neutral chart strokes */
  --good: #4a7c59; /* "saved them" / favorable world */
  --bad: #b0411f; /* "cost them" world (a darker accent) */
  --grain: #c4a35a; /* wheat gold — the farmer's crop */

  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* gentle ease-out for reveals */

  /* ---- Animation timings (tune these) ---- */
  --t-draw: 0.9s; /* a chart/flow line drawing itself on */
  --t-fade: 0.5s; /* annotations & captions fading/rising in */
  --t-flow: 12s; /* one loop of the swap/CDS arrow-flow animation */
  --t-liftoff: 1.4s; /* the option's outcome line peeling off the flat — the focal beat */
}

.reveal {
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: 38px;
  color: var(--ink);
  height: 100vh;
}

.reveal-viewport {
  background: var(--bg);
}

.reveal h1,
.reveal h2,
.reveal h3 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-transform: none;
}

.reveal h1 {
  font-size: 1.9em;
}
.reveal h2 {
  font-size: 1.4em;
}

.reveal p {
  line-height: 1.45;
}

.muted {
  color: var(--muted);
}
.accent {
  color: var(--accent);
}

/* A quiet kicker/eyebrow label above a headline. */
.kicker {
  font-size: 0.6em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6em;
}

/* The recurring thesis line, styled to feel like a refrain. */
.reveal .thesis {
  font-size: 1.15em;
  line-height: 1.3;
  max-width: 16em;
  margin: var(--r-block-margin) auto;
}
.thesis .accent {
  color: var(--accent);
}

/* Synthesis: the five tools, listed; they dim (recede) as they collapse into the
 * one refrain. The dimming is toggled via data-anim on the closing sentence. */
.reveal .synth-list {
  list-style: none;
  margin: 0.4em auto;
  padding: 0;
  max-width: 20em;
  text-align: left;
  font-size: 0.7em;
  line-height: 1.55;
  transition: opacity var(--t-fade) var(--ease);
}
.reveal .synth-list.collapsed {
  opacity: 0.28;
}
.reveal .synth-list .tool {
  color: var(--accent);
  font-weight: 600;
}
/* The synthesis slide runs a few px past the bottom edge; tighten its
 * vertical rhythm without touching .thesis/.synth-list anywhere else. */
.reveal .synthesis .synth-list {
  line-height: 1.42;
  margin: 0.3em auto;
}
.reveal .synthesis .thesis {
  margin-top: 0.4em;
}

/* ---- Controls / chrome: keep it understated ---- */

.reveal .progress {
  color: var(--accent);
  height: 3px;
}
.reveal .controls {
  color: var(--accent-soft);
}

/* A fixed area for swapping single-line captions (bridge/swap/CDS): each caption
 * is absolutely positioned so fade-in-then-out fragments overlap in place
 * instead of stacking and shifting the layout. */
.reveal .caption-stack {
  position: relative;
  min-height: 2.8em;
  margin-top: 0.6em;
}
.reveal .caption-stack > p {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  font-size: 0.82em;
  line-height: 1.35;
}

/* Caption beats that accumulate below a chart (option): same voice as the
 * caption-stack, but the lines stay on screen and stack — so they're set
 * tight enough that a full temporal chart plus three of them still fits the
 * slide box. */
.reveal .caption-lines > p {
  font-size: 0.82em;
  line-height: 1.35;
  margin: 0.35em 0;
}

/* ---- Option types (puts & calls): a 2×2 — Put over Call, split by a rule.
 * Each row: buyer on the left (title, one-line definition, payoff chart),
 * seller on the right (takes the premium, bets against exercise; opposite
 * shape). Denser than any other slide, so type steps down hard. The buyer's
 * intro line is swapped in place for its definition (see .ot-textswap). */
.reveal .ot-row {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  column-gap: 1.4em;
  align-items: start;
  text-align: left;
}
.reveal .ot-divider {
  border: none;
  border-top: 1px solid var(--line);
  opacity: 0.45;
  margin: 0.35em 0;
}
.reveal .ot-title {
  font-size: 0.92em;
  font-weight: 600;
  margin: 0;
}
/* the buyer's intro and its definition share one slot, so the definition
 * replaces the intro in place rather than pushing the chart down. Sized for
 * the short definition line, not the longer intro: the intro may spill into
 * the chart area below, but the chart only draws after the intro has faded. */
.reveal .ot-textswap {
  position: relative;
  min-height: 1.4em;
  margin-top: 0.15em;
}
.reveal .ot-textswap > p {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  font-size: 0.5em;
  line-height: 1.35;
}
.reveal .ot-seller .ot-seller-title {
  margin: 0.5em 0 0.4em;
}
.ot-seller-title,
.ot-buyer-title {
  font-size: 0.5em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.reveal .ot-seller p {
  font-size: 0.5em;
  line-height: 1.4;
  margin: 0.35em 0;
}

/* ---- Generic fade/rise-in, usable on any element (HTML or SVG) ----
 * Triggered by reveal fragments (.fragment.visible) or JS (.show). */
.reveal .reveal-in {
  opacity: 0;
  transform: translateY(8px);
}
.reveal .reveal-in.show,
.reveal .reveal-in.fragment.visible {
  transition:
    opacity var(--t-fade) var(--ease),
    transform var(--t-fade) var(--ease);
  opacity: 1;
  transform: translateY(0);
}