fix: align workflow flow dots/lines and add sequential animation

Author: ericallam

docs/src/app/home.css

@@ -110,14 +110,21 @@
 .hp-step-title { font-family: var(--hp-title); color: var(--hp-text); font-weight: 600; margin-bottom: 6px; font-size: 14px; }
 .hp-step-desc { color: var(--hp-text-dim); line-height: 1.5; }
 .hp-step-desc code { font-family: var(--hp-mono); font-size: 12px; color: var(--hp-accent); background: rgba(34, 197, 94, 0.08); padding: 1px 4px; border-radius: 3px; }
-.hp-workflow-flow { display: flex; align-items: center; justify-content: center; padding: 32px 0; }
+.hp-workflow-flow { display: flex; align-items: flex-start; justify-content: center; padding: 32px 0; }
 .hp-flow-step { display: flex; flex-direction: column; align-items: center; gap: 10px; }
-.hp-flow-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--hp-border-bright); border: 2px solid var(--hp-border-bright); display: block; }
-.hp-flow-dot.active { background: var(--hp-accent); border-color: var(--hp-accent); box-shadow: 0 0 8px rgba(34, 197, 94, 0.3); }
-.hp-flow-line { width: 48px; height: 2px; background: var(--hp-border-bright); margin-bottom: 22px; }
-.hp-flow-line.active { background: var(--hp-accent); }
+.hp-flow-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--hp-border-bright); display: block; animation: flow-pulse 5s infinite; animation-delay: calc(var(--step-index) * 1s); }
+.hp-flow-line { width: 48px; height: 2px; background: var(--hp-border-bright); margin-top: 5px; animation: flow-line 5s infinite; animation-delay: calc(var(--line-index) * 1s + 0.5s); }
 .hp-flow-label { font-family: var(--hp-mono); font-size: 12px; color: var(--hp-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
 
+@keyframes flow-pulse {
+  0%, 15% { background: var(--hp-accent); box-shadow: 0 0 8px rgba(168, 255, 83, 0.4); }
+  30%, 100% { background: var(--hp-border-bright); box-shadow: none; }
+}
+@keyframes flow-line {
+  0%, 10% { background: var(--hp-accent); }
+  25%, 100% { background: var(--hp-border-bright); }
+}
+
 /* SKILLS */
 .hp-skills { padding: 64px 0; }
 .hp-skills h2 { font-family: var(--hp-title); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }

docs/src/app/page.tsx

@@ -206,11 +206,11 @@ export default function HomePage() {
           <div className="hp-workflow-flow">
             {['write', 'debug', 'fix', 'strip', 'merge'].map((label, i) => (
               <span key={label} style={{ display: 'contents' }}>
-                <div className="hp-flow-step">
-                  <span className={`hp-flow-dot ${i < 3 ? 'active' : ''}`} />
+                <div className="hp-flow-step" style={{ '--step-index': i } as React.CSSProperties}>
+                  <span className="hp-flow-dot" />
                   <span className="hp-flow-label">{label}</span>
                 </div>
-                {i < 4 && <div className={`hp-flow-line ${i < 2 ? 'active' : ''}`} />}
+                {i < 4 && <div className="hp-flow-line" style={{ '--line-index': i } as React.CSSProperties} />}
               </span>
             ))}
           </div>