/* Shared order-flow animation for project cards and case-study previews. */
  /* Failure-safe delivery flow. The visual tells one complete incident: an
     order enters the mediator, four targets accept it, HubSpot exhausts its
     retries and becomes visible work for a person. Nothing disappears. */
  .viz-ngl {
    --nglf-ok: oklch(from var(--accent) l c 158);
    --nglf-warn: oklch(0.74 0.16 55);
    width: 100%; max-width: 420px; padding: 0 12px;
  }
  .viz-ngl svg { display: block; width: 100%; height: auto; overflow: visible; }
  .viz-ngl text {
    font-family: var(--mono); font-size: 8px; fill: var(--muted);
    transition: fill 0.25s; font-variant-numeric: tabular-nums;
  }
  .viz-ngl .nglf-card {
    fill: var(--surface-sunken); stroke: var(--line-input); stroke-width: 0.8;
    transition: fill 0.3s, stroke 0.3s;
  }
  .viz-ngl .nglf-kicker { font-size: 5.5px; fill: var(--faint); letter-spacing: 0.16em; }
  .viz-ngl .nglf-order-id, .viz-ngl .nglf-queue-label { font-size: 8.5px; fill: var(--text); }
  .viz-ngl .nglf-order.is-lit .nglf-card,
  .viz-ngl .nglf-queue.is-lit .nglf-card {
    fill: oklch(from var(--accent) l c h / 0.12); stroke: var(--accent);
  }
  .viz-ngl .nglf-order.is-lit .nglf-order-id,
  .viz-ngl .nglf-queue.is-lit .nglf-queue-label { fill: var(--accent); }
  .viz-ngl .nglf-link, .viz-ngl .nglf-lane {
    fill: none; stroke: var(--line-strong); stroke-width: 1.2; stroke-linecap: round;
  }
  .viz-ngl .nglf-pulse {
    fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round;
    stroke-dasharray: 16 84; stroke-dashoffset: 16; opacity: 0;
  }
  .viz-ngl .nglf-pulse.is-moving {
    opacity: 1; animation: nglfMove 0.68s cubic-bezier(0.4, 0, 0.6, 1) forwards;
  }
  .viz-ngl .nglf-pulse.is-failing {
    opacity: 1; stroke: var(--nglf-warn);
    animation: nglfMove 0.68s cubic-bezier(0.4, 0, 0.6, 1) forwards;
  }
  @keyframes nglfMove { from { stroke-dashoffset: 16; } to { stroke-dashoffset: -100; } }

  .viz-ngl .nglf-board { fill: var(--surface-sunken); stroke: var(--line); stroke-width: 0.8; }
  .viz-ngl .nglf-board-title { font-size: 5.5px; fill: var(--faint); letter-spacing: 0.16em; }
  .viz-ngl .nglf-label { font-size: 7.5px; fill: var(--muted); }
  .viz-ngl .nglf-status { font-size: 6.5px; fill: var(--faint); letter-spacing: 0.04em; }
  .viz-ngl .nglf-dot { fill: var(--line-strong); transition: fill 0.25s, filter 0.25s; }
  .viz-ngl .nglf-row.is-active .nglf-label,
  .viz-ngl .nglf-row.is-active .nglf-status { fill: var(--accent); }
  .viz-ngl .nglf-row.is-active .nglf-dot { fill: var(--accent); filter: drop-shadow(0 0 5px var(--glow)); }
  .viz-ngl .nglf-row.is-delivered .nglf-label,
  .viz-ngl .nglf-row.is-delivered .nglf-status { fill: var(--nglf-ok); }
  .viz-ngl .nglf-row.is-delivered .nglf-dot { fill: var(--nglf-ok); }
  .viz-ngl .nglf-row.is-retrying .nglf-label,
  .viz-ngl .nglf-row.is-retrying .nglf-status { fill: var(--nglf-warn); }
  .viz-ngl .nglf-row.is-retrying .nglf-dot {
    fill: var(--nglf-warn); filter: drop-shadow(0 0 5px oklch(from var(--nglf-warn) l c h / 0.5));
    animation: nglfWarn 0.8s ease-in-out infinite alternate;
  }
  .viz-ngl .nglf-row.is-backlog .nglf-label,
  .viz-ngl .nglf-row.is-backlog .nglf-status { fill: var(--nglf-warn); }
  .viz-ngl .nglf-row.is-backlog .nglf-dot { fill: var(--nglf-warn); }
  @keyframes nglfWarn { to { opacity: 0.38; } }

  .viz-ngl .nglf-summary text { font-size: 6.2px; fill: var(--faint); letter-spacing: 0.05em; }
  .viz-ngl .nglf-summary tspan { fill: var(--text); }
  .viz-ngl .nglf-summary .nglf-lost { fill: var(--nglf-ok); }

  @media (max-width: 820px) {
    .viz-ngl { padding: 0 5px; }
    .viz-ngl .nglf-label { font-size: 8.5px; }
    .viz-ngl .nglf-status { font-size: 7.2px; }
    .viz-ngl .nglf-order-id, .viz-ngl .nglf-queue-label { font-size: 9.5px; }
  }