Add animations to hero SVGs for dynamic flow visualization

[amavashev]

Summary

Enhanced both hero SVG files (light and dark themes) with comprehensive animations to create a dynamic, interactive visualization of the enforcement gate workflow. The changes include animated flow dots, pulsing glow effects, budget consumption visualization, and accessibility support for reduced motion preferences.

Key Changes

• Accessibility: Added @media (prefers-reduced-motion: reduce) styles to hide all animations for users who prefer reduced motion
• Flow Animations:
  • Added animated dots that travel along paths from agents to the enforcement gate
  • Implemented separate flow dots for allowed and blocked outcomes
  • Each flow dot has synchronized opacity and motion animations on an 8-second cycle
• Agent Updates:
  • Changed Agent A icon from generic bot head to chat bubble (LLM completion)
  • Changed Agent B icon to magnifying glass (web search)
  • Changed Agent C icon to envelope (send_email) and updated label from tool.db_delete
  • Added visual tints: blue for Agent A, warm/orange for Agent C
  • Added send pulse animations to each agent card
• Gate Enhancements:
  • Added stroke-width animation to shield during validation
  • Implemented scanning effect on shield inner glow with multi-step opacity/stroke animations
• Budget Visualization:
  • Animated budget bar width from 30% → 55% → 80% → 90% (danger state)
  • Dynamic color change to orange (#FF9500) when budget exceeds threshold
  • Swapped percentage text labels with opacity animations (30% → 55% → 80% → 90%)
• Glow Rings: Added synchronized pulsing animations to all three concentric circles around the gate
• Path Markers: Added orange arrow marker for the danger path (Agent C)
• Result Cards: Added flash animations on ALLOWED and BLOCKED card arrivals

Implementation Details

• All animations use SMIL (Scalable Vector Graphics animation) with 8-second cycles and repeatCount="indefinite"
• Flow dots use animateMotion with mpath references for smooth path following
• Staggered keyTimes create a sequential flow: Agent A (0%) → Agent B (5%) → Agent C (10%) → Results (50-85%)
• Text content changes (budget percentages) implemented via opacity swaps since SMIL cannot animate text content directly
• Both SVG files maintain identical animation logic with theme-appropriate colors

https://claude.ai/code/session_01EGvZV9ckmJBJWRwZAMPhYp