/* Agents, minus the hype: the compositions the slide package has no kind for.
   Loaded after _shared/slides/slides.css. Every slide is a package kind; this
   file only adds the drawings inside them: the screenshot pair, the file
   icons, the roster's type, the master agent file, the iceberg, and the graph,
   which deck.js draws. Colours are the surface tokens, so a slide repaints
   with its data-theme. */

/* ── Thank you: the contact line under the close ── */
.contact { display: flex; gap: 64px; font-family: var(--font-mono); color: var(--foreground); }
.contact span { display: inline-flex; align-items: center; gap: 16px; }
.contact svg { width: 1em; height: 1em; flex: none; }

/* ── Screenshots: a frame on every one, drawn in the SVG that composes them ── */
.shot-frame { fill: none; stroke: color-mix(in srgb, var(--foreground) 10%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* Where it's going: a screenshot over each card */
.shot { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground) 10%, transparent); }

/* ── File cards: a file icon before each name, the extension in the highlight ── */
.files .slide-card-title { display: flex; align-items: center; gap: 20px; }
.files code { font-size: inherit; }
.file-icon { flex: none; width: 0.7em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

/* ── Roster: agent and cadence in mono, an icon before each agent ── */
.roster tbody th { font-family: var(--font-mono); font-weight: var(--weight-normal); }
.roster tbody td:last-child { font-family: var(--font-mono); color: var(--ink); }
.roster-icon { width: 1.1em; height: 1.1em; margin-right: 0.6em; vertical-align: -0.2em; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── The master agent file, drawn as a code panel ── */
.code-panel .panel-ground { fill: color-mix(in srgb, var(--background) 70%, #000); stroke: color-mix(in srgb, var(--foreground) 12%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.code-panel text { font-family: var(--font-mono); fill: var(--foreground); white-space: pre; }
.code-panel .panel-name { font-size: 20px; letter-spacing: 0.04em; fill: var(--ink); }
.code-panel .panel-name tspan { fill: color-mix(in srgb, var(--foreground) 40%, transparent); }
.code-panel .panel-code { font-size: 27px; }

/* ── Six pieces: the waterline and the words around the iceberg ── */
.iceberg .waterline { fill: var(--ink); }
.iceberg .piece { font-family: var(--font-display); font-weight: var(--weight-heading); font-size: 48px; letter-spacing: -0.02em; fill: var(--foreground); }
.iceberg .label { font-family: var(--font-mono); font-size: 20px; letter-spacing: 0.14em; fill: var(--ink); }

/* ── Graph: the art takes the whole body, edge to edge ── */
.slide-visual.bleed { margin-inline: calc(-1 * var(--slide-pad)); }
.slide-visual.bleed .diagram-art svg { overflow: visible; }

/* The graph: nodes grow in and edges draw when the slide is reached, then drift */
.graph-stage .g-node {
  opacity: 0;
  scale: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: gNodeBreathe var(--bdur, 6s) ease-in-out infinite alternate;
}
.graph-stage .g-edge {
  opacity: 0;
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  animation: gEdgePulse var(--bdur, 9s) ease-in-out infinite alternate;
}
.graph-stage[data-animate] .g-node {
  animation-name: gNodeGrow, gNodeBreathe;
  animation-duration: 1100ms, var(--bdur, 6s);
  animation-delay: var(--in-delay, 0ms), 0ms;
  animation-timing-function: cubic-bezier(0.34, 1.4, 0.5, 1), ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
  animation-fill-mode: forwards, none;
}
.graph-stage[data-animate] .g-edge {
  animation-name: gEdgeDraw, gEdgePulse;
  animation-duration: 1400ms, var(--bdur, 9s);
  animation-delay: var(--in-delay, 0ms), 0ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1), ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
  animation-fill-mode: forwards, none;
}
@keyframes gNodeGrow {
  0%   { opacity: 0; scale: 0; }
  55%  { opacity: 1; scale: 1.18; }
  100% { opacity: 1; scale: 1; }
}
@keyframes gNodeBreathe {
  0%   { translate: 0 0; }
  100% { translate: var(--dx, 0px) var(--dy, 0px); }
}
@keyframes gEdgeDraw {
  0%   { opacity: 0; stroke-dashoffset: var(--len, 1200); }
  20%  { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes gEdgePulse {
  0%   { opacity: 1; }
  100% { opacity: 0.45; }
}

.g-hub, .g-hub-lg, .g-green-leaf { fill: var(--ink); }
.g-leaf         { fill: color-mix(in srgb, var(--foreground) 62%, transparent); }
.g-orphan-yel   { fill: #E6C658; }
.g-orphan-cream { fill: color-mix(in srgb, var(--foreground) 50%, transparent); }
.g-edge { stroke: color-mix(in srgb, var(--foreground) 18%, transparent); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }