I'm building an animated SVG data-flow diagram for a single-file static HTML landing page (dark glas...

I'm building an animated SVG data-flow diagram for a single-file static HTML landing page (dark glassmorphism theme, background #060812, vanilla JS, no build tools, deployed on Netlify as a static file). The diagram visualizes how 8 API data endpoints feed into three output tracks (Oracle, Architect, Muse) in a competition submission. It sits inline in the page flow (not fixed/absolute) inside a max-width 1040px container. The page already has: a canvas particle constellation at z-index 0, CSS floating orbs with filter:blur(100px), a mouse-following spotlight, 3D card tilt via JS mousemove, animated number counters, a CSS light sweep animation, and a boot-sequence terminal with setTimeout-chain typing. All effects are guarded by prefers-reduced-motion. I need comprehensive guidance on building this diagram with these specific visual behaviors: LAYOUT AND GEOMETRY: The diagram has three layers. Top layer: a single "Challenge API" node (circle + label) centered horizontally. Middle layer: 8 smaller nodes arranged horizontally, each labeled with an endpoint name in small monospace text (e.g., "pantries", "demographics", "transit"). Bottom layer: 3 large nodes labeled "Oracle" (purple #8b5cf6), "Architect" (green #22c55e), "Muse" (pink #ec4899). SVG paths connect top→middle (8 lines fanning out) and middle→bottom (with some endpoints connecting to multiple bottom nodes, creating visible forks). I need to understand: (a) what viewBox dimensions work best for this layout — should I go wide and short (e.g., 900x450) or more square, and how does preserveAspectRatio affect readability at different container widths, (b) how to position 8 evenly-spaced nodes horizontally in SVG — should I use hardcoded x coordinates or calculate them from the viewBox width, (c) how to draw aesthetically pleasing curved paths between nodes — should I use quadratic Bezier (Q command), cubic Bezier (C), or simple straight lines (L), and what control point placement produces smooth-looking "cable" curves rather than awkward bends, (d) how to handle the "fork" where one endpoint connects to multiple tracks — should the path split at a visible junction point, or should I draw separate paths from the endpoint node to each destination with slightly different curves, and (e) whether to use SVG <text> elements for labels or <foreignObject> with HTML spans — considering that SVG text doesn't support line wrapping and has cross-browser font rendering differences. LINE-DRAWING ENTRANCE ANIMATION (stroke-dashoffset): I want the paths to "draw themselves" when the section scrolls into view — starting invisible, then the stroke progressively reveals from the API node downward to the track nodes over ~2 seconds. I need to understand: (a) the exact CSS pattern for stroke-dashoffset line drawing — stroke-dasharray: [length]; stroke-dashoffset: [length]; animation: draw 2s ease forwards; with @keyframes draw { to { stroke-dashoffset: 0; } } — and whether stroke-dasharray values need to match the exact SVG path length or can be approximate/oversized, (b) how to get path lengths for curved SVG paths — can I use getTotalLength() in a setup script, or do I need to hardcode lengths, and does the value change when the SVG scales via viewBox, (c) how to stagger the drawing so top→middle paths draw first (0-1s), then middle→bottom paths draw second (1-2s) — is this just CSS animation-delay, (d) whether stroke-dashoffset animation works correctly on SVG <path> elements inside inline SVGs (not <img> or <object>) in all browsers (Chrome, Firefox, Edge, Safari), and (e) how to trigger the animation only when the section scrolls into view — should I use IntersectionObserver to add a class that starts the animation, or is there a CSS-only approach using animation-play-state: paused toggled by a class. FLOWING DOT ANIMATIONS (data packets along paths): After the lines finish drawing, small colored dots (3-4px circles) should continuously travel along the paths from top to bottom, like data packets in fiber optic cables. When they reach a track node at the bottom, the node should briefly pulse (scale + glow). I need to understand: (a) SVG SMIL <animateMotion> with <mpath href="#pathId"/> versus CSS offset-path: url(#pathId) with offset-distance animation — which has better browser support in 2025-2026, especially Safari, and which is easier to implement for multiple dots on multiple paths, (b) if using <animateMotion>, how to control timing — dur, repeatCount="indefinite", begin (to delay start until after line-drawing completes), and how to stagger multiple dots on the same path so they're not all bunched together, (c) if using CSS offset-path, whether offset-path: url(#pathId) actually works in Safari and Firefox to reference an SVG path element by ID, or whether I need to inline the path data as offset-path: path('M...') (which means duplicating every path in CSS), (d) how to make the dot "glow" — should I use filter: drop-shadow() on the circle, an SVG <filter> with <feGaussianBlur>, or just a larger semi-transparent circle behind the dot, (e) how many dots per path looks good without being overwhelming — should each path have 1 dot, 2-3 staggered dots, or a variable number, and (f) how to handle the "fork" where one endpoint feeds multiple tracks — should I have one dot that visually splits into multiple dots at the junction, or just have separate dots on each sub-path that happen to pass through the same endpoint node at different times. NODE STYLING AND PULSE EFFECTS: The "Challenge API" node at the top should have a subtle continuous pulse (heartbeat). The three track nodes at the bottom should briefly pulse (scale up + glow) each time a dot arrives. I need to understand: (a) the transform-box: fill-box + transform-origin: center pattern for scaling SVG elements from their center — what's the browser support, and is there a fallback for older browsers, (b) whether CSS @keyframes animations work on SVG <circle> and <g> elements the same way they work on HTML elements — specifically transform: scale(), filter: drop-shadow(), and opacity, (c) how to make a node pulse when a dot arrives — can I time the pulse animation to match the dot's travel duration (e.g., pulse every 2s matching the dot's dur="2s"), or do I need JS to detect dot arrival, and (d) whether SVG <filter> elements (for glow effects) should be defined in a <defs> block and referenced by ID, and whether this works in all browsers for inline SVGs. ACCESSIBILITY AND REDUCED MOTION: (a) Can SMIL animations (<animateMotion>, <animate>) be stopped by a CSS prefers-reduced-motion media query, or do they require JavaScript (document.querySelectorAll('animateMotion').forEach(a => a.remove())) or SVG attribute manipulation (animation.endElement())? (b) What's the correct ARIA labeling for a decorative data-flow diagram — role="img" with aria-label on the SVG, or aria-hidden="true" if it's purely decorative? (c) For reduced motion, should the diagram show a static snapshot (all lines drawn, no dots, no pulses) or be hidden entirely? RESPONSIVE AND MOBILE CONSIDERATIONS: (a) At viewport widths below 600px, the 8 endpoint labels will be too small to read. Should I hide the labels, reduce the number of visible endpoints, or replace the full diagram with a simplified 3-node version (API → Oracle/Architect/Muse)? (b) Does inline SVG with viewBox and width: 100% actually scale correctly on iOS Safari, or are there known viewport bugs? (c) If I use <foreignObject> for labels, does iOS Safari render them correctly, or should I avoid foreignObject entirely? SYNERGY CARDS BELOW THE DIAGRAM: Below the SVG, three "synergy cards" in a row, each showing a cross-track data thread (e.g., "Oracle identified X → Architect serves Y → Muse reaches Z"). I need to understand: (a) should these be regular HTML cards (matching the existing glassmorphism card style) positioned below the SVG, or embedded inside the SVG using <foreignObject>, (b) the content for these cards needs to reference specific data from the competition run — should they be populated from Jinja2 variables (requiring harness changes to extract synergy examples from Oracle checkpoints), hardcoded for the KC dataset, or written generically enough to work with any civic domain, and (c) should any element in the synergy cards be clickable (e.g., the Architect column links to the Architect dashboard with a deep link to a specific ZIP), and if so, how do I construct the deep link URL using Jinja2 variables. PERFORMANCE AND COMPOSITING: (a) With the particle canvas already running at 60fps, an SVG with ~20 continuously animating dots, and backdrop-filter on nearby glassmorphism elements, is there a compositing concern? Does inline SVG animation force re-paint on every frame, or is it GPU-composited like CSS animations? (b) Should the SVG have will-change: transform or contain: content to isolate it as a compositing layer? (c) Is SMIL animation performance comparable to CSS animation performance, or does SMIL trigger more re-layouts? CROSS-BROWSER SVG ANIMATION COMPATIBILITY: Give me a compatibility matrix for these specific features across Chrome 120+, Firefox 120+, Safari 17+, and Edge 120+: (a) stroke-dashoffset animation on <path>, (b) <animateMotion> with <mpath>, (c) CSS offset-path: url(#id) referencing SVG path, (d) CSS offset-path: path('M...') with inline path data, (e) transform-box: fill-box on SVG elements, (f) filter: drop-shadow() on SVG elements, (g) CSS animations (@keyframes) targeting SVG element properties.