/* Font Awesome (solid + brands), vendored in assets/ — no CDN, the deck must open offline. */
@import url('../assets/vendor/fontawesome/css/fontawesome.min.css');
@import url('../assets/vendor/fontawesome/css/solid.min.css');
@import url('../assets/vendor/fontawesome/css/brands.min.css');

/* This deck's own CSS. Loaded last, so it wins.
 *
 * Theme variables (the brand theme lives in the Axo package; override it here):
 *   --amby-fuchsia --amby-orchid --amby-blue --amby-cyan
 *   --amby-bg --amby-bg-2 --amby-bg-3 --amby-fg --amby-fg-dim --amby-warn --amby-ok
 *   --font-display --font-body --font-mono
 *
 * ============================================================================
 * TU SIGUIENTE USUARIO ES UN AGENTE — engineers, vibecoders and possible clients
 *
 * Rules this file follows (the same system as the AmbyKit deck, re-pointed at this talk):
 *   1. One left edge. Headline and content share it on every slide.
 *   2. Colour is information. Fuchsia = what a person sees (screens, UI, human steps).
 *      Cyan = what the agent reads (tool names, descriptions, text). Muted red = the bad
 *      version, always paired with a "—" so colour is never the only signal.
 *   3. Mono is for what the agent literally reads. Labels are display face, sentence case.
 *   4. The particle stage (assets/js/stage.js) is the one bold element. It draws at five
 *      moments — cover, scale, reading, demo, close — and is a dim drift everywhere else.
 *   5. Motion shows a mechanism: the request types itself, messages arrive in order, the bad
 *      version lands before the good one. Everything fires inside `section.present` only, so
 *      the resting state is the finished drawing — which is what the PDF and reduced-motion get.
 * ============================================================================ */

/* ---------- 0. Type ----------
   Calibri for text, Calibri Light for big titles, Consolas for code. Carlito is metric-
   compatible with Calibri and ships with the deck, so a laptop without Office lays out the same.
------------------------------------------------ */
@font-face {
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/vendor/carlito/carlito-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/vendor/carlito/carlito-latin-700-normal.woff2') format('woff2');
}

:root {
  --font-display: 'Calibri Light', Calibri, Carlito, 'Segoe UI', sans-serif;
  --font-body:    Calibri, Carlito, 'Segoe UI', sans-serif;
  --font-mono:    Consolas, 'Cascadia Mono', monospace;

  --amby-plum-wash: rgba(28, 0, 41, 0.62);
  --amby-line:      rgba(232, 234, 240, 0.10);
  --amby-line-soft: rgba(232, 234, 240, 0.06);
  --amby-cyan-line: rgba(0, 204, 255, 0.28);

  --bad:     #C9606E;
  --bad-dim: rgba(201, 96, 110, 0.55);
}

.reveal { font-weight: 400; }

/* ---------- 1. The stage and one left edge ---------- */
#stage { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

.reveal .slides section { text-align: left; }
.reveal h2 {
  font-size: 1.9em;
  letter-spacing: -0.03em;
  line-height: 1.04;
  max-width: 30ch;
  margin-bottom: 0.5em;
}
.reveal h4 { font-family: var(--font-display); font-weight: 500; color: var(--amby-fg); }
.reveal p, .reveal li { line-height: 1.4; }
.reveal section > p { font-size: 0.8em; max-width: 60ch; color: var(--amby-fg-dim); }

/* ---------- 2. The eyebrow: the number is the pointer, the label is quiet ---------- */
.module-number {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.6em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--amby-fuchsia);
  margin-bottom: 0.9em;
  display: flex;
  align-items: baseline;
  gap: 0.7em;
}
.module-number .n { color: var(--amby-fuchsia); font-variant-numeric: tabular-nums; }
.module-number .l { color: var(--amby-fg-dim); }

/* ---------- 3. Built-ins, restyled ---------- */

/* .compare — the one enumeration that keeps its panels: it is a contrast */
.compare { gap: 1.2em; margin-top: 0.3em; }
.compare .col {
  background: var(--amby-plum-wash);
  border-top: 2px solid var(--amby-fuchsia);
  border-radius: 0;
  padding: 0.75em 0.95em 0.6em;
  font-size: 0.7em;
  backdrop-filter: blur(6px);
}
.compare .col:last-child { border-top-color: var(--amby-cyan); }
.compare .col h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--amby-fg-dim);
  margin-bottom: 0.6em;
}
.compare .col:last-child h4 { color: var(--amby-fg); }
.compare .col li { margin-bottom: 0.4em; }
.compare .col p { margin: 0 0 0.5em; }

/* .two-col — quiet columns, a rule not a box */
.two-col { gap: 2.4em; margin-top: 0.9em; }
.two-col .col { border-top: 1px solid var(--amby-line); padding-top: 0.5em; }
.two-col .col h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8em;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 0.35em;
  color: var(--amby-cyan);
}
.two-col .col p, .two-col .col li { font-size: 0.72em; color: var(--amby-fg-dim); }
.two-col .col strong { color: var(--amby-fg); }

/* .callout — the takeaway: the fuchsia bar is the pointer */
.callout {
  margin-top: 0.9em;
  padding: 0.5em 0.9em;
  background: var(--amby-plum-wash);
  border-left: 3px solid var(--amby-fuchsia);
  border-image: none;
  border-radius: 0;
  font-size: 0.64em;
  line-height: 1.4;
  max-width: 80ch;
  backdrop-filter: blur(6px);
}

/* .stat-row — solid numerals, sentence-case labels */
.stat-row { gap: 2.4em; margin-top: 1em; justify-content: flex-start; }
.stat-row .stat { align-items: flex-start; text-align: left; }
.stat-row .stat .v {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--amby-fg);
  font-size: 1.7em;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat-row .stat .k {
  font-family: var(--font-body);
  font-size: 0.52em;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
  max-width: 18ch;
  margin-top: 0.4em;
}

/* .flow — a real sequence. The rule is the step's colour: people fuchsia, agents cyan. */
.flow { margin-top: 0.7em; gap: 1.4em; }
.flow .step {
  background: transparent;
  border-top: 0;
  padding: 0.55em 0 0.2em;
  position: relative;
}
.flow .step::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--rule, var(--amby-fuchsia));
  transform-origin: left center;
}
.flow .step + .step { margin-left: 0; }
.flow .step::after { content: none; }
.flow .step { --rule: var(--amby-fuchsia); }
.flow .step:last-child { --rule: var(--amby-cyan); }
.agent .flow .step { --rule: var(--amby-cyan); }
.flow .step .n {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.5em;
  letter-spacing: 0;
  color: var(--rule);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.35em;
}
.flow .step h4 { font-family: var(--font-display); font-size: 0.8em; margin-bottom: 0.3em; }
.flow .step p { font-size: 0.6em; line-height: 1.42; }

/* .matrix — the demo's scoreboard; version B, the last column, carries the brand rule */
.reveal .matrix table { font-size: 0.58em; }
.reveal .matrix thead th {
  background: transparent;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1em;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 1px solid var(--amby-line);
}
.reveal .matrix th:last-child {
  color: var(--amby-fg);
  border-top: 0;
  border-image: none;
  position: relative;
}
.reveal .matrix th:last-child::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--amby-fuchsia), var(--amby-cyan));
  transform-origin: left center;
}
.reveal .matrix td:first-child { font-weight: 500; font-family: var(--font-display); }
.reveal .matrix td { border-bottom: 1px solid var(--amby-line-soft); }
.reveal .matrix td:last-child { background: rgba(0, 204, 255, 0.05); }
.reveal .matrix tbody tr:hover, .reveal .matrix tbody tr:hover td:last-child { background: inherit; }
.matrix .legend { font-family: var(--font-body); letter-spacing: 0; }

/* .terminal — the frame, plus typed lines inside it */
.terminal {
  max-width: 100%;
  margin: 0.6em 0 0;
  background: rgba(17, 21, 31, 0.86);
  border: 1px solid var(--amby-line);
  border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}
.terminal .bar { background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid var(--amby-line-soft); }
.terminal .bar span { letter-spacing: 0; }
.terminal > .cmd:first-of-type { padding-top: 16px; }
.terminal > :last-child { padding-bottom: 16px; }
.terminal .cmd, .terminal .out {
  font-family: var(--font-mono);
  font-size: 0.5em;
  line-height: 1.7;
  padding: 0 22px;
  white-space: pre;
  color: var(--amby-fg-dim);
  overflow: hidden;
}
.terminal .cmd { display: flex; align-items: baseline; color: var(--amby-fg); }
.terminal .cmd .ps { color: var(--amby-fuchsia); margin-right: 0.8ch; font-weight: 600; }
.terminal .cmd .typed { display: inline-block; overflow: hidden; white-space: pre; width: calc(var(--n) * 1ch); vertical-align: bottom; }
.terminal .cmd::after { content: ""; display: inline-block; width: 0.6ch; height: 1.05em; background: var(--amby-cyan); margin-left: 2px; vertical-align: text-bottom; opacity: 0; align-self: center; }
.terminal .cmd + .out { margin-top: 0.9em; }
.out-ok   { color: var(--amby-ok); }
.out-fg   { color: var(--amby-fg); }
.out-path { color: var(--amby-cyan); }

/* .anatomy — a tool definition, the thing the agent reads */
.anatomy {
  background: var(--amby-plum-wash);
  border: 0;
  border-left: 3px solid var(--amby-cyan);
  border-radius: 0;
  padding: 16px 22px;
  margin-top: 0.6em;
  font-size: 0.6em;
  backdrop-filter: blur(6px);
}
.anatomy .seg { display: inline-block; }
.anatomy .seg + .seg { margin-left: 0.7ch; }
.anatomy-key { gap: 14px; margin-top: 0.7em; }

/* ---------- 4. Chrome ---------- */
.amby-footer { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.02em; text-transform: none; z-index: 3; }
.reveal .slide-number a { border-bottom: none; }
.reveal .progress { height: 3px; }
.reveal .progress span { background: linear-gradient(90deg, var(--amby-fuchsia), var(--amby-cyan)); }

/* The cover carries no footer. Reveal copies a slide's data-state onto the viewport. */
.reveal-viewport.cover .amby-footer { display: none; }

/* ---------- 5. Title slides ---------- */
section.title-slide { position: relative; }
section.title-slide > * { position: relative; z-index: 1; }
section.title-slide h1 {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--amby-fg);
  font-size: 2.9em;
  letter-spacing: -0.035em;
  line-height: 1.0;
  max-width: 13ch;
  margin-bottom: 0.3em;
}
section.title-slide .subtitle {
  font-size: 0.9em;
  max-width: 30ch;
  line-height: 1.4;
  margin-bottom: 1.3em;
  color: var(--amby-fg-dim);
}
section.title-slide .meta {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.52em;
  gap: 2.2em;
}
section.title-slide .meta span {
  text-transform: none;
  letter-spacing: 0;
}
section.title-slide .meta span strong {
  font-family: var(--font-body);
  font-weight: 600;
  white-space: nowrap;
  font-size: 1.3em;
  letter-spacing: 0;
  margin-top: 0.25em;
  color: var(--amby-fg);
}

/* the cover: text holds the left half, the stage draws the page on the right */
section.cover-slide > * { max-width: 660px; }
section.cover-slide h1 { font-size: 3.1em; }
section.cover-slide .qrs { display: flex; gap: 28px; margin: 0.2em 0 1.2em; }
section.cover-slide .qrs figure { margin: 0; }
section.cover-slide .qrs img { display: block; width: 150px; height: 150px; margin: 0; border-radius: 0; }
.reveal section.cover-slide .qrs figcaption {
  font-family: var(--font-body);
  font-size: 0.46em;
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  color: var(--amby-fg-dim);
  margin-top: 0.5em;
}

/* the close: the QR on the right, inside the particle ring */
.closing img.qr {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  width: 230px;
  border-radius: 12px;
  box-shadow: 0 0 40px rgba(238, 17, 153, 0.35);
}
.closing h1, .closing .subtitle, .closing .meta { max-width: 760px; }
.reveal section.closing .meta { flex-direction: column; gap: 0.7em; }
.reveal section.closing .meta span strong { font-family: var(--font-mono); font-weight: 400; color: var(--amby-cyan); }

/* the speaker: kept brief. The one effect is the photo being read: it arrives in the deck's
   duotone and a cyan scan line resolves it into the real picture, like the beam on slide 08.
   Then the name rises out of its mask, the role and one line land, the links follow. */
.speaker .bio { display: flex; align-items: center; gap: 56px; }
.speaker .portrait {
  position: relative;
  flex: none;
  width: 290px;
  height: 360px;
  overflow: hidden;
  isolation: isolate;
}
.speaker .portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}
.speaker .portrait .tone { filter: grayscale(1) contrast(1.15) brightness(0.9); }
.speaker .portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, var(--amby-fuchsia), var(--amby-cyan));
  mix-blend-mode: color;
}
.speaker .portrait .real { z-index: 2; }
.speaker .portrait .scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
  height: 2px;
  background: var(--amby-cyan);
  box-shadow: 0 0 18px 4px rgba(0, 204, 255, 0.55);
  opacity: 0;
}
.speaker .who { min-width: 0; }
.reveal .speaker .who h2 { font-size: 2.3em; line-height: 0.98; letter-spacing: -0.035em; margin: 0 0 0.3em; }
.speaker .who h2 .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.speaker .who h2 .line > span { display: block; }
.reveal .speaker .who .role { font-size: 0.72em; color: var(--amby-fg); margin: 0 0 0.35em; }
.reveal .speaker .who .about { font-size: 0.62em; color: var(--amby-fg-dim); max-width: 34ch; margin: 0 0 1.4em; }
.reveal .speaker .links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5em 1.8em; margin: 0; padding: 0; font-size: 0.5em; }
.reveal .speaker .links li { display: flex; align-items: center; gap: 0.55em; margin: 0; color: var(--amby-fg); }
.speaker .links i { font-size: 1.15em; color: var(--amby-fuchsia); }

/* the sequence, only on the slide being shown; the resting state is the finished slide */
.reveal section.present.speaker .portrait .tone,
.reveal section.present.speaker .portrait::before { animation: sp-settle 1.6s ease-out 0.1s both; }
.reveal section.present.speaker .portrait .real { animation: sp-resolve 1.2s cubic-bezier(0.6, 0, 0.3, 1) 0.4s both; }
.reveal section.present.speaker .portrait .scan { animation: sp-scan 1.2s cubic-bezier(0.6, 0, 0.3, 1) 0.4s both; }
.reveal section.present.speaker .who h2 .line > span { animation: sp-up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.reveal section.present.speaker .who h2 .line:nth-child(1) > span { animation-delay: 0.9s; }
.reveal section.present.speaker .who h2 .line:nth-child(2) > span { animation-delay: 1.02s; }
.reveal section.present.speaker .who .role { animation: amby-rise 0.5s ease-out 1.35s both; }
.reveal section.present.speaker .who .about { animation: amby-rise 0.5s ease-out 1.5s both; }
.reveal section.present.speaker .links li { animation: amby-rise 0.4s ease-out calc(1.75s + var(--i) * 0.1s) both; }
@keyframes sp-settle  { from { transform: scale(1.08); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sp-resolve { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes sp-scan    { 0% { top: 0; opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes sp-up      { from { transform: translateY(105%); } to { transform: none; } }

/* ============================================================================
   PER-SLIDE
   ============================================================================ */

/* 02 · the scene: the terminal is the whole slide */
.scene .terminal .cmd, .scene .terminal .out { font-size: 0.74em; line-height: 1.55; }

/* 03 · the question: type is the slide */
.question h2 { font-size: 2.5em; max-width: 16ch; line-height: 1.02; }
.question .callout { font-size: 0.85em; border-left-color: var(--amby-cyan); }

/* 06 · the scale: one number, very large, over the swarm */
.scale .stat-row { margin-top: 0; }
.scale .stat .v {
  font-size: 4.2em;
  line-height: 0.95;
  background: linear-gradient(100deg, var(--amby-fuchsia), var(--amby-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.scale .stat .k { font-size: 0.7em; max-width: none; color: var(--amby-fg); }

/* 08 · the tool definition: longer than one code line, so it wraps; the key matches the segments */
.iface .anatomy { white-space: normal; line-height: 1.55; font-size: 0.72em; }
.iface .anatomy-key { grid-template-columns: 1fr 2.2fr 1.4fr; }
.iface .anatomy-key .k { font-family: var(--font-body); font-size: 0.5em; }
.iface .anatomy-key .k b { display: none; }
.iface .anatomy-key .k:nth-child(1) { border-top-color: var(--amby-fuchsia); color: var(--amby-fuchsia); }
.iface .anatomy-key .k:nth-child(2) { border-top-color: var(--amby-fg); color: var(--amby-fg); }
.iface .anatomy-key .k:nth-child(3) { border-top-color: var(--amby-warn); color: var(--amby-warn); }

/* 09 · four rules: an icon over each label */
.rules .stat-row { gap: 1.2em; justify-content: space-between; }
.rules .stat { flex: 1; border-top: 2px solid var(--amby-line); padding-top: 0.5em; }
.rules .stat .v { font-size: 1.3em; color: var(--amby-fuchsia); }
.rules .stat .k { font-size: 0.66em; color: var(--amby-fg); max-width: 12ch; }
.rules .stat .k i { display: block; color: var(--amby-cyan); font-size: 0.9em; margin: 0.25em 0 0.45em; }

/* 10–12, 14 · bad vs good: the first column is the bad version, the second the good one */
.versus .compare .col:first-child { border-top-color: var(--bad-dim); }
.versus .compare .col:first-child h4,
.versus .two-col .col:first-child h4 { color: var(--bad); }
.versus .compare .col:first-child h4::before,
.versus .two-col .col:first-child h4::before { content: '— '; }
.versus .compare .col:last-child h4::before,
.versus .two-col .col:last-child h4::before { content: '✓ '; }
.versus .two-col .col:first-child { border-top-color: var(--bad-dim); }
.versus .two-col .col:last-child { border-top-color: var(--amby-cyan-line); }
.versus .two-col .col:first-child strong { color: var(--bad); }
.versus .compare code { font-size: 0.85em; }
.versus .compare .col:first-child code { color: var(--bad); }

/* 13 · least privilege: reading is the agent's (cyan), acting needs a person (fuchsia) */
.perm .compare .col:first-child { border-top-color: var(--amby-cyan); }
.perm .compare .col:last-child { border-top-color: var(--amby-fuchsia); }
.perm .compare .col h4::before {
  font-family: 'Font Awesome 7 Free';
  font-weight: 900;
  margin-right: 0.5em;
}
.perm .compare .col:first-child h4::before { content: '\f06e'; color: var(--amby-cyan); }
.perm .compare .col:last-child h4::before { content: '\f007'; color: var(--amby-fuchsia); }

/* 15 · demo: the word, big, between version A's noise and version B's grid */
.demo h1 { font-size: 3.6em; letter-spacing: -0.04em; text-align: center; }

/* 17 · closed doors */
.doors ul { list-style: none; margin-left: 0; }
.doors li { font-size: 0.85em; margin-bottom: 0.45em; }
.doors li::before {
  font-family: 'Font Awesome 7 Free';
  font-weight: 900;
  content: '\f023';
  color: var(--bad);
  display: inline-block;
  width: 1.6em;
  font-size: 0.8em;
}

/* 20 · backup video */
.reveal video.backup { width: 100%; max-height: 560px; border-radius: 10px; }


/* anything laid out in a grid wraps instead of spilling out of its box */
.two-col .col, .compare .col { min-width: 0; overflow-wrap: anywhere; }

/* ============================================================================
   MOTION — one rule: show the mechanism when the slide arrives.
   Everything below only fires inside `section.present`, so the resting state (no class)
   is always the finished drawing. Off under reduced-motion and in the PDF.
   ============================================================================ */
@keyframes amby-in    { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes amby-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes amby-hide  { to { opacity: 0; } }
@keyframes amby-grow  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes amby-type  { from { width: 0; } to { width: calc(var(--n) * 1ch); } }
@keyframes amby-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes amby-rise  { from { opacity: 0; transform: translateY(0.35em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes amby-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 2%, 0) scale(1.06); }
}

/* ambient: the brand glow behind every slide drifts, slowly enough to be felt, not seen */
.reveal-viewport::before { animation: amby-drift 48s ease-in-out infinite alternate; will-change: transform; }

/* the default choreography: headline first, the takeaway last */
.reveal section.present h2 { animation: amby-rise 0.55s cubic-bezier(.2,.7,.2,1) both; }
.reveal section.present > .callout { animation: amby-fade 0.5s ease-out 1.2s both; }

/* cover: the text settles while the stage draws the page */
.reveal section.cover-slide.present .module-number { animation: amby-fade 0.5s ease-out 0.1s both; }
.reveal section.cover-slide.present h1 { animation: amby-rise 0.8s cubic-bezier(.2,.7,.2,1) 0.2s both; }
.reveal section.cover-slide.present .subtitle { animation: amby-fade 0.6s ease-out 0.7s both; }
.reveal section.cover-slide.present .meta { animation: amby-fade 0.6s ease-out 1s both; }

/* close: the line, then the ways to reach us */
.reveal section.closing-slide.present h1 { animation: amby-rise 0.7s cubic-bezier(.2,.7,.2,1) both; }
.reveal section.closing-slide.present .subtitle { animation: amby-fade 0.5s ease-out 0.4s both; }
.reveal section.closing-slide.present .meta { animation: amby-fade 0.5s ease-out 0.7s both; }
.reveal section.closing-slide.present img.qr { animation: amby-fade 0.6s ease-out 0.5s both; }

/* terminal: the request types itself, the caret blinks, then the agent's answers land */
.reveal section.present .terminal .cmd .typed { animation: amby-type var(--t) steps(var(--n), end) var(--d) both; }
.reveal section.present .terminal .cmd::after {
  animation: amby-caret 0.9s step-end var(--d) infinite,
             amby-hide 0.01s linear calc(var(--d) + var(--t) + 0.15s) forwards;
  opacity: 1;
}
.reveal section.present .terminal .out { animation: amby-fade 0.22s ease-out var(--d) both; }
.reveal section.scene.present > .callout { animation-delay: 6.6s; }

/* compare: the bad (or old) version, then the good one, then the takeaway */
.reveal section.present .compare .col:nth-child(1),
.reveal section.present .two-col .col:nth-child(1) { animation: amby-in 0.45s ease-out 0.3s both; }
.reveal section.present .compare .col:nth-child(2),
.reveal section.present .two-col .col:nth-child(2) { animation: amby-in 0.45s ease-out 1s both; }
.reveal section.present .compare ~ .callout,
.reveal section.present .two-col ~ .callout { animation: amby-fade 0.5s ease-out 1.7s both; }

/* flows: each step's rule draws, in order */
.reveal section.present .flow .step { animation: amby-fade 0.4s ease-out both; }
.reveal section.present .flow .step::before { animation: amby-grow 0.45s ease-out both; }
.reveal section.present .flow .step:nth-child(1), .reveal section.present .flow .step:nth-child(1)::before { animation-delay: 0.5s; }
.reveal section.present .flow .step:nth-child(2), .reveal section.present .flow .step:nth-child(2)::before { animation-delay: 0.95s; }
.reveal section.present .flow .step:nth-child(3), .reveal section.present .flow .step:nth-child(3)::before { animation-delay: 1.4s; }
.reveal section.present .flow .step:nth-child(4), .reveal section.present .flow .step:nth-child(4)::before { animation-delay: 1.85s; }
.reveal section.present .flow ~ .callout { animation: amby-fade 0.5s ease-out 2.4s both; }

/* scale: the number counts up (stage.js), the label and takeaway follow */
.reveal section.scale.present .stat .k { animation: amby-fade 0.5s ease-out 1.4s both; }
.reveal section.scale.present > .callout { animation-delay: 2.2s; }

/* tool definition: name, description, parameters, each with its key, then the beam reads it */
.reveal section.present .anatomy .seg { animation: amby-in 0.3s ease-out both; }
.reveal section.present .anatomy-key .k { animation: amby-fade 0.3s ease-out both; }
.reveal section.present .anatomy .seg:nth-child(1) { animation-delay: 0.4s; } .reveal section.present .anatomy-key .k:nth-child(1) { animation-delay: 0.55s; }
.reveal section.present .anatomy .seg:nth-child(2) { animation-delay: 0.9s; } .reveal section.present .anatomy-key .k:nth-child(2) { animation-delay: 1.05s; }
.reveal section.present .anatomy .seg:nth-child(3) { animation-delay: 1.4s; } .reveal section.present .anatomy-key .k:nth-child(3) { animation-delay: 1.55s; }
.reveal section.present .anatomy ~ .callout { animation: amby-fade 0.5s ease-out 2.2s both; }

/* four rules: one at a time */
.reveal section.rules.present .stat { animation: amby-in 0.45s ease-out both; }
.reveal section.rules.present .stat:nth-child(1) { animation-delay: 0.5s; }
.reveal section.rules.present .stat:nth-child(2) { animation-delay: 0.8s; }
.reveal section.rules.present .stat:nth-child(3) { animation-delay: 1.1s; }
.reveal section.rules.present .stat:nth-child(4) { animation-delay: 1.4s; }
.reveal section.rules.present > .callout { animation-delay: 2s; }


/* scoreboard: the version B rule draws, revealed rows slide in */
.reveal section.present .matrix th:last-child::after { animation: amby-grow 0.6s ease-out 0.3s both; }
.reveal .matrix tr.fragment.visible { animation: amby-in 0.4s ease-out both; }

/* closed doors: one at a time */
.reveal section.doors.present li { animation: amby-in 0.4s ease-out both; }
.reveal section.doors.present li:nth-child(1) { animation-delay: 0.5s; }
.reveal section.doors.present li:nth-child(2) { animation-delay: 0.9s; }
.reveal section.doors.present li:nth-child(3) { animation-delay: 1.3s; }
.reveal section.doors.present > .callout { animation-delay: 1.9s; }

/* demo: the word lands between the two versions */
.reveal section.demo.present h1 { animation: amby-rise 0.8s cubic-bezier(.2,.7,.2,1) 0.3s both; }

/* off for the PDF and for anyone who asked for less motion: show the finished drawing */
body.exporting .reveal section *,
body.exporting .reveal section *::before,
body.exporting .reveal section *::after,
body.exporting .reveal section::after { animation: none !important; }
body.exporting .reveal-viewport::before { animation: none !important; }
body.exporting .terminal .cmd::after { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal section *, .reveal section *::before, .reveal section *::after,
  .reveal section::after, .reveal-viewport::before { animation: none !important; }
  .terminal .cmd::after { opacity: 0 !important; }
}

/* ---------- Late overrides ---------- */
/* the nav arrows sit on the content's left edge: keep them quiet until pointed at */
.reveal .controls { opacity: 0.35; transition: opacity 0.2s; }
.reveal .controls:hover { opacity: 1; }
/* 08 · the reading beam passes behind the definition, so its panel lets the stage through */
.iface .anatomy { background: rgba(28, 0, 41, 0.28); backdrop-filter: none; }

/* ---------- Sequence diagrams (components/Sequence.axo) ----------
   Lanes, not boxes. A person's lane is fuchsia, the agent's cyan, your system white.
   What someone says is display face; what the agent sends or reads is mono. */
.sq { width: 100%; height: auto; display: block; max-height: 540px; margin-top: 0.2em; overflow: visible; }
.sq-actor { --lc: var(--amby-fg); }
.sq-k-person { --lc: var(--amby-fuchsia); }
.sq-k-agent  { --lc: var(--amby-cyan); }
.sq-life { stroke: var(--lc); stroke-opacity: 0.28; stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.sq-rule { fill: var(--lc); }
.sq-ico  { font-family: 'Font Awesome 7 Free'; font-weight: 900; font-size: 20px; fill: var(--lc); }
.sq-name { font-family: var(--font-body); font-weight: 600; font-size: 21px; fill: var(--amby-fg); }
.sq-sub  { font-family: var(--font-mono); font-size: 14px; fill: var(--amby-fg-dim); }

.sq-msg { --mc: var(--amby-cyan); }
.sq-t-say   { --mc: var(--amby-fuchsia); }
.sq-t-reply { --mc: var(--amby-fg-dim); }
.sq-t-focus { --mc: var(--amby-cyan); }
.sq-t-lost  { --mc: var(--bad); }
.sq-line { stroke: var(--mc); stroke-width: 2; }
.sq-dashed { stroke-dasharray: 7 6; }
.sq-t-focus .sq-line { stroke-width: 3; filter: drop-shadow(0 0 6px rgba(0, 204, 255, 0.8)); }
.sq-head { fill: var(--mc); }
.sq-x { stroke: var(--bad); stroke-width: 3; stroke-linecap: round; fill: none; }
.sq-packet { fill: #fff; opacity: 0; filter: drop-shadow(0 0 6px var(--mc)) drop-shadow(0 0 12px var(--mc)); }

.sq-label { font-family: var(--font-mono); font-size: 17px; fill: var(--amby-fg); }
.sq-t-reply .sq-label { fill: var(--amby-fg-dim); }
.sq-t-say .sq-label { font-family: var(--font-body); font-size: 20px; fill: var(--amby-fg); }
.sq-t-focus .sq-label { fill: var(--amby-cyan); font-weight: 700; font-size: 18px; }
.sq-t-lost .sq-label { fill: var(--bad); }

.sq-num circle { fill: var(--amby-bg); stroke: var(--mc); stroke-width: 1.5; }
.sq-num text { font-family: var(--font-body); font-weight: 700; font-size: 13px; fill: var(--amby-fg); }

.sq-note-box { fill: rgba(28, 0, 41, 0.85); stroke: var(--amby-line); }
.sq-note-bar { fill: var(--amby-fuchsia); }
.sq-note-t { font-family: var(--font-body); font-size: 18px; fill: var(--amby-fg); }
.sq-note-ok .sq-note-bar { fill: var(--amby-cyan); }
.sq-note-ok .sq-note-box { stroke: var(--amby-cyan-line); }

/* motion: one message at a time — the number, the arrow drawing from the sender, a packet
   running along it (dying at the × when the answer is lost), then the label */
@keyframes sq-packet {
  0%   { opacity: 0; transform: translateX(0); }
  12%  { opacity: 1; }
  88%  { opacity: 1; transform: translateX(var(--dx)); }
  100% { opacity: 0; transform: translateX(var(--dx)); }
}
@keyframes sq-pop { from { transform: scale(0); } to { transform: scale(1); } }
.sq-draw, .sq-num { transform-box: fill-box; }
.sq-draw { transform-origin: var(--o) center; }
.sq-num { transform-origin: center; }
.reveal section.present .sq-step { --t: calc(0.5s + var(--i) * 0.62s); }
.reveal section.present .sq-num { animation: sq-pop 0.25s cubic-bezier(.2,.7,.2,1.4) var(--t) both; }
.reveal section.present .sq-draw { animation: amby-grow 0.5s ease-in-out var(--t) both; } /* same clock as the packet: the line is its trace */
.reveal section.present .sq-packet { animation: sq-packet 0.5s ease-in-out var(--t) both; }
.reveal section.present .sq-head,
.reveal section.present .sq-x { animation: amby-fade 0.15s ease-out calc(var(--t) + 0.42s) both; }
.reveal section.present .sq-label { animation: amby-fade 0.3s ease-out calc(var(--t) + 0.3s) both; }
.reveal section.present .sq-note { animation: amby-in 0.4s ease-out var(--t) both; }
.reveal section.present .sq ~ .callout { animation: amby-fade 0.5s ease-out 5.8s both; }