feat: add Basic edge animation with consistent downward direction

Adds a "basic" animation type that uses React Flow's native moving-dash
style — the entire stroke is animated dashes with no solid line underneath.
Direction is always physically downward (top node → bottom node) regardless
of which end was the source when the edge was drawn.

frontend/src/components/canvas/edges/index.tsx

@@ -246,7 +246,28 @@ export function HomelableEdge({ id, source, target, sourceX, sourceY, targetX, t
 
   return (
     <>
-      <BaseEdge id={id} path={edgePath} style={style} interactionWidth={16} animated={animMode === 'basic'} />
+      <BaseEdge id={id} path={edgePath} style={animMode === 'basic' ? { ...style, stroke: 'transparent' } : style} interactionWidth={16} />
+
+      {animMode === 'basic' && (
+        <path
+          d={edgePath}
+          fill="none"
+          stroke={strokeColor}
+          strokeWidth={style.strokeWidth as number ?? 2}
+          strokeDasharray="5"
+          style={{ pointerEvents: 'none' }}
+        >
+          {/* Always animate physically downward: if source is above target the path
+              goes forward (source→target = down), otherwise reverse */}
+          <animate
+            attributeName="stroke-dashoffset"
+            from={sourceY <= targetY ? '10' : '0'}
+            to={sourceY <= targetY ? '0' : '10'}
+            dur="0.5s"
+            repeatCount="indefinite"
+          />
+        </path>
+      )}
 
       {animMode === 'snake' && (
         <path