/* Native SVG packets follow the existing diagram. All motion is opt-in via JS. */
[data-hero-flow] { --flow-duration: 6.4s; }
[data-hero-flow] .map-connectors { display: block; }
[data-hero-flow] .flow-packet { opacity: 0; fill: var(--nf-accent); stroke: var(--nf-canvas); stroke-width: 1.25; }
[data-hero-flow] .flow-junction { opacity: .45; }
[data-hero-flow] .flow-output { display: block; width: 40px; height: 42px; overflow: visible; }
[data-hero-flow] .flow-output path { fill: none; stroke: var(--nf-accent); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
[data-hero-flow] .map-core::before { content: ""; position: absolute; inset: -2px; border: 2px solid var(--nf-accent); border-radius: inherit; opacity: 0; pointer-events: none; }
[data-hero-flow] .flow-core-port { position: absolute; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--nf-accent); opacity: .35; pointer-events: none; }
[data-hero-flow] .flow-core-in { top: -3px; }
[data-hero-flow] .flow-core-out { bottom: -3px; }
[data-hero-flow] .map-result { position: relative; }
[data-hero-flow] .map-result::after { content: ""; position: absolute; left: calc(50% - 28px); bottom: -.55rem; width: 56px; height: 2px; border-radius: 2px; background: var(--nf-accent); opacity: 0; pointer-events: none; }

[data-hero-flow].flow-ready .flow-packet-data { animation: flow-data var(--flow-duration) linear infinite; }
[data-hero-flow].flow-ready .flow-packet-systems { animation: flow-systems var(--flow-duration) linear infinite; }
[data-hero-flow].flow-ready .flow-packet-teams { animation: flow-teams var(--flow-duration) linear infinite; }
[data-hero-flow].flow-ready .flow-packet-output { animation: flow-output var(--flow-duration) linear infinite; }
[data-hero-flow].flow-ready .map-core::before { animation: flow-core var(--flow-duration) ease-in-out infinite; }
[data-hero-flow].flow-ready .flow-core-in { animation: flow-receive var(--flow-duration) ease-in-out infinite; }
[data-hero-flow].flow-ready .flow-core-out { animation: flow-transmit var(--flow-duration) ease-in-out infinite; }
[data-hero-flow].flow-ready .map-result::after { animation: flow-result var(--flow-duration) ease-in-out infinite; }
[data-hero-flow].flow-is-paused .flow-packet,
[data-hero-flow].flow-is-paused .flow-core-port,
[data-hero-flow].flow-is-paused .map-core::before,
[data-hero-flow].flow-is-paused .map-result::after { animation-play-state: paused; }

[data-hero-flow] .map-note { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .4rem; }
[data-hero-flow] .map-note > span:first-child { margin-right: 0; }
[data-hero-flow] .map-note > span[data-i18n] { flex: 1; min-width: 9rem; }
[data-hero-flow] .flow-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; flex: none; min-height: 36px; padding: .35rem .55rem; margin-left: auto; border: 1px solid var(--nf-line); border-radius: var(--radius-sm); background: var(--nf-surface-2); color: var(--nf-text); font: inherit; font-size: .65rem; line-height: 1.2; cursor: pointer; }
[data-hero-flow] .flow-toggle[hidden] { display: none; }
[data-hero-flow] .flow-toggle:hover:not(:disabled) { border-color: var(--nf-accent); color: var(--nf-heading); }
[data-hero-flow] .flow-toggle:focus-visible { outline: 2px solid var(--nf-accent); outline-offset: 3px; }
[data-hero-flow] .flow-toggle:disabled { cursor: default; color: var(--nf-muted); }
[data-hero-flow] .flow-toggle svg { display: block; flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
[data-hero-flow] .flow-toggle .flow-play-icon { display: none; }
[data-hero-flow] .flow-toggle[data-paused="true"] .flow-pause-icon { display: none; }
[data-hero-flow] .flow-toggle[data-paused="true"] .flow-play-icon { display: block; }

@keyframes flow-data { 0%, 5%, 41%, 100% { opacity: 0; } 8%, 37% { opacity: 1; } }
@keyframes flow-systems { 0%, 17%, 45%, 100% { opacity: 0; } 20%, 41% { opacity: 1; } }
@keyframes flow-teams { 0%, 11%, 49%, 100% { opacity: 0; } 14%, 45% { opacity: 1; } }
@keyframes flow-output { 0%, 59%, 88%, 100% { opacity: 0; } 63%, 83% { opacity: 1; } }
@keyframes flow-core { 0%, 32%, 72%, 100% { opacity: 0; } 48%, 57% { opacity: .65; } }
@keyframes flow-receive { 0%, 30%, 61%, 100% { opacity: .35; } 40%, 48% { opacity: 1; } }
@keyframes flow-transmit { 0%, 49%, 87%, 100% { opacity: .35; } 61%, 71% { opacity: 1; } }
@keyframes flow-result { 0%, 74%, 100% { opacity: 0; } 86%, 91% { opacity: .7; } }

@media (max-width: 760px) { [data-hero-flow] .flow-toggle { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  [data-hero-flow].flow-ready .flow-packet,
  [data-hero-flow].flow-ready .flow-core-port,
  [data-hero-flow].flow-ready .map-core::before,
  [data-hero-flow].flow-ready .map-result::after { animation: none; }
  [data-hero-flow] .flow-packet,
  [data-hero-flow] .map-core::before,
  [data-hero-flow] .map-result::after { opacity: 0; }
}