From 9a316b7dadf28d7ea58bd1b8eac5e214efd5e1a0 Mon Sep 17 00:00:00 2001
From: Andrew Moore <andrew@blakeslee.xyz>
Date: Mon, 10 Aug 2026 02:59:58 -0700
Subject: [PATCH] Merge nucleic/olive-north-lynx-rstf into main

Mirrored from corpo 39013c0.
---
 src/pages/index.astro | 53 ++++++++-----------------------------------
 1 file changed, 9 insertions(+), 44 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 137287b..efe6b81 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -611,52 +611,15 @@ const canonical = new URL('/', Astro.site);
     animation: drift-up 11s 1.5s ease-in-out backwards;
   }
 
-  /* The swipe: a soft blade of the palette's pale green crossing the line left to
-     right — the way the sentence reads, the way the verb points — then resting for
-     the balance of the cycle. What separates this from a loading shimmer is
-     everything quantitative: the light is the gradient's own mint rather than
-     white, it happens exactly once — a single ~0.65s dash as the line arrives,
-     never repeating — and the band is asymmetric — a long dim tail behind a
-     crisp leading edge — so it reads as something moving through, not a surface
-     effect.
-     Over "that" (flat secondary grey) the glint is faint; over the "runs."
-     gradient it lands hardest on the dark tail end, so the pass finishes brightest
-     at the period — the light arrives where the sentence does.
-
-     It rides a pseudo-element that duplicates the line's text and clips the band
-     to the glyphs. A pseudo because the front must cross both words at one screen
-     speed, and background-position percentages are relative to each element's own
-     width — separate backgrounds on .that and .runs cannot share a speed. The
-     content string must match the markup ("that" space "runs.") and the
-     padding-right must match .word's, or the duplicate lays out on different
-     lines-breaks than the text it overlays. Accessibility is already handled
-     above this: the h1's aria-label replaces every descendant, this copy
-     included.
-
-     The band is a plateau, not a spike — alpha holds at its peak for ~14% of the
-     image — and its white is set above the brightest glyph pixel. Both are
-     measured corrections: a single peak stop averaged away to a couple of RGB
-     levels across a bucket of glyphs, and a mint as bright as the "runs."
-     gradient's own start (green 234) mathematically cannot lift it — a normal
-     blend brightens in proportion to the distance left to white. The dip over
-     that bright stretch never fully goes away; it just means the light lands
-     hardest where the type is darkest, which is what a real glint over a
-     gradient does. The pass ends on the darkest glyphs, so the period is where
-     the light finishes brightest.
-
-     Geometry: the image is 60% of the line's width, so the position percentage
-     maps offset = 0.4 x width x p. Parked at -115% only the image's trailing
-     transparent region (past 71%) can overlap the line — off-glyph by
-     construction, which is what reduced-motion needs: the global animation: none
-     leaves the pseudo at this specified position and the line renders exactly as
-     it did before this existed. 235% clears the tail past the right edge; when
-     the single run ends, the value reverts to the park — both states are
-     invisible, so there is nothing to fill. */
-  .line-runs .word::after {
-    content: 'that runs.';
+  /* The swipe is a soft pale-green blade crossing only “runs.” once as the
+     second line arrives. The pseudo-element duplicates the verb, clips its
+     gradient to those glyphs, and is intentionally held by .runs so “that”
+     stays static. Its transparent parked positions also leave reduced-motion
+     rendering unchanged. */
+  .line-runs .runs::after {
+    content: 'runs.';
     position: absolute;
     inset: 0;
-    padding-right: 0.06em;
     color: transparent;
     background-image: linear-gradient(
       100deg,
@@ -690,6 +653,8 @@ const canonical = new URL('/', Astro.site);
   }
 
   .line-runs .runs {
+    position: relative;
+    display: inline-block;
     color: transparent;
     background: linear-gradient(100deg, #cdead9 8%, #2f8f5c 82%);
     background-clip: text;