/* Animated SVG diagram thumbnails (shared by every page variant). */

/* Animated diagram thumbnails. Paused by default; .playing (hover or
   in-view on touch) resumes them where they stopped. */

.dg * {
  animation-play-state: paused !important;
}

.pub-thumb.playing .dg * {
  animation-play-state: running !important;
}

.dg text {
  fill: var(--ink);
  font-family: var(--font);
  font-size: 11.5px;
}

.dg .t-faint {
  fill: var(--muted);
  font-size: 11px;
}

.dg .t-box {
  fill: var(--d-box-text);
  font-weight: 600;
}

.dg .t-mono {
  font-family: var(--mono);
  font-size: 9px;
}

.dg .line {
  fill: none;
  stroke: var(--faint);
  stroke-linecap: round;
  stroke-width: 1.5;
}

.dg-arrowhead {
  fill: var(--faint);
}

.dg .box {
  fill: var(--d-amber);
}

.dg .chip {
  fill: var(--code-bg);
  stroke: var(--line);
}

.dg .device {
  fill: none;
  stroke: var(--muted);
  stroke-width: 2.5;
}

.dg .f-red { fill: var(--d-red); }
.dg .f-green { fill: var(--d-green); }
.dg .f-purple { fill: var(--d-purple); }
.dg .f-amber { fill: var(--d-amber); }
.dg .f-blue { fill: var(--d-blue); }
.dg .f-pink { fill: var(--d-pink); }
.dg .f-surface { fill: var(--surface); }

/* Waveform bars: smooth, desynchronised breathing (never empty) */
.dg .bar {
  animation: dg-bar var(--t, 0.9s) ease-in-out var(--dl, 0s) infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes dg-bar {
  from { transform: scaleY(1); }
  to { transform: scaleY(0.35); }
}

/* Arrows with a slow flowing dash */
.dg .flow {
  animation: dg-flow 0.9s linear infinite;
  stroke-dasharray: 4 3;
}

@keyframes dg-flow {
  to { stroke-dashoffset: -7; }
}

/* Active edge: accent, flowing (multimodal back end) */
.dg .hot {
  animation: dg-flow 0.6s linear infinite;
  stroke: var(--accent);
  stroke-dasharray: 4 3;
  stroke-width: 2;
}

.dg-arrowhead-hot {
  fill: var(--accent);
}

/* Chat typing indicator */
.dg .dot {
  animation: dg-dot 0.9s ease-in-out var(--dl, 0s) infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes dg-dot {
  to { transform: translateY(-2.5px); opacity: 0.5; }
}

/* Multi-speaker: speaker id cycles, matching output lights up */
.dg .ms-spk { animation: dg-ms-spk 7.5s ease-in-out infinite; fill: var(--faint); }
.dg .ms-w1 { animation: dg-ms-w1 7.5s ease-in-out infinite; }
.dg .ms-w2 { animation: dg-ms-w2 7.5s ease-in-out infinite; }
.dg .ms-w3 { animation: dg-ms-w3 7.5s ease-in-out infinite; }

@keyframes dg-ms-spk {
  0%, 4%, 96%, 100% { fill: var(--faint); }
  9%, 29% { fill: var(--d-red); }
  38%, 58% { fill: var(--d-green); }
  67%, 87% { fill: var(--d-purple); }
}

@keyframes dg-ms-w1 {
  0%, 4%, 9%, 29%, 96%, 100% { opacity: 1; }
  34%, 91% { opacity: 0.22; }
}

@keyframes dg-ms-w2 {
  0%, 4%, 38%, 58%, 96%, 100% { opacity: 1; }
  9%, 33%, 63%, 91% { opacity: 0.22; }
}

@keyframes dg-ms-w3 {
  0%, 4%, 67%, 87%, 96%, 100% { opacity: 1; }
  9%, 62% { opacity: 0.22; }
}

/* Story diagrams (multimodal, ProcSim, ranker): per-element timelines are
   generated into each SVG's own <style>. */
.dg .t-chat {
  font-size: 9.5px;
}

.dg .t-noise {
  fill: var(--d-red);
  font-size: 10.5px;
  font-weight: 600;
}

.dg .tee {
  stroke: var(--faint);
  stroke-width: 1;
}

.dg .ps-halo {
  fill-opacity: 0.18;
}

.dg .ps-link {
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.5;
}

.dg .ps-noise-line {
  fill: none;
  stroke: var(--d-red);
  stroke-width: 2;
}