/*
 * Home page graphics: drawing to data, workflow run, panel layout.
 * Used by templates/partials/graphics/*.html, templates/partials/graphics_showcase.html
 * and templates/core/how_it_works.html.
 *
 * Colours: neutral parts use main.css tokens (--text-primary, --text-secondary,
 * --border-color, --bg-primary). The accent reads --accent; if main.css names
 * its accent token differently, change the line marked ACCENT. Zone and timber
 * colours are defined once below as tokens, with dark-mode values.
 *
 * Motion: CSS only. Reduced-motion visitors see the finished frame, no loop.
 * static/js/graphics.js adds .is-paused while a graphic is off-screen.
 */

/* ---------- Tokens ---------- */
.ux-graphic {
  --ux-g-accent: var(--accent, currentColor); /* ACCENT */
  --ux-g-surface: var(--bg-secondary, var(--bg-primary));
  --ux-dl: #d85a30;
  --ux-dl-fill: rgba(216, 90, 48, 0.18);
  --ux-ds: #378add;
  --ux-ds-fill: rgba(55, 138, 221, 0.18);
  --ux-wood: #ba7517;
  --ux-wood-fill: rgba(239, 159, 39, 0.22);
  color: var(--text-primary);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ux-graphic {
    --ux-dl: #f0997b;
    --ux-dl-fill: rgba(240, 153, 123, 0.2);
    --ux-ds: #85b7eb;
    --ux-ds-fill: rgba(133, 183, 235, 0.2);
    --ux-wood: #ef9f27;
    --ux-wood-fill: rgba(239, 159, 39, 0.24);
  }
}
:root[data-theme="dark"] .ux-graphic {
  --ux-dl: #f0997b;
  --ux-dl-fill: rgba(240, 153, 123, 0.2);
  --ux-ds: #85b7eb;
  --ux-ds-fill: rgba(133, 183, 235, 0.2);
  --ux-wood: #ef9f27;
  --ux-wood-fill: rgba(239, 159, 39, 0.24);
}

/* ---------- Frame ---------- */
.ux-graphic__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.ux-graphic--grid {
  border-radius: 8px;
  background-image: radial-gradient(circle, var(--border-color) 1px, transparent 1.5px);
  background-size: 14px 14px;
}

/* ---------- Shapes ---------- */
.ux-g-sheet,
.ux-g-block { fill: var(--ux-g-surface); stroke: var(--border-color); }
.ux-g-line { fill: none; stroke: var(--text-secondary); stroke-width: 1.2; }
.ux-g-faint { fill: none; stroke: var(--border-color); }
.ux-g-arrow { fill: none; stroke: var(--text-secondary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ux-g-zone--dl { fill: var(--ux-dl-fill); stroke: var(--ux-dl); }
.ux-g-zone--ds { fill: var(--ux-ds-fill); stroke: var(--ux-ds); }
.ux-g-swatch--dl { fill: var(--ux-dl); }
.ux-g-swatch--ds { fill: var(--ux-ds); }
.ux-g-scan { stroke: var(--ux-g-accent); stroke-width: 1.5; }
.ux-g-bar { fill: var(--text-secondary); fill-opacity: 0.5; }
.ux-g-bar--light { fill: var(--border-color); fill-opacity: 1; }
.ux-g-glow { fill: none; stroke: var(--ux-g-accent); stroke-width: 2; }
.ux-g-wire { fill: none; stroke: var(--text-secondary); stroke-width: 1.5; }
.ux-g-pulse { fill: var(--ux-g-accent); }
.ux-g-dim { fill: none; stroke: var(--text-secondary); }
.ux-g-plate { fill: none; stroke: var(--text-secondary); stroke-width: 1.2; stroke-dasharray: 4 3; }
.ux-g-panel { fill: var(--ux-wood-fill); stroke: var(--ux-wood); }
.ux-g-grain { fill: none; stroke: var(--ux-wood); stroke-opacity: 0.45; }
.ux-g-label {
  font-family: "Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  fill: var(--text-secondary);
}
.ux-g-text {
  font-family: inherit;
  font-size: 11px;
  fill: var(--text-primary);
}

/* ---------- A: drawing to data (7 s) ---------- */
.ux-graphic--data .ux-g-zone,
.ux-graphic--data .ux-g-row { animation: ux-g-fade 7s infinite both; }
.ux-graphic--data .ux-g-a1 { animation-delay: 0.6s; }
.ux-graphic--data .ux-g-a2 { animation-delay: 1s; }
.ux-graphic--data .ux-g-a3 { animation-delay: 1.4s; }
.ux-graphic--data .ux-g-a4 { animation-delay: 2s; }
.ux-graphic--data .ux-g-a5 { animation-delay: 2.4s; }
.ux-graphic--data .ux-g-a6 { animation-delay: 2.8s; }
.ux-graphic--data .ux-g-scan { animation: ux-g-scan 7s infinite both; }

/* ---------- B: workflow run (6 s) ---------- */
.ux-graphic--flow .ux-g-glow { animation: ux-g-glow 6s infinite both; }
.ux-graphic--flow .ux-g-glow--last { animation-name: ux-g-glow-last; }
.ux-graphic--flow .ux-g-b2 { animation-delay: 1.2s; }
.ux-graphic--flow .ux-g-b3 { animation-delay: 2.4s; }
.ux-graphic--flow .ux-g-b4 { animation-delay: 3.6s; }
.ux-graphic--flow .ux-g-pulse { animation: ux-g-pulse 6s infinite both; }
.ux-graphic--flow .ux-g-p1 { animation-delay: 0.8s; }
.ux-graphic--flow .ux-g-p2 { animation-delay: 2s; }
.ux-graphic--flow .ux-g-p3 { animation-delay: 3.2s; }

/* ---------- C: panel layout (7 s) ---------- */
.ux-graphic--panels .ux-g-panel-group { animation: ux-g-drop 7s infinite both; }
.ux-graphic--panels .ux-g-c1 { animation-delay: 0.3s; }
.ux-graphic--panels .ux-g-c2 { animation-delay: 0.7s; }
.ux-graphic--panels .ux-g-c3 { animation-delay: 1.1s; }
.ux-graphic--panels .ux-g-c4 { animation-delay: 1.5s; }
.ux-graphic--panels .ux-g-c5 { animation-delay: 1.9s; }

@keyframes ux-g-fade {
  0% { opacity: 0; }
  6% { opacity: 1; }
  82% { opacity: 1; }
  92%, 100% { opacity: 0; }
}
@keyframes ux-g-scan {
  0% { transform: translateY(0); opacity: 0; }
  3% { opacity: 1; }
  26% { transform: translateY(124px); opacity: 1; }
  30%, 100% { transform: translateY(124px); opacity: 0; }
}
@keyframes ux-g-glow {
  0% { opacity: 0; }
  3% { opacity: 1; }
  17% { opacity: 1; }
  22%, 100% { opacity: 0; }
}
@keyframes ux-g-glow-last {
  0% { opacity: 0; }
  3% { opacity: 1; }
  30% { opacity: 1; }
  36%, 100% { opacity: 0; }
}
@keyframes ux-g-pulse {
  0% { transform: translateX(0); opacity: 0; }
  1% { opacity: 1; }
  7% { transform: translateX(32px); opacity: 1; }
  8%, 100% { transform: translateX(32px); opacity: 0; }
}
@keyframes ux-g-drop {
  0% { opacity: 0; transform: translateY(-8px); }
  6% { opacity: 1; transform: translateY(0); }
  82% { opacity: 1; transform: translateY(0); }
  92%, 100% { opacity: 0; transform: translateY(0); }
}

/* Off-screen (set by graphics.js) */
.ux-graphic.is-paused * { animation-play-state: paused; }

/* Reduced motion: no loop, show the finished frame */
@media (prefers-reduced-motion: reduce) {
  .ux-graphic * { animation: none !important; }
  .ux-graphic .ux-g-scan,
  .ux-graphic .ux-g-pulse { display: none; }
  .ux-graphic .ux-g-glow { opacity: 0; }
  .ux-graphic .ux-g-glow--last { opacity: 1; }
}

/* ---------- Showcase grid (graphics_showcase.html; section uses main.css) ---------- */
.ux-showcase__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.ux-showcase__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  max-width: 560px;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-primary);
}
@media (min-width: 1100px) {
  .ux-showcase__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ux-showcase__card { max-width: none; }
}
.ux-showcase__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text-primary);
}
.ux-showcase__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary, var(--text-primary));
}