From cfae5f8b8564649d3ab3a13b86cda181f485d88e Mon Sep 17 00:00:00 2001
From: Andrew Moore <andrew@blakeslee.xyz>
Date: Mon, 10 Aug 2026 02:12:55 -0700
Subject: [PATCH] Merge nucleic/frosty-grove-shrew-pb0i into main

Mirrored from corpo aadc895.
---
 src/pages/index.astro | 74 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index fd6f209..d1b90ab 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -527,10 +527,74 @@ const canonical = new URL('/', Astro.site);
      past what the column can hold — at which point two short lines inside the
      column beat one long line across the card. */
   .line-runs .word {
+    position: relative;
     transform: translate3d(0, -0.035em, 0);
     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, the pass takes ~2.6s rather than one, it recurs every 11s rather than
+     immediately, 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, and
+     the snap back between iterations connects two invisible states. */
+  .line-runs .word::after {
+    content: 'that runs.';
+    position: absolute;
+    inset: 0;
+    padding-right: 0.06em;
+    color: transparent;
+    background-image: linear-gradient(
+      100deg,
+      transparent 20%,
+      rgb(234 248 240 / 12%) 38%,
+      rgb(234 248 240 / 42%) 48%,
+      rgb(234 248 240 / 42%) 62%,
+      rgb(234 248 240 / 8%) 68%,
+      transparent 71%
+    );
+    background-repeat: no-repeat;
+    background-size: 60% 100%;
+    background-position: -115% 0;
+    background-clip: text;
+    -webkit-background-clip: text;
+    pointer-events: none;
+    animation: sheen-pass 11s 2.6s ease-in-out infinite;
+  }
+
   .line-runs .that {
     color: var(--secondary);
   }
@@ -671,6 +735,16 @@ const canonical = new URL('/', Astro.site);
     from { transform: translate3d(0, 0, 0); }
   }
 
+  /* The pass occupies the first 24% of the cycle (~2.6s of 11s) and the rest is
+     dwell — the hold keyframe is constant, so nothing invalidates paint between
+     passes. ease-in-out applies per segment: the blade gathers speed and eases
+     out, rather than strafing across at the linear rate loaders use. */
+  @keyframes sheen-pass {
+    0% { background-position: -115% 0; }
+    26% { background-position: 235% 0; }
+    100% { background-position: 235% 0; }
+  }
+
   @keyframes haze-drift {
     from { transform: translate3d(-9%, 3%, 0) rotate(-0.8deg); }
     to { transform: translate3d(10%, -4%, 0) rotate(0.8deg); }