From ef4a19a89b7c1008fee597895c38dfcc7f6cf52a Mon Sep 17 00:00:00 2001
From: Andrew Moore <andrew@blakeslee.xyz>
Date: Sat, 15 Aug 2026 22:38:04 -0700
Subject: [PATCH] Merge nucleic/hazy-harbor-ibis-uoge into main

Mirrored from corpo 8bfa4d2.
---
 src/pages/index.astro | 81 ++++++++++++++++---------------------------
 1 file changed, 29 insertions(+), 52 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index b160e69..2f69852 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -659,6 +659,12 @@ const socialImage = new URL('/og.png?v=3', Astro.site);
   }
 
   .line-research {
+    /* drift-right carries the word 0.045em left of its resting position; give the
+       clipped line that much room on the left so the clip doesn't cut "Solving"
+       off mid-drift, and pull the box back by the same amount so the resting
+       position (and the statement's optical alignment) is unchanged. */
+    padding-left: 0.045em;
+    margin-left: -0.045em;
     animation-delay: 320ms;
   }
 
@@ -675,57 +681,37 @@ const socialImage = new URL('/og.png?v=3', Astro.site);
 
   /* Rests at zero so the headline's left edge is the one the copy below aligns to.
      The drift now arrives at that edge instead of parking 0.045em to the right of
-     it, which was what pushed "Research" off the mission line. */
+     it, which was what pushed "Research" off the mission line.
+
+     `none`, not translate3d(0, 0, 0). The identity 3D transform did nothing visually
+     and pinned the word in an accelerated layer for the life of the page, long after
+     the 12s drift is over. That layer was not the cause of the Safari gradient
+     artifact — see the note on .line-runs .word — but it bought nothing either, and
+     this is the resting form the clean variant was measured against. The keyframe
+     still supplies the 3D form, so the drift itself is composited exactly as before;
+     it just ends in a layer that can be thrown away. */
   .line-research .word {
-    transform: translate3d(0, 0, 0);
+    transform: none;
     animation: drift-right 12s 1.35s ease-in-out backwards;
   }
 
   /* Deliberately wrappable. There is ~5% of slack between "that runs." and the card
      at every width, so the pair only ever separates when the type has been scaled
      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;
-  }
+     column beat one long line across the card.
 
-  /* The swipe crosses “that runs.” once as the second line arrives. It paces
-     across “that”, then significantly accelerates through “runs.” The pseudo
-     duplicates the whole phrase and clips its gradient to the glyphs; its
-     transparent parked positions leave reduced-motion rendering unchanged. */
-  .line-runs .word::after {
-    content: 'the future.';
-    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 / 46%) 48%,
-      rgb(234 248 240 / 46%) 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;
-    /* The delay is set against the line's entrance, not the page's. The park
-       sits just off the first glyph, and the sweep is linear, so the light
-       enters almost the moment the delay ends — the delay IS the arrival time.
-       0.7s launches the dash mid-rise: the line is about half faded-in when
-       the light takes off, the light outruns it down the length of the word,
-       and the sprint finishes right as the line settles (~1.38s) — the words
-       land and the light is already gone. Riding inside the still-fading line
-       also softens the dash's first frames for free. One iteration, by design:
-       a sprint run twice is choreography; run once it is an event. */
-    animation: sheen-pass 0.5s 0.7s linear;
+     The resting offset is a 2D translate, and there used to be a ::after here that
+     swept a light across the phrase by laying a second -webkit-background-clip: text
+     mask over the same glyphs as the green “future.” gradient. That second mask made
+     the green go blocky in macOS Safari 26 on window resize — measured 2026-08-16
+     across eight variants: the only clean ones were the two with no pseudo, and the
+     artifact still appeared with the sweep disabled entirely, so it was the mask
+     sitting there at rest and not the animation. The sweep was worth less than a
+     reliable gradient, so it is gone. Do not reintroduce a text-clipped overlay on
+     this word. */
+  .line-runs .word {
+    transform: translateY(-0.035em);
+    animation: drift-up 11s 1.5s ease-in-out backwards;
   }
 
   .line-runs .that {
@@ -1109,15 +1095,6 @@ const socialImage = new URL('/og.png?v=3', Astro.site);
     from { transform: translate3d(0, 0, 0); }
   }
 
-  /* The first segment advances at a measured linear pace until the light has
-     cleared “that”; the shorter final segment covers the rest of its distance
-     in one third of the time, so “runs.” gets a deliberate 3× burst. */
-  @keyframes sheen-pass {
-    from { background-position: -115% 0; }
-    66.667% { background-position: 18% 0; }
-    to { 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); }