/* Talkgate illustrations.
   Hero figures and small inline diagrams built from the identity's own parts: the two quotation
   marks as gateposts, the coral bar as the lintel, and the conversation passing between them as a
   line or a dot. Every colour is a token from site.css, so the same SVG works in light and dark.
   Motion is a single draw-on when a figure enters view, a dot travelling the main path, and sound
   bars that pulse. All of it is off under prefers-reduced-motion, and every figure is complete at
   rest: nothing starts hidden. */

/* ===== Hero with an illustration: copy left, figure right, stacked on narrow screens ===== */
.tm-hero.has-illo .tm-hero-inner {
  max-width: 1200px;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-12);
  align-items: center;
}
.tm-hero-copy { display: grid; gap: var(--space-6); min-width: 0; }
.tm-hero.has-illo h1 { font-size: 56px; line-height: 60px; }
.tg-illo { margin: 0; min-width: 0; display: grid; gap: var(--space-3); }
.tg-illo .tg-art { display: block; width: 100%; height: auto; }
.tg-illo figcaption { max-width: 42ch; }

@media (max-width: 1024px) {
  .tm-hero.has-illo .tm-hero-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-10, 40px); }
  .tm-hero.has-illo h1 { font-size: 48px; line-height: 52px; letter-spacing: -0.02em; }
  .tg-illo { max-width: 560px; }
}
@media (max-width: 480px) {
  .tm-hero.has-illo h1 { font-size: 40px; line-height: 44px; }
}

/* ===== Drawing vocabulary. 2px strokes, round caps, mono labels, tokens only ===== */
.tg-art { font-family: var(--font-mono); font-variant-numeric: tabular-nums; overflow: visible; }
.tg-art text { font-size: 11px; font-weight: 500; fill: var(--ink-muted); }
.tg-art .tg-title { font-size: 12px; font-weight: 500; fill: var(--ink); }
.tg-art .tg-post { fill: var(--wire); }
.tg-art .tg-lintel { fill: none; stroke: var(--signal); stroke-width: 3; stroke-linecap: round; }
.tg-art .tg-line { fill: none; stroke: var(--wire); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tg-art .tg-line-ink { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tg-art .tg-strike { fill: none; stroke: var(--ink-muted); stroke-width: 2; stroke-linecap: round; }
.tg-art .tg-faint { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.tg-art .tg-dotted { fill: none; stroke: var(--ink-muted); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.1 6; }
.tg-art .tg-panel { fill: var(--surface-raised); stroke: var(--wire); stroke-width: 2; stroke-linejoin: round; }
.tg-art .tg-panel-soft { fill: var(--wire-soft); stroke: var(--wire); stroke-width: 2; stroke-linejoin: round; }
.tg-art .tg-panel-faint { fill: var(--surface-raised); stroke: var(--line); stroke-width: 2; stroke-linejoin: round; }
.tg-art .tg-fill-soft { fill: var(--wire-soft); }
.tg-art .tg-fill-wire { fill: var(--wire); }
.tg-art .tg-fill-signal { fill: var(--signal); }
.tg-art .tg-bar { fill: var(--wire); transform-box: fill-box; transform-origin: center; }
.tg-art .tg-dot { fill: var(--signal); offset-distance: 0%; offset-rotate: 0deg; }

/* Small route diagrams on the platform's telephony cards */
.tg-mini { display: block; width: 100%; max-width: 240px; height: auto; margin-bottom: var(--space-2); }

/* Category glyphs on the integrations headings: a line icon beside a word, never alone */
.tg-h2 { display: flex; align-items: flex-start; gap: var(--space-3); }
.tg-h2-icon { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 9px; stroke: var(--wire); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 720px) { .tg-h2-icon { margin-top: 6px; } }

/* ===== Motion: once on entry, then only the dot and the bars ===== */
@media (prefers-reduced-motion: no-preference) {
  .tg-illo.is-in .tg-draw {
    stroke-dasharray: 1 1;
    animation: tg-draw 800ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: var(--d, 0s);
  }
  .tg-illo.is-in .tg-fade {
    animation: tg-fade 500ms ease-out both;
    animation-delay: var(--d, 0.6s);
  }
  .tg-illo.is-in .tg-dot {
    animation: tg-travel var(--t, 6s) linear 1.1s infinite;
  }
  .tg-illo.is-in .tg-bar {
    animation: tg-pulse 1.3s ease-in-out infinite alternate;
    animation-delay: var(--d, 0s);
  }
  @keyframes tg-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes tg-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes tg-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
  @keyframes tg-pulse { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
}