fix: replace SVG animate with CSS animation for basic edge to prevent bounce

SVG <animate> restarts on every React re-render (especially visible under
StrictMode double-invoke in dev), causing a visible bounce. CSS animation
runs on the compositor thread independently of React renders.

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

@@ -255,18 +255,12 @@ export function HomelableEdge({ id, source, target, sourceX, sourceY, targetX, t
           stroke={strokeColor}
           strokeWidth={style.strokeWidth as number ?? 2}
           strokeDasharray="5"
-          style={{ pointerEvents: 'none' }}
+          style={{
-        >
+            pointerEvents: 'none',
-          {/* Always animate physically downward: if source is above target the path
+            animation: 'homelable-basic-dash 0.5s linear infinite',
-              goes forward (source→target = down), otherwise reverse */}
+            animationDirection: sourceY <= targetY ? 'normal' : 'reverse',
-          <animate
+          }}
-            attributeName="stroke-dashoffset"
+        />
-            from={sourceY <= targetY ? '10' : '0'}
-            to={sourceY <= targetY ? '0' : '10'}
-            dur="0.5s"
-            repeatCount="indefinite"
-          />
-        </path>
       )}
 
       {animMode === 'snake' && (

frontend/src/index.css

@@ -6,6 +6,11 @@
 
 @custom-variant dark (&:is(.dark *));
 
+@keyframes homelable-basic-dash {
+  from { stroke-dashoffset: 10; }
+  to   { stroke-dashoffset: 0; }
+}
+
 /* Homelable dark theme — always dark */
 :root {
     --background: #0d1117;