/* =============================================================================
   ITDC Systems — the illustrations
   Loaded by every page that places a drawing (page.render(..., art=True) and the
   hand-authored pages tools/sync_art.py stamps one into), after tokens.css and
   styles.css and before home.css.

   The drawings are inline SVG generated by tools/build_tech_art.py: flat,
   geometric, one near-black outline, six fills. This sheet is the vocabulary
   they are written in, and their motion: a gentle float on the loose objects,
   data flowing along the connectors, an LED or two. Every animation stops under
   prefers-reduced-motion, and nothing in a drawing carries information that is
   not also in the page's text.
   ============================================================================= */
:root {
  --art-ink: #1B1B1F;
  --art-blue: #3478F6;
  --art-sky: #C5E5FA;
  --art-green: #22C878;
  --art-yellow: #FFE45C;
  --art-purple: #A49BFA;
  --art-coral: #FF6864;
  --art-surface: #F1F5F9;
  --art-plate: #EAF4FD;
}

/* --- Placement ------------------------------------------------------------- */
.art-fig { margin: 0; }
.art-fig svg, svg.ta { width: 100%; height: auto; overflow: visible; }
/* A case study's drawing beside its title. */
.page-hero__grid--art { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
/* A section head with its drawing beside it; the head's bottom margin moves to the pair. */
.ink-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl) var(--space-5xl); align-items: center; margin-bottom: var(--space-5xl); }
.ink-split .section-head { margin-bottom: 0; }
.ink-split:last-child { margin-bottom: 0; }
.ink-split > :not(.art-fig) > * + * { margin-top: var(--space-xl); }
/* The closing band on the hub pages: the copy keeps its measure, the drawing sits beside it. */
.cta-band--art { text-align: left; }
.cta-band--art .cta-band__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-3xl) var(--space-5xl); align-items: center; }
.cta-band--art .lead { margin-inline: 0; }
.cta-band--art .btn-row, .cta-band--art .cta-band__sig, .cta-band--art .eyebrow { justify-content: flex-start; }
@media (max-width: 991px) {
  .ink-split, .cta-band--art .cta-band__grid, .page-hero__grid--art { grid-template-columns: 1fr; }
  .cta-band--art .art-fig, .page-hero__grid--art .art-fig { max-width: 460px; }
}

/* --- Vocabulary ----------------------------------------------------------- */
/* Line weight: --sw (set per drawing by build_tech_art.svg) makes every outline render at
   about 2 px at the size the site shows it; --fit undoes the fitting scale of the group the
   shapes sit in, so a drawing that was scaled up does not get heavier lines. */
.ta { --lw: calc(var(--sw, 1) / var(--fit, 1)); }
.ta .fit { --lw: calc(var(--sw, 1) / var(--fit, 1)); }
.ta .o { stroke: var(--art-ink); stroke-width: calc(2.4px * var(--lw)); stroke-linejoin: round; stroke-linecap: round; }
.ta .o.thin { stroke-width: calc(1.8px * var(--lw)); }
.ta .o.thick { stroke-width: calc(3.4px * var(--lw)); }
.ta .nostroke { stroke: none; }
.ta .fb { fill: var(--art-blue); }
.ta .fl { fill: var(--art-sky); }
.ta .fg { fill: var(--art-green); }
.ta .fy { fill: var(--art-yellow); }
.ta .fp { fill: var(--art-purple); }
.ta .fc { fill: var(--art-coral); }
.ta .fw { fill: #FFFFFF; }
.ta .fs { fill: var(--art-surface); }
.ta .fk { fill: var(--art-ink); }
.ta .fn { fill: none; }
.ta .ln { fill: none; stroke: var(--art-ink); stroke-width: calc(2.4px * var(--lw)); stroke-linecap: round; }
.ta .ln.thin { stroke-width: calc(1.8px * var(--lw)); }
.ta .ln.thick { stroke-width: calc(3.4px * var(--lw)); }
.ta .ln-soft { stroke-width: calc(3px * var(--lw)); opacity: .28; }
.ta .ground { stroke-width: calc(2.4px * var(--lw)); }
.ta .plate { fill: var(--art-plate); }
.ta .dotgrid { fill: var(--art-ink); opacity: .32; }
.ta .qrf { fill: var(--art-ink); }
.ta .qrm { fill: var(--art-ink); }
.ta .scan { stroke: var(--art-coral); stroke-width: calc(3px * var(--lw)); stroke-linecap: round; }

.ta text { font-family: var(--font-mono); fill: var(--art-ink); }
.ta .t { font-size: 13px; font-weight: 500; letter-spacing: .08em; }
.ta .t-sm { font-size: 10px; font-weight: 500; letter-spacing: .1em; }
.ta .t-b { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.ta .t-xl { font-family: var(--font-display); font-size: 30px; font-weight: 700; }
.ta .t-w { font-family: var(--font-display); font-size: 16px; font-weight: 700; fill: #FFFFFF; letter-spacing: .02em; }
.ta .label { font-weight: 500; letter-spacing: .1em; }
.ta .tl { font-size: 17px; }
.ta .t-wl { font-size: 20px; }

/* --- Connectors ----------------------------------------------------------- */
.ta .wire { fill: none; stroke: var(--art-ink); stroke-width: calc(2.2px * var(--lw)); stroke-linecap: round; stroke-dasharray: 2 9; }
.ta .wire.flow { animation: art-flow 1.6s linear infinite; }
@keyframes art-flow { to { stroke-dashoffset: -22; } }

/* --- Motion ---------------------------------------------------------------- */
.ta .bob-a, .ta .bob-b, .ta .bob-c { transform-box: fill-box; animation: art-bob 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.ta .bob-b { animation-duration: 7s; animation-delay: var(--d, -2.4s); }
.ta .bob-c { animation-duration: 8s; animation-delay: var(--d, -4.8s); --amp: -5px; }
@keyframes art-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--amp, -9px)); } }
.ta .blink { animation: art-blink 2.4s steps(1) infinite; animation-delay: var(--d, 0s); }
@keyframes art-blink { 0%, 70% { opacity: 1; } 71%, 85% { opacity: .25; } 86% { opacity: 1; } }
.ta .spin { transform-box: fill-box; transform-origin: center; animation: art-spin 18s linear infinite; }
@keyframes art-spin { to { transform: rotate(360deg); } }
.ta .wave { transform-box: fill-box; transform-origin: left center; animation: art-wave 3s ease-in-out infinite; }
@keyframes art-wave { 50% { transform: skewY(-6deg) scaleX(.94); } }

/* Motion starts once main.js marks the page .art-live (after load, when idle), and a
   placed drawing below the fold only moves once it has scrolled into view. */
.ta .wire.flow, .ta .bob-a, .ta .bob-b, .ta .bob-c, .ta .blink, .ta .spin, .ta .wave { animation-play-state: paused; }
.art-live .ta .wire.flow, .art-live .ta .bob-a, .art-live .ta .bob-b, .art-live .ta .bob-c,
.art-live .ta .blink, .art-live .ta .spin, .art-live .ta .wave { animation-play-state: running; }
.art-live .art-fig.reveal:not(.is-in) .ta * { animation-play-state: paused; }

/* A drawing placed with figure(): its parts settle in as it scrolls into view. */
.js .art-fig.reveal .deco { opacity: 0; transition: opacity .8s var(--ease-out) .35s; }
.js .art-fig.reveal.is-in .deco { opacity: 1; }

/* Paused when off-screen is the browser's job; paused for those who asked is ours. */
@media (prefers-reduced-motion: reduce) {
  .ta .wire.flow, .ta .bob-a, .ta .bob-b, .ta .bob-c, .ta .blink, .ta .spin, .ta .wave { animation: none; }
  .js .art-fig.reveal .deco { opacity: 1; transition: none; }
}
@media print { .ta * { animation: none !important; } }