fix(home): animate the why/flow diagram wire vertically on mobile

.gitattributes

@@ -0,0 +1,8 @@
+* text=auto eol=lf
+
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.gif binary
+*.woff binary
+*.woff2 binary

src/components/home/FlowBand.astro

@@ -179,6 +179,16 @@ const modes = ['out', 'in'] as const;
   .flow__card[data-switch-active='in'] .flow__caption {
     color: var(--success-text);
   }
+
+  /* The stacked layout turns the wire vertical, but the rule above is what sets
+     this state's animation and it outranks the one in diagram.css, so the axis
+     has to be restated here or the green wire stops moving. */
+  @media (max-width: 560px) {
+    .flow__card[data-switch-active='in'] .diag__line {
+      background-image: repeating-linear-gradient(180deg, var(--success-text) 0 5px, transparent 5px 10px);
+      animation-name: lbDashY;
+    }
+  }
   .flow__card[data-switch-active='in'] .flow__spec {
     color: var(--text-brand);
     border-color: var(--primary-600);

src/components/home/WhySection.astro

@@ -178,6 +178,12 @@ import { why } from '../../data/home';
     color: var(--success-text);
   }
 
+  @media (max-width: 560px) {
+    .why__card[data-switch-active='3'] .diag__line {
+      background-image: repeating-linear-gradient(180deg, var(--success-text) 0 5px, transparent 5px 10px);
+    }
+  }
+
   .why__status {
     font: var(--weight-regular) 11.5px / 1.5 var(--font-mono);
     color: var(--text-tertiary);

src/styles/diagram.css

@@ -136,4 +136,15 @@
   .diag__wire {
     min-height: 44px;
   }
+  .diag__line {
+    left: 50%;
+    right: auto;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    height: auto;
+    margin: 0 0 0 -1px;
+    background-image: repeating-linear-gradient(180deg, var(--error-text) 0 5px, transparent 5px 10px);
+    animation-name: lbDashY;
+  }
 }