From 883b6b7533269d90c8d10b655b709b59b340f9a9 Mon Sep 17 00:00:00 2001
From: silv4b <brunno.linkin@gmail.com>
Date: Thu, 10 Sep 2026 00:18:10 -0300
Subject: [PATCH 1/3] chore: enforce LF line endings via .gitattributes

---
 .gitattributes | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 .gitattributes

diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..1816d34
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,8 @@
+* text=auto eol=lf
+
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.gif binary
+*.woff binary
+*.woff2 binary

From 5698e3fcdf0e8f6cc76dfa3ac2678483d2509318 Mon Sep 17 00:00:00 2001
From: silv4b <brunno.linkin@gmail.com>
Date: Thu, 10 Sep 2026 00:18:21 -0300
Subject: [PATCH 2/3] fix(home): animate the why/flow diagram wire vertically
 on mobile

---
 src/components/home/FlowBand.astro   |  6 ++++++
 src/components/home/WhySection.astro |  6 ++++++
 src/styles/diagram.css               | 11 +++++++++++
 3 files changed, 23 insertions(+)

diff --git a/src/components/home/FlowBand.astro b/src/components/home/FlowBand.astro
index e814768..74c5103 100644
--- a/src/components/home/FlowBand.astro
+++ b/src/components/home/FlowBand.astro
@@ -179,6 +179,12 @@ const modes = ['out', 'in'] as const;
   .flow__card[data-switch-active='in'] .flow__caption {
     color: var(--success-text);
   }
+
+  @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);
+    }
+  }
   .flow__card[data-switch-active='in'] .flow__spec {
     color: var(--text-brand);
     border-color: var(--primary-600);
diff --git a/src/components/home/WhySection.astro b/src/components/home/WhySection.astro
index 7b14112..35653a4 100644
--- a/src/components/home/WhySection.astro
+++ b/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);
diff --git a/src/styles/diagram.css b/src/styles/diagram.css
index 268f131..25204b7 100644
--- a/src/styles/diagram.css
+++ b/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;
+  }
 }

From c55ddacd9ed443d916ef0dbc4e25b6b13e3aa4e7 Mon Sep 17 00:00:00 2001
From: cevheri <cevheribozoglan@gmail.com>
Date: Sun, 20 Sep 2026 18:43:40 +0300
Subject: [PATCH 3/3] fix(home): keep the flow wire animating once it turns
 green on mobile

The mobile rule in diagram.css sets animation-name: lbDashY on a bare
.diag__line. FlowBand's own .flow__card[data-switch-active='in'] .diag__line
outranks it and had already claimed animation-name: lbDashXR for the
right-to-left desktop direction, so in the 'in' state the wire stacked
vertically while its dashes still travelled along X. On a 2px-wide line that
reads as a wire that has stopped.

Restating the axis next to the background-image the same rule already
overrides puts the fix at the specificity it has to win at. WhySection never
set animation-name, so it inherited the vertical one correctly and is
unchanged.

Measured at 390px: all four card states now compute lbDashY and
background-position advances on Y. At 1280px the lines are still horizontal,
lbDashX and lbDashXR as before.
---
 src/components/home/FlowBand.astro | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/home/FlowBand.astro b/src/components/home/FlowBand.astro
index 74c5103..cedfee0 100644
--- a/src/components/home/FlowBand.astro
+++ b/src/components/home/FlowBand.astro
@@ -180,9 +180,13 @@ const modes = ['out', 'in'] as const;
     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 {