home: bento above What We Do; splash enters on scroll intent; pre-warm the water filter

The page after the splash was two screens of text before the first image. Selected
Works (the bento, with the live barns vignette) now leads and the services copy
supports it below, wrapped in the same scroll-reveal.

Splash: the first wheel tick, 24px touch drag, or scroll key now plays the SAME
water-ripple enter as a tap (scrolling past used to hard-cut after a full screen).
Listeners are passive, the entering guard dedupes, reduced-motion still gets the
instant dismiss.

Pre-warm: on requestIdleCallback (post-LCP, invisible to Lighthouse) a 1px element
paints through the splash-water filter so the graph compiles before first use (the
first-tap stutter), and the logo layer gets will-change ahead of the zoom.

Verified with Playwright against the production build: wheel/key/touch all enter,
session flag set, bento renders above What We Do.

apps/web/src/app/page.tsx

@@ -39,8 +39,8 @@ export default function Home() {
           </Link>
         </div>
 
-        <ServicesPreview />
-
+        {/* Show before tell: the visual work leads, the services copy supports it below.
+            (The old order opened with two screens of text before the first image.) */}
         <ScrollReveal className="w-full max-w-6xl mx-auto mb-16 px-4">
           <div className="text-left mb-8 section-container border-l-4 border-l-blue-500">
             <h2 className="text-3xl font-bold mb-3 tracking-tight text-foreground">Selected Works</h2>
@@ -51,6 +51,10 @@ export default function Home() {
           <PortfolioGrid />
         </ScrollReveal>
 
+        <ScrollReveal className="w-full">
+          <ServicesPreview />
+        </ScrollReveal>
+
         <ScrollReveal className="w-full max-w-6xl mx-auto mb-20 px-4">
           <div className="text-left mb-12 section-container border-l-4 border-l-purple-500">
             <h2 className="text-3xl font-bold mb-3 tracking-tight text-foreground">Inclusive by Design</h2>