diff --git a/src/components/DebugOverlay.svelte b/src/components/DebugOverlay.svelte
index 84dddae..43b6285 100644
--- a/src/components/DebugOverlay.svelte
+++ b/src/components/DebugOverlay.svelte
@@ -11,6 +11,8 @@
     let visible = $state(false);
     let stats = $state(null);
     let fps = $state(0);
+    let drops = $state(0); // main-thread frames >25ms since overlay opened
+    let worstGap = $state(0);
     let dlSpeed = $state(0); // bytes/sec of the CURRENT track's stream
 
     function onKeydown(e) {
@@ -45,9 +47,20 @@
 
         let frames = 0;
         let fpsWindow = performance.now();
+        let prevFrame = performance.now();
+        drops = 0;
+        worstGap = 0;
         let raf = requestAnimationFrame(function loop() {
             frames += 1;
             const now = performance.now();
+            // Main-thread frame gap — the jank signal. >25ms = a frame the
+            // user can feel; count it and remember the worst.
+            const gap = now - prevFrame;
+            prevFrame = now;
+            if (gap > 25) {
+                drops += 1;
+                if (gap > worstGap) worstGap = Math.round(gap);
+            }
             if (now - fpsWindow >= 500) {
                 fps = Math.round((frames * 1000) / (now - fpsWindow));
                 frames = 0;
@@ -80,7 +93,7 @@
 <svelte:window onkeydown={onKeydown} />
 
 {#if visible}
-    <aside class="debug-overlay" aria-hidden="true">
+    <aside class="debug-overlay">
         <div class="hdr">DEBUG <span class="dim">Ctrl+Shift+D</span></div>
         {#if stats}
             <div class="sec">
@@ -91,7 +104,10 @@
                 <div><b>NET</b> ↓ {rate(stats.netRxBps)} · ↑ {rate(stats.netTxBps)}</div>
             </div>
             <div class="sec">
-                <div><b>FPS</b> {fps}</div>
+                <div>
+                    <b>FPS</b> {fps} · drops {drops}{#if worstGap > 0}&nbsp;· worst {worstGap}ms{/if}
+                    <button class="mini" onclick={() => { drops = 0; worstGap = 0; }}>reset</button>
+                </div>
                 <div>
                     <b>PLAYER</b> {player.status}{player.track ? ` · ${player.track.title}` : ""}
                     {#if stats.mainFadeGain != null && stats.mainFadeGain < 0.999}· fade {stats.mainFadeGain.toFixed(2)}{/if}
@@ -195,4 +211,27 @@
         height: 100%;
         background: #7fd0ff;
     }
+    /* The overlay is passthrough glass (pointer-events: none on the aside)
+       — only its buttons take clicks. */
+    button {
+        pointer-events: auto;
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        border-radius: 4px;
+        color: #d7e0ea;
+        font: inherit;
+        font-size: 10px;
+        padding: 1px 7px;
+        margin-left: 4px;
+        cursor: pointer;
+    }
+    button:hover {
+        border-color: #7fd0ff;
+        color: #fff;
+    }
+    button.mini {
+        font-size: 9px;
+        padding: 0 5px;
+        opacity: 0.7;
+    }
 </style>
diff --git a/src/lib/scrollbar.js b/src/lib/scrollbar.js
index 68d5d13..80b9784 100644
--- a/src/lib/scrollbar.js
+++ b/src/lib/scrollbar.js
@@ -26,6 +26,21 @@
 const PAD = 8; // gap between the thumb's travel and the top header / bottom edge
 const HOVER_ZONE = 22; // px in from the right edge that reveals the thumb on hover
 
+// Scroll-driven-animation support, gated EXACTLY like CatalogArtist's
+// scrollDriven const so the two can never disagree about which engine owns
+// per-scroll motion. Where supported, the thumb's slide is a compositor
+// scroll-driven animation (float-thumb-ride in global.css) and onScroll never
+// reads scrollTop at all — the per-scroll place() read was forcing a full
+// style+layout pass every frame on pages whose scroll-driven animations had
+// already dirtied style (measured: 652 forced UpdateStyleAndLayout, ~248ms
+// per 6.9s of continuous scrolling on the artist page). The thumb's mapping
+// is exactly linear in scrollTop — y = (topInset - padTop) +
+// (scrollTop / maxScroll) * (trackH - thumbH) — so the default animation
+// range (the scroller's entire scroll range) reproduces it identically;
+// measure() writes the two endpoint vars. The !SDA path is byte-identical to
+// the old behavior.
+const SDA = typeof CSS !== "undefined" && CSS.supports("animation-timeline", "scroll()");
+
 export function floatScroll(node) {
     node.classList.add("float-scroll");
     node.style.scrollbarWidth = "none"; // inline: beats scoped component rules
@@ -40,6 +55,16 @@ export function floatScroll(node) {
     thumb.className = "float-thumb";
     rail.appendChild(thumb);
     node.prepend(rail);
+    if (SDA) {
+        // scroll(nearest) from the thumb resolves to `node`: the only
+        // intermediate ancestor is the zero-height .float-rail, which is not
+        // a scroll container (no overflow set — the thumb visibly hangs out
+        // of its zero-height box, so it could never be otherwise). The named
+        // --artist-pane timeline lives on the same element on the artist
+        // page; nearest-lookup and the name agree there by construction.
+        thumb.style.animation = "float-thumb-ride auto linear both";
+        thumb.style.animationTimeline = "scroll(nearest block)";
+    }
 
     let hideTimer = 0;
     let dragging = false;
@@ -112,7 +137,21 @@ export function floatScroll(node) {
         maxScroll = scrollH - viewH;
         thumb.style.display = "block";
         thumb.style.height = `${thumbH}px`;
-        place();
+        if (SDA) {
+            // The ride's two endpoints (see float-thumb-ride in global.css).
+            // Progress over the default range is scrollTop / maxScroll — the
+            // exact `ratio` place() computes — so the animated transform is
+            // the same pixel place() would have written at every scrollTop.
+            // An inline transform would lose to the running animation anyway,
+            // so the place() call below is gated to the fallback path.
+            thumb.style.setProperty("--ft-y0", `${topInset - padTop}px`);
+            thumb.style.setProperty(
+                "--ft-y1",
+                `${topInset - padTop + Math.max(0, trackH - thumbH)}px`,
+            );
+        } else {
+            place();
+        }
     }
     function scheduleMeasure() {
         if (!measureRaf) measureRaf = requestAnimationFrame(measure);
@@ -130,6 +169,12 @@ export function floatScroll(node) {
     }
 
     function onScroll() {
+        // SDA path: the compositor owns the slide; touching scrollTop here
+        // would force the style+layout pass this fix exists to remove.
+        if (SDA) {
+            show();
+            return;
+        }
         place();
         show();
     }
diff --git a/src/styles/global.css b/src/styles/global.css
index b05e370..4d44a23 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -130,6 +130,21 @@
     opacity: 1;
     pointer-events: auto;
 }
+/* The thumb's slide as a scroll-driven animation (scrollbar.js sets it up
+   where animation-timeline is supported). Endpoints are written by measure():
+   --ft-y0 = topInset - padTop, --ft-y1 = --ft-y0 + (trackH - thumbH). The
+   default animation range spans the scroller's whole scroll range, so linear
+   progress IS scrollTop / maxScroll — the exact ratio the JS fallback
+   computes — and the compositor tracks the scroll with zero main-thread
+   work (and none of the fallback's one-frame lag under threaded scrolling). */
+@keyframes float-thumb-ride {
+    from {
+        transform: translateY(var(--ft-y0, 0px));
+    }
+    to {
+        transform: translateY(var(--ft-y1, 0px));
+    }
+}
 
 * {
     margin: 0;
diff --git a/src/views/CatalogArtist.svelte b/src/views/CatalogArtist.svelte
index 6bafb5f..0ab9f1b 100644
--- a/src/views/CatalogArtist.svelte
+++ b/src/views/CatalogArtist.svelte
@@ -16,9 +16,6 @@
         getCatalogHeroPreview,
         getCachedCatalogHeroArt,
         getCatalogHeroArt,
-        clearCatalogHeroArtCache,
-        invalidateCatalogArtist,
-        openCatalogArtist,
         artBroken,
         markArtBroken,
         coverUpgrades,
@@ -116,6 +113,151 @@
         return () => clearTimeout(t);
     });
 
+    // THE HERO PIPELINE (Kyle, 2026-07-24 — the approved configuration,
+    // now unconditional):
+    //   - Crossfade twins: the main-thread blur filter rides on the hero
+    //     layers are retired for static-filtered twin layers cross-faded
+    //     by a composited opacity scroll-driven animation (see the twin
+    //     CSS in the @supports block; the @supports-not fallback keeps
+    //     the --p filter rides on the originals and simply never shows
+    //     the twins).
+    //   - No bloom strip: the blurred hero copy behind the glass bar is
+    //     retired; the seam tail alone carries the band.
+    //   - The seam tail (Kyle's design, round 3): a TAIL rising from
+    //     the HERO'S OWN TOP EDGE — a mirrored strip of the artwork
+    //     itself, colour-continuous with the hero by construction — that
+    //     RIDES WITH the hero (same squeeze, same gating), so the edge
+    //     carries its own soft lead-in and a hard line never exists, at
+    //     rest or mid-scroll. Nothing is anchored to the bar and nothing
+    //     extends below the hero's edge. Zero per-frame statics.
+
+    // GPU-hero twin: a live canvas has no static twin, so on every 'ready'
+    // the finished frame is copied once into a plain canvas that the
+    // pre-filtered twin displays under a STATIC CSS filter. drawImage must
+    // happen in the same task as renderer.render() (a WebGL drawing buffer
+    // does not survive the compositor pass), which gpuHeroReady is — it is
+    // called synchronously after render.
+    let gpuTwinBox = $state(null);
+    // Clamped-edge blur bake: pad the source with edge-replicated pixels,
+    // blur, crop back — a blurred copy that is pixel-aligned with its
+    // source (same box, same aspect) and has NO transparent fringe at any
+    // edge. This is the underlying fix for the twin-edge bleed: a CSS
+    // filter blur samples transparency outside the element and fades the
+    // border; baking with clamp-to-edge sampling never does. Runs once
+    // per artwork (load/rotation), never per frame.
+    function bakeBlur(src, w, h, radius) {
+        const pad = Math.ceil(radius * 3);
+        const padded = document.createElement("canvas");
+        padded.width = w + pad * 2;
+        padded.height = h + pad * 2;
+        const g = padded.getContext("2d");
+        // Centre, four edge strips stretched from 1px slices, four corners.
+        g.drawImage(src, 0, 0, w, h, pad, pad, w, h);
+        g.drawImage(src, 0, 0, 1, h, 0, pad, pad, h); // left
+        g.drawImage(src, w - 1, 0, 1, h, w + pad, pad, pad, h); // right
+        g.drawImage(src, 0, 0, w, 1, pad, 0, w, pad); // top
+        g.drawImage(src, 0, h - 1, w, 1, pad, h + pad, w, pad); // bottom
+        g.drawImage(src, 0, 0, 1, 1, 0, 0, pad, pad); // corners
+        g.drawImage(src, w - 1, 0, 1, 1, w + pad, 0, pad, pad);
+        g.drawImage(src, 0, h - 1, 1, 1, 0, h + pad, pad, pad);
+        g.drawImage(src, w - 1, h - 1, 1, 1, w + pad, h + pad, pad, pad);
+        const out = document.createElement("canvas");
+        out.width = w;
+        out.height = h;
+        const og = out.getContext("2d");
+        og.filter = `blur(${radius}px)`;
+        og.drawImage(padded, -pad, -pad);
+        return out;
+    }
+
+    // Action for the img-path banner twin: a <canvas> that renders the
+    // clamp-baked blur of the given url. Display-only (no pixel readback),
+    // so remote artwork without CORS headers still works.
+    function bakedBlur(canvas, url) {
+        let alive = true;
+        const render = (u) => {
+            if (!u) return;
+            const im = new Image();
+            im.onload = () => {
+                if (!alive) return;
+                const baked = bakeBlur(im, im.naturalWidth, im.naturalHeight, 8);
+                canvas.width = baked.width;
+                canvas.height = baked.height;
+                canvas.getContext("2d").drawImage(baked, 0, 0);
+            };
+            im.src = u;
+        };
+        render(url);
+        return {
+            update: render,
+            destroy() {
+                alive = false;
+            },
+        };
+    }
+
+    // The seam tail's mirror needs the same snapshot on the GPU path (a
+    // live canvas has no url for the tail's <img>).
+    let tailMirrorBox = $state(null);
+    function snapshotGpuTwins() {
+        if (!gpuTwinBox && !tailMirrorBox) return;
+        const gpu = document.querySelector(".artist-page .gpu-hero");
+        const bannerSrc = gpu?.querySelector("canvas.banner.current");
+        if (!bannerSrc || !bannerSrc.width) return;
+        const dup = (src, cls) => {
+            if (!src || !src.width) return null;
+            const d = document.createElement("canvas");
+            d.width = src.width;
+            d.height = src.height;
+            d.getContext("2d").drawImage(src, 0, 0);
+            d.className = cls;
+            return d;
+        };
+        if (gpuTwinBox) {
+            // The twin's banner carries its 8px blur BAKED with clamped
+            // edges (see bakeBlur) — aligned, fringe-free. Rotation
+            // dissolve: same pattern as the tail below — the old baked
+            // frame stays underneath while the new one fades in on the
+            // banner's own curve (an instant replaceChildren here made the
+            // mono overlay SNAP to the next photo while the real hero was
+            // still mid-dissolve — Kyle caught it). Cap at two frames so
+            // rapid re-readies can never stack.
+            const bakedBanner = bakeBlur(bannerSrc, bannerSrc.width, bannerSrc.height, 8);
+            bakedBanner.className = "gt-banner";
+            const oldFrames = [...gpuTwinBox.children];
+            if (oldFrames.length) bakedBanner.classList.add("incoming");
+            gpuTwinBox.append(bakedBanner);
+            while (gpuTwinBox.children.length > 2) {
+                gpuTwinBox.firstChild.remove();
+            }
+            if (oldFrames.length) {
+                setTimeout(() => {
+                    for (const el of oldFrames) el.remove();
+                }, 1450);
+            }
+        }
+        // Tail mirror: the banner frame only, styled like the img variant.
+        // Rotation dissolve: the old frame stays underneath while the new
+        // one fades in on the banner's own curve, then the old is dropped.
+        // Cap at two frames so rapid re-readies can never stack.
+        if (tailMirrorBox) {
+            const t = dup(bannerSrc, "tail-mirror-frame");
+            if (t) {
+                const old = [...tailMirrorBox.children];
+                if (old.length) t.classList.add("incoming");
+                tailMirrorBox.append(t);
+                while (tailMirrorBox.children.length > 2) {
+                    tailMirrorBox.firstChild.remove();
+                }
+                if (old.length) {
+                    setTimeout(() => {
+                        for (const el of old) el.remove();
+                    }, 1450);
+                }
+            }
+        }
+    }
+
     const HERO_ROTATE_MS = 20_000;
     const HERO_FADE_MS = 1_400;
     // The preview→finished 4K swap gets its own, shorter dissolve: long enough
@@ -282,6 +424,9 @@
                 previousBanner = null;
             }, 650);
         }
+        // Same-task snapshot for the twin + the seam tail's mirror — see
+        // snapshotGpuTwins above.
+        snapshotGpuTwins();
         document.documentElement.dataset.heroGpuMs = result.renderMs.toFixed(2);
     }
 
@@ -763,6 +908,26 @@
         // today, which is the right way for this to fail.
         let travel = Infinity;
         let previous = -1;
+        // Supported path only: the last value written to --extra-hit, so
+        // the sentinel observer below writes it at its 0.42 boundary
+        // crossings and never else — the one style write that survives on
+        // that path (pointer-events is not animatable, so it cannot become
+        // a scroll-driven animation).
+        let lastHit = null;
+        // Supported path only: the two 1px threshold sentinels and their
+        // IntersectionObservers (created in the scrollDriven block below),
+        // plus the degenerate-page flag measure() keeps for them. With
+        // these, the supported path has NO scroll listener at all: reading
+        // scroller.scrollTop while the scroll-driven animations have style
+        // dirty forces a full style+layout pass per frame (measured: 93ms
+        // forced UpdateStyleAndLayout per 6.9s of continuous flicks just
+        // from apply()), and both of apply()'s remaining jobs are threshold
+        // crossings the compositor can report instead.
+        let s1 = null;
+        let s2 = null;
+        let io1 = null;
+        let io2 = null;
+        let travelFinite = false;
         let frame = 0;
         // The constant part of the content's flow-local fade line — written
         // by measure(), consumed every frame by apply().
@@ -836,7 +1001,6 @@
             const gap = page.querySelector(".actions-gap");
             const rowH = gap?.offsetHeight ?? 76;
             page.style.setProperty("--row-h", `${rowH}px`);
-
             // The park point: the content edge stops exactly where the shrunk
             // wordmark's top lands PAD_TOP_PARKED below the glass bar with the
             // identity still in its resting slots.
@@ -860,6 +1024,59 @@
             page.style.setProperty("--strip", `${strip}px`);
             travel = span - strip > 1 ? span - strip : Infinity;
 
+            // The scroll-driven animations' constants (see the second
+            // @supports (animation-timeline: scroll()) block in the CSS).
+            // --travel is the shared animation-range span — the p
+            // denominator — so linear easing over 0..--travel gives
+            // animation progress ≡ p at every scrollTop. The 999999px
+            // sentinel mirrors travel = Infinity above (p pinned ~0: no
+            // animation progresses measurably), and every consumer reads
+            // var(--travel, 999999px) so the pre-measure first paint is
+            // inert too. --ride is the SAME delta as a length for
+            // to-keyframes, and must be a separate variable: tied to the
+            // range sentinel, a degenerate page's to-value would cancel
+            // into translate = -scrollTop; the 0px sentinel keeps it
+            // motionless exactly as p = 0 does today. --fade-span is the
+            // extras/badge fade's own range (travel / 2.4, where their
+            // opacity ramp clamps): dividing the 999999px sentinel instead
+            // would let a deep scroll on a degenerate page ghost-fade chips
+            // that today hold opacity 1 at any scrollTop.
+            const rideValid = span - strip > 1;
+            page.style.setProperty(
+                "--travel",
+                `${rideValid ? (span - strip).toFixed(1) : 999999}px`,
+            );
+            page.style.setProperty(
+                "--ride",
+                `${rideValid ? (span - strip).toFixed(1) : 0}px`,
+            );
+            page.style.setProperty(
+                "--fade-span",
+                `${rideValid ? ((span - strip) / 2.4).toFixed(1) : 999999}px`,
+            );
+            // The chips row's total leftward slide for the scroll-driven
+            // path: the sum of the layout width both buttons ahead of it in
+            // the flex row shed (22 mirrors --play-shrink; 13 is
+            // .hero-preview's 40→27). On that path the buttons' REAL widths
+            // are frozen and shrink by transform instead, so the flex row no
+            // longer supplies this motion. Presence-aware so a
+            // conditionally-rendered preview button cannot leave a phantom
+            // 13px slide, and validity-gated like --ride: on a degenerate
+            // page the range sentinel would otherwise creep the chips
+            // ~1.75px at extreme scrollTop where today's pinned p holds
+            // them motionless. (The button/glyph scale rides keep constant
+            // to-poses — their same-class residual is ≤1.1px on geometry
+            // the 390px hero-zone minimum makes unreachable; accepted.)
+            page.style.setProperty(
+                "--row-slide",
+                `${
+                    rideValid
+                        ? (page.querySelector(".hero-play") ? 22 : 0) +
+                          (page.querySelector(".hero-preview") ? 13 : 0)
+                        : 0
+                }px`,
+            );
+
             // ROUND 12 — the sheet's two poses, both in band coordinates.
             // At rest its gradient sits on the VISIBLE hero (onset at 60% of
             // the zone, spanning 42% of it — the live page's look; anchoring
@@ -874,6 +1091,15 @@
             page.style.setProperty("--fog-span", `${fogSpan}px`);
             page.style.setProperty("--fog-above", `${fogAbove}px`);
             page.style.setProperty("--fog-rest", `${fogRest}px`);
+            // The sheet's pose delta for its scroll-driven glide (usually
+            // negative): from-pose translateY(--fog-rest), to-pose
+            // translateY(--fog-rest + --fog-ride) ≡ translateY(strip -
+            // fog-above) — the same two exact endpoints the fallback calc
+            // has. 0px sentinel, same reasoning as --ride above.
+            page.style.setProperty(
+                "--fog-ride",
+                `${rideValid ? (strip - fogAbove - fogRest).toFixed(1) : 0}px`,
+            );
 
             // The content's fade line, precomputed so apply() is arithmetic
             // only: flow-local cut = stripCut + scrollTop. The zone must sit
@@ -942,26 +1168,50 @@
                 page.style.setProperty("--fade-s", `${fadeS.toFixed(1)}px`);
                 page.style.setProperty("--frame-h", `${scroller.clientHeight}px`);
             }
+            // The extras' hit-gate sentinel parks at the scrollTop where
+            // p crosses 0.42. Probed live (2026-07-24, this WebView2): the
+            // observers' rootBounds top coincides with the page's box top
+            // at scrollTop 0 — the pane's 24px padding does NOT offset the
+            // crossing — but the observer reports integer-snapped rects,
+            // so the -1 below folds the sentinel's own 1px height into the
+            // placement: the snapped bottom then reaches the root's top at
+            // the same integer scrollTop the old `p > 0.42` first exceeded
+            // (probed flip: auto at 377, none at 378, boundary 377.58).
+            // Off-screen sentinel on a degenerate page, mirroring travel =
+            // Infinity pinning p at 0 (travelFinite keeps the observers
+            // honest about that case too).
+            travelFinite = Number.isFinite(travel);
+            if (s2) {
+                s2.style.top = travelFinite
+                    ? `${(0.42 * travel - 1).toFixed(1)}px`
+                    : "-99999px";
+            }
         }
 
+        // FALLBACK ONLY (no scroll-driven animations). On the supported
+        // path apply() NEVER runs — there is no scroll listener at all: the
+        // scroll-driven animations own every per-frame style, and the two
+        // threshold flips apply() used to perform (data-scroll at p > 0,
+        // the extras' hit gate at p > 0.42) come from the IntersectionObserver
+        // sentinels in the scrollDriven block below, which the compositor
+        // reports without a single forced style+layout read.
         function apply() {
             frame = 0;
             const scrollTop = scroller.scrollTop;
-            // FALLBACK ONLY (no scroll-driven animations): the fade line
-            // rides EVERY frame — including past the park, where --p is
-            // pinned at 1 but the rows keep scrolling under the banner. It
-            // must not sit behind the p-guard below, or the mask freezes at
-            // the park and rows climb over the banner. On the scrollDriven
-            // path the sticky .scrollbody + composited .fade-flow transform
-            // own the fade line and nothing here updates per frame.
-            if (!scrollDriven) {
-                page.style.setProperty("--flow-cut", `${(stripCut + scrollTop).toFixed(1)}px`);
-            }
+            // The fade line rides EVERY frame — including past the park,
+            // where --p is pinned at 1 but the rows keep scrolling under
+            // the banner. It must not sit behind the p-guard below, or the
+            // mask freezes at the park and rows climb over the banner.
+            page.style.setProperty("--flow-cut", `${(stripCut + scrollTop).toFixed(1)}px`);
             const p = Math.min(1, Math.max(0, scrollTop / travel));
             if (p === previous) return;
             previous = p;
+            // Every consumer in the @supports not branch still rides the
+            // --p custom property, rewritten on every p change exactly as
+            // it always was.
             page.style.setProperty("--p", p.toFixed(4));
-            // Faded-out extras must stop taking clicks; opacity alone doesn't.
+            // Faded-out extras must stop taking clicks; opacity alone
+            // doesn't.
             page.style.setProperty("--extra-hit", p > 0.42 ? "none" : "auto");
             // The mask, the veil, the monochrome treatment and the wordmark's
             // scale are all gated on [data-scroll], so at the top of the page
@@ -978,6 +1228,11 @@
 
         function reflow() {
             measure();
+            // Supported path: nothing per-frame is left to apply — the
+            // observers re-deliver on their own once measure() has moved
+            // the sentinels, and running apply() here would pay the exact
+            // forced-layout scrollTop read this path exists to avoid.
+            if (scrollDriven) return;
             previous = -1;
             apply();
         }
@@ -990,6 +1245,22 @@
         // divs unstyled and .scrollbody sizes itself as it always did.)
         let flowObserver = null;
         if (scrollDriven) {
+            // The named timeline every scroll-driven animation below the
+            // fade trio binds to (animation-timeline: --artist-pane), set
+            // once on the EXACT element apply() reads scrollTop from — the
+            // timeline and p can never disagree. It must be NAMED:
+            // scroll(nearest) is a trap here, because .hero-bg's
+            // overflow: hidden makes it a scroll container per css-overflow,
+            // so nearest-lookup from the hero layers would bind to a
+            // never-scrolling box and freeze them at their from pose.
+            // (.fade-flow alone keeps scroll(nearest block): its ancestor
+            // chain has no scroll container in the way.) A named timeline is
+            // visible to all descendants of the declaring element, and
+            // .artist-page is a descendant of the pane. Safe as an inline
+            // write: the only other inline-style writer on the pane
+            // (scrollbar.js floatScroll) sets individual properties, never
+            // cssText.
+            scroller.style.setProperty("scroll-timeline", "--artist-pane block");
             const bodyEl = page.querySelector(".scrollbody");
             const flowEl = page.querySelector(".fade-flow");
             if (bodyEl && flowEl) {
@@ -1000,21 +1271,122 @@
                 flowObserver = new ResizeObserver(syncHeight);
                 flowObserver.observe(flowEl);
             }
+
+            // The threshold sentinels: two 1px absolutely-positioned divs
+            // whose crossings of the scrollport's top edge reproduce
+            // apply()'s two boundary flips without any scrollTop read.
+            // Appended as the LAST children of the page — never before the
+            // pins (measure()'s "pins are first children" invariant) and
+            // never inside the fade trio. contain: strict keeps them out of
+            // every layout/paint pass.
+            const mkSentinel = (top) => {
+                const d = document.createElement("div");
+                d.setAttribute("aria-hidden", "true");
+                d.style.cssText =
+                    "position:absolute;left:0;top:" +
+                    top +
+                    ";width:1px;height:1px;pointer-events:none;contain:strict;";
+                page.appendChild(d);
+                return d;
+            };
+            // s1 sits at the page's box top: fully visible exactly at
+            // scrollTop 0 (probed: rootBounds.top == the page's box top in
+            // this engine), so intersectionRatio < 1 ≡ p > 0. s2 parks off-
+            // screen until measure() places it at the 0.42 crossing.
+            s1 = mkSentinel("0px");
+            s2 = mkSentinel("-99999px");
+            io1 = new IntersectionObserver(
+                (entries) => {
+                    // Crossings can batch under a stalled main thread —
+                    // only the LAST entry is the current state.
+                    const en = entries[entries.length - 1];
+                    // travelFinite mirrors the degenerate-page guard:
+                    // travel = Infinity pins p at 0, so data-scroll must
+                    // never flip no matter how deep the scroll goes.
+                    heroScrolled = travelFinite && en.intersectionRatio < 1;
+                },
+                { root: scroller, threshold: [1] },
+            );
+            io1.observe(s1);
+            io2 = new IntersectionObserver(
+                (entries) => {
+                    const en = entries[entries.length - 1];
+                    // Past the 0.42 boundary means the sentinel left the
+                    // scrollport upward — its (snapped) bottom at or above
+                    // the root's top. NOT isIntersecting: the observer
+                    // counts edge-contact as intersecting, which would hold
+                    // the flip a pixel past the boundary. travelFinite
+                    // keeps the parked off-screen sentinel of a degenerate
+                    // page reading "auto", exactly as pinned p = 0 does.
+                    const past =
+                        travelFinite &&
+                        en.boundingClientRect.bottom <=
+                            (en.rootBounds ? en.rootBounds.top : 0);
+                    const hit = past ? "none" : "auto";
+                    if (hit !== lastHit) {
+                        lastHit = hit;
+                        page.style.setProperty("--extra-hit", hit);
+                    }
+                },
+                // Both edges: the 1 guarantees a notification for the
+                // full-visibility -> edge-contact transition (ratio 1 -> 0
+                // with isIntersecting unchanged), where the "none" flip now
+                // lands.
+                { root: scroller, threshold: [0, 1] },
+            );
+            io2.observe(s2);
         }
 
         reflow();
         remeasureHero = reflow;
-        scroller.addEventListener("scroll", onScroll, { passive: true });
-        const observer = new ResizeObserver(reflow);
+        // Supported path: NO scroll listener. Even an empty per-frame
+        // handler would keep the main thread in the scroll loop, and
+        // apply()'s scrollTop read forces style+layout while the
+        // scroll-driven animations have style dirty. The sentinels above
+        // carry both of its jobs.
+        if (!scrollDriven) {
+            scroller.addEventListener("scroll", onScroll, { passive: true });
+        }
+        // A window resize (maximize especially) settles across SEVERAL
+        // layout passes, and a reflow fired mid-transition measures torn
+        // geometry — one such measure wedged the fade line 280px low at
+        // fullscreen (rows vanishing below the cut, Kyle's repro of the
+        // long-standing rows-stay-hidden intermittent) and NOTHING re-fired
+        // afterward to heal it. So: measure immediately for responsiveness,
+        // then once more after layout quiesces. The trailing pass never
+        // reschedules itself, so there is no loop.
+        let settleTimer = 0;
+        const reflowAndSettle = () => {
+            reflow();
+            clearTimeout(settleTimer);
+            settleTimer = setTimeout(reflow, 200);
+        };
+        const observer = new ResizeObserver(reflowAndSettle);
         observer.observe(band);
         const zone = page.querySelector(".hero-zone");
         if (zone) observer.observe(zone);
+        // The pane itself too: a height-only window change (vertical
+        // maximize) moves the vh-capped banner/zone limits without
+        // necessarily resizing band or zone at their measured instant.
+        observer.observe(scroller);
         return {
             destroy() {
                 remeasureHero = () => {};
-                scroller.removeEventListener("scroll", onScroll);
+                if (!scrollDriven) {
+                    scroller.removeEventListener("scroll", onScroll);
+                }
+                // The pane outlives this page — take the named timeline back
+                // off it. (Nothing else references --artist-pane, and the
+                // {#if} teardown/mount is sequential, so two owners never
+                // interleave.)
+                scroller.style.removeProperty("scroll-timeline");
+                clearTimeout(settleTimer);
                 observer.disconnect();
                 flowObserver?.disconnect();
+                io1?.disconnect();
+                io2?.disconnect();
+                s1?.remove();
+                s2?.remove();
                 if (frame) cancelAnimationFrame(frame);
             },
         };
@@ -2842,55 +3214,18 @@
         });
     }
 
-    let heroBusy = $state(false);
-    let heroNotice = $state("");
-    let heroNoticeTimer;
-    onDestroy(() => clearTimeout(heroNoticeTimer));
-
-    function showHeroNotice(message) {
-        heroNotice = message;
-        clearTimeout(heroNoticeTimer);
-        heroNoticeTimer = setTimeout(() => (heroNotice = ""), 5000);
-    }
-
-    async function chooseHeroPhoto() {
-        if (!page || heroBusy) return;
-        heroBusy = true;
-        try {
-            const imported = await api.pickArtistHero(page.artist.id);
-            if (imported) {
-                const seed = page.artist;
-                invalidateCatalogArtist(page.artist.id);
-                clearCatalogHeroArtCache();
-                await openCatalogArtist(page.artist.id, seed);
-                showHeroNotice(`Custom hero saved · ${imported.width}×${imported.height}`);
-            }
-        } catch (error) {
-            showHeroNotice(String(error).replace(/^Error:\s*/, ""));
-        } finally {
-            heroBusy = false;
-        }
-    }
-
-    async function clearHeroPhoto() {
-        if (!page || heroBusy) return;
-        heroBusy = true;
-        try {
-            await api.clearArtistHero(page.artist.id);
-            const seed = page.artist;
-            invalidateCatalogArtist(page.artist.id);
-            clearCatalogHeroArtCache();
-            await openCatalogArtist(page.artist.id, seed);
-            showHeroNotice("Custom hero removed");
-        } catch (error) {
-            showHeroNotice(String(error).replace(/^Error:\s*/, ""));
-        } finally {
-            heroBusy = false;
-        }
-    }
+    // The hero-chooser UI (Choose/Change hero pill + notice) lived in the
+    // glass bar until 2026-07-24; it is being re-homed elsewhere. The
+    // backend survives it: api.pickArtistHero / api.clearArtistHero and the
+    // Rust commands are intact — resurrect the old pill's handlers from git
+    // (defe225) when the new location lands.
 </script>
 
-<div class="artist-page" data-load-stage={pageLoadStage} data-scroll={heroScrolled ? "1" : "0"}>
+<div
+    class="artist-page"
+    data-load-stage={pageLoadStage}
+    data-scroll={heroScrolled ? "1" : "0"}
+>
     {#if catalog.artistLoading && !page}
         <button class="back flow" onclick={() => (ui.view = "catalog")}>
             <Icon name="chevron-left" size={16} /> Results
@@ -2926,10 +3261,10 @@
         <div class="heropin" use:heroScroll>
             <!-- Banner-as-background: the full artwork at native aspect, bled to
                  the pane edges, extending down behind the content and dissolving
-                 into the page. A blurred bloom fills the strip behind the glass bar
-                 (behind the sharp photo, so the artwork itself is untouched); the
-                 vertical scrim finishes the lower dissolve. During rotation,
-                 the outgoing pair stays underneath until the new pair fades in. -->
+                 into the page. The seam tail carries the band behind the glass
+                 bar; the vertical scrim finishes the lower dissolve. During
+                 rotation, the outgoing pair stays underneath until the new pair
+                 fades in. -->
             <div class="hero-bg" aria-hidden="true">
                 <div class="hero-fallback" style="--seed-hue: {seedHue}"></div>
                 {#if seedUrl}
@@ -2938,14 +3273,30 @@
                         class:hidden={heroPainted}
                         style="background-image: url('{seedUrl}')"
                     ></div>
+                    <!-- Crossfade twin: static seed mono to-pose, cross-faded
+                         in by the composited mono-fade ride on the wrapper.
+                         The inner div keeps the original's opacity dissolve
+                         (.hidden), which multiplies with the wrapper's ride
+                         exactly like the original pair. -->
+                    <div class="seed-twin-wrap" aria-hidden="true">
+                        <div
+                            class="seed-mono-twin"
+                            class:hidden={heroPainted}
+                            style="background-image: url('{seedUrl}')"
+                        ></div>
+                    </div>
                 {/if}
                 {#if previousBanner?.url}
-                    <img class="bloom previous" src={previousBanner.url} alt="" draggable="false" />
                     <img class="banner previous" src={previousBanner.url} alt="" draggable="false" />
+                    <div class="banner-twin-wrap" aria-hidden="true">
+                        <canvas class="banner-mono-twin" use:bakedBlur={previousBanner.url} aria-hidden="true"></canvas>
+                    </div>
                 {/if}
                 {#if selectedUsesGpu && banner}
-                    <img class="bloom gpu-underlay" src={banner} alt="" draggable="false" />
                     <img class="banner gpu-underlay" src={banner} alt="" draggable="false" />
+                    <div class="banner-twin-wrap" aria-hidden="true">
+                        <canvas class="banner-mono-twin" use:bakedBlur={banner} aria-hidden="true"></canvas>
+                    </div>
                 {/if}
                 {#if gpuRendererMounted}
                     <HeroGpuCanvas
@@ -2959,10 +3310,20 @@
                         onready={gpuHeroReady}
                         onerror={gpuHeroError}
                     />
+                    <!-- Crossfade twin of the live canvas: snapshot pixels
+                         (filled by snapshotGpuTwins on 'ready') under a
+                         STATIC endpoint filter on .gpu-twin — the same
+                         composite order as the original. -->
+                    <div
+                        class="gpu-twin-wrap"
+                        class:live={displayedBanner.kind === "gpu"}
+                        aria-hidden="true"
+                    >
+                        <div class="gpu-twin" bind:this={gpuTwinBox}></div>
+                    </div>
                 {/if}
                 {#if banner && !selectedUsesGpu}
                     {#key displayedBanner.key}
-                        <img class="bloom current" class:initial={initialBannerPaint} class:finish={finishBannerPaint} src={banner} alt="" draggable="false" />
                         <img
                             class="banner current"
                             class:initial={initialBannerPaint}
@@ -2980,10 +3341,61 @@
                                 advanceHero(source);
                             }}
                         />
+                        <!-- Wrapper carries the composited rides
+                             (mono-fade + squeeze); the inner canvas carries
+                             the rotation dissolve — two opacity animations
+                             do not compose on one element, but opacity
+                             multiplies across nesting, which IS the
+                             original composition. -->
+                        <div class="banner-twin-wrap" aria-hidden="true">
+                            <canvas
+                                class="banner-mono-twin entry"
+                                class:initial={initialBannerPaint}
+                                class:finish={finishBannerPaint}
+                                use:bakedBlur={banner}
+                                aria-hidden="true"
+                            ></canvas>
+                        </div>
                     {/key}
                 {:else if !selectedUsesGpu}
                     <div class="banner base"></div>
                 {/if}
+                <!-- THE SEAM TAIL (last child on purpose: paints over every
+                     hero layer). The clip pins at the bar's TOP line and
+                     does not ride: the mirror inside rides with the hero,
+                     and whatever slides past the bar's top edge is cut —
+                     the reflection exists strictly inside the glass. -->
+                <div class="seam-clip" aria-hidden="true">
+                    <div class="seam-tail mirror t2" class:painted={heroPainted}>
+                        <!-- scaleY(-1) about center: the artwork's top row
+                             renders at this box's bottom = the hero's top
+                             edge, so the seam is colour-continuous by
+                             construction at every horizontal position.
+                             GPU heroes have no url — their frame arrives
+                             via snapshotGpuTwins into the bound box.
+                             Rotation dissolve mirrors the banner's own:
+                             previous held underneath, incoming fades in on
+                             the same hero-banner-in curve/durations. -->
+                        {#if selectedUsesGpu}
+                            <div class="tail-mirror-src" bind:this={tailMirrorBox}></div>
+                        {:else if banner}
+                            {#if previousBanner?.url}
+                                <img class="tail-prev" src={previousBanner.url} alt="" draggable="false" />
+                            {/if}
+                            {#key displayedBanner.key}
+                                <img
+                                    class="tail-cur"
+                                    class:initial={initialBannerPaint}
+                                    class:finish={finishBannerPaint}
+                                    src={banner}
+                                    alt=""
+                                    draggable="false"
+                                    decoding="async"
+                                />
+                            {/key}
+                        {/if}
+                    </div>
+                </div>
             </div>
         </div>
 
@@ -3159,7 +3571,7 @@
         </div>
 
         <!-- Frosted-glass header in parity with the Now Playing panel's
-             .np-head; it floats over the banner's bloom strip at the top.
+             .np-head; it floats over the seam tail's mirror at the top.
              data-scrollhead keeps the overlay scrollbar below this bar. -->
         <div class="results-head" data-scrollhead>
             <button class="back" onclick={() => (ui.view = "catalog")}>
@@ -3170,29 +3582,6 @@
             {:else if resolver.error}
                 <span class="rstatus error">{resolver.error}</span>
             {/if}
-            <div class="hero-art-actions">
-                {#if heroNotice}
-                    <span class:error={heroNotice.includes("Choose") || heroNotice.includes("must")} class="hero-art-notice">{heroNotice}</span>
-                {/if}
-                <button
-                    class:active={page.banner_custom}
-                    class="hero-art-btn"
-                    title="Choose a high-resolution hero photo (minimum 1920×800)"
-                    disabled={heroBusy || page.artist.id == null}
-                    onclick={chooseHeroPhoto}
-                >
-                    <Icon name="image" size={15} />
-                    <span>{page.banner_custom ? "Change hero" : "Choose hero"}</span>
-                </button>
-                {#if page.banner_custom}
-                    <button
-                        class="hero-art-btn icon-only"
-                        title="Remove custom hero"
-                        disabled={heroBusy}
-                        onclick={clearHeroPhoto}
-                    ><Icon name="x" size={14} /></button>
-                {/if}
-            </div>
         </div>
 
         <!-- Pure spacer now: it still reserves the room the artwork needs and
@@ -3710,12 +4099,10 @@
            half of the travel and only climbs to the parked pose late, when
            the monochrome ramp has already turned the hero into dim texture
            where an onset cannot be seen. Still a rigid translation with the
-           same two exact endpoints. */
-        transform: translateY(calc(
-            var(--fog-rest)
-            + var(--p) * var(--p)
-                * (var(--strip) - var(--fog-above) - var(--fog-rest))
-        ));
+           same two exact endpoints. The transform itself lives per-branch
+           below: the fallback keeps the live p² calc, the scroll-driven
+           branch a static rest pose plus the sheet-glide-ride animation
+           easing the identical curve. */
         /* SMOOTHSTEP, densely sampled — no findable line anywhere in the
            curve. The previous piecewise-linear stops (.3/.65/.9 skeleton)
            had large slope changes at every stop, and those kinks are Mach
@@ -3909,6 +4296,676 @@
                 #000 calc(var(--flow-cut) + 18px)
             );
         }
+
+        /* THE DISPLACED --p RIDERS. Every declaration below is the original
+           per-frame mechanism, verbatim, under its original selector: on
+           this path apply() still writes --p and --extra-hit on every p
+           change exactly as it always did, and these calcs consume them.
+           The design rationale for each stays with its element's base rule;
+           the scroll-driven equivalents live in the second @supports block
+           below. */
+        .sheet {
+            transform: translateY(calc(
+                var(--fog-rest)
+                + var(--p) * var(--p)
+                    * (var(--strip) - var(--fog-above) - var(--fog-rest))
+            ));
+        }
+
+        .artist-page[data-scroll="1"] .banner,
+        .artist-page[data-scroll="1"] :global(.gpu-hero) {
+            filter: var(--mono);
+            transform: translateY(calc(-0.22 * (var(--hero-span) - var(--edge))));
+        }
+
+        /* The seam tail follows the banner's squeeze on this path too —
+           same calc, no mono (see the tail's design comment). */
+        .artist-page[data-scroll="1"] .seam-tail {
+            transform: translateY(calc(-0.22 * (var(--hero-span) - var(--edge))));
+        }
+
+        .artist-page[data-scroll="1"] .hero-fallback {
+            filter: grayscale(var(--p)) brightness(calc(1 - var(--p) * 0.34));
+        }
+
+        .artist-page[data-scroll="1"] .hero-seed {
+            filter: blur(46px) saturate(1.3) var(--mono);
+        }
+
+        .artist-page[data-scroll="1"] .logo-slot {
+            transform: scale(calc(1 - var(--p) * (1 - var(--mark-end))));
+        }
+
+        .stat-chips > :nth-child(n + 4) {
+            opacity: calc(1 - var(--p) * 2.4);
+        }
+
+        .preview-count {
+            opacity: calc(1 - var(--p) * 2.4);
+        }
+    }
+
+    /* THE SCROLL-DRIVEN CONVERSION (Chromium 115+). Every --p rider above
+       the fallback branch becomes a scroll-driven animation here, and
+       apply() stops writing --p entirely — the per-frame custom-property
+       invalidation fan-out across the whole .artist-page subtree is gone;
+       only the handful of animated elements restyle.
+
+       The timeline is NAMED (--artist-pane), set by heroScroll() on the
+       exact pane apply() reads scrollTop from. scroll(nearest) is a trap
+       for everything inside the hero: .hero-bg { overflow: hidden } is a
+       scroll container per css-overflow, so nearest-lookup from the hero
+       layers would bind to a never-scrolling box and freeze them at their
+       from pose. (.fade-flow alone keeps scroll(nearest block) — its
+       ancestor chain has no scroll container in the way, and the fade trio
+       is its own sealed mechanism.)
+
+       Every ride shares: duration auto, linear easing, fill-mode both,
+       range 0px..--travel. --travel is the p denominator, so animation
+       progress ≡ p at every scrollTop, clamped [0,1] by fill-both exactly
+       as apply() clamps p — value-exact to the 0.1px quantum the
+       measure()-written constants use (toFixed(1); ≤~0.06px pose
+       deviation), not an approximation. Where the
+       easing is NOT linear it is a linear() sampler of the exact original
+       curve (error bound ≤ |f''|·h²/8 = 0.000625 of the pose delta for the
+       sheet's p², ~0.25px on a 400px ride — sub-pixel; the glyph samplers
+       are under 0.01px).
+
+       If the named timeline ever fails to attach, an animation bound to a
+       nonexistent timeline has an UNRESOLVED current time and applies NO
+       effect at all — fill-both from-poses do NOT apply. Rest parity then
+       holds only because every base declaration in this branch IS the rest
+       pose; the .sheet's static translateY below is load-bearing for that,
+       not belt-and-braces.
+
+       Compositing: transform- and opacity-only rides composite fully.
+       Blink refuses compositor filter animations whose keyframes contain
+       pixel-moving functions, which is why this branch runs NO blur-
+       bearing filter ride at all: the mono look comes from the crossfade
+       twins (static endpoint filters faded in by a composited opacity
+       ride), and the squeeze stays its own separate animation so the
+       rigid translation stays compositor-side. The var()-bearing
+       transform keyframes are also subject to Blink's var()-in-keyframes
+       compositor limitations — the CDP pass must confirm they actually
+       run composited and that measure() rewrites of
+       --ride/--fog-ride/--mark-end/--row-slide re-target them live. */
+    @supports (animation-timeline: scroll()) {
+        /* The squeeze. The mono ramp is NOT here: the originals stay
+           unfiltered (no main-thread blur filter ride) and the crossfade
+           twins below carry the monochrome look, faded in by a composited
+           opacity ride. Gate preserved: when [data-scroll] flips at p>0
+           the timeline places the animation at the correct offset
+           instantly, continuous across the flip, same as the calc it
+           replaces. */
+        .artist-page[data-scroll="1"] .banner,
+        .artist-page[data-scroll="1"] :global(.gpu-hero) {
+            animation-name: hero-squeeze-ride;
+            animation-duration: auto;
+            animation-timing-function: linear;
+            animation-fill-mode: both;
+            animation-timeline: --artist-pane;
+            animation-range: 0px var(--travel, 999999px);
+        }
+
+        /* The seam tail is glued to the banner's edge: SAME squeeze ride,
+           SAME gate, so they attach on the same flip and move as one. (No
+           mono ride — the tail is the artwork's own colour by design and
+           fades out under the frost before the mono ramp matters.) */
+        .artist-page[data-scroll="1"] .seam-tail {
+            animation-name: hero-squeeze-ride;
+            animation-duration: auto;
+            animation-timing-function: linear;
+            animation-fill-mode: both;
+            animation-timeline: --artist-pane;
+            animation-range: 0px var(--travel, 999999px);
+        }
+
+        /* The rotation dissolve must SURVIVE the ride rules: .banner.current's
+           `animation: hero-banner-in ...` shorthand sets the animation-name
+           longhand too, and whichever rule loses the cascade loses its
+           animations entirely — the gated ride rule above outranks it, which
+           would (a) hard-cut a mid-scroll banner swap, (b) cancel a running
+           fade on the first scrolled pixel and, worst, (c) RESTART a fresh
+           1.4s fade from opacity 0 on every bounce off scrollTop 0 when the
+           gate reverts the name. So while scrolled, the dissolve and the
+           rides ride ONE combined list (names are matched by list position
+           and name across recalcs, so neither direction of the data-scroll
+           flip restarts anything; the single animation-range value repeats
+           across the list and is ignored by the document-timeline entry). */
+        .artist-page[data-scroll="1"] .banner.current {
+            animation-name: hero-squeeze-ride, hero-banner-in;
+            animation-duration: auto, 1.4s;
+            animation-timing-function: linear, ease;
+            animation-fill-mode: both, backwards;
+            animation-timeline: --artist-pane, auto;
+            animation-range: 0px var(--travel, 999999px);
+        }
+
+        /* Gated variants of the .initial/.finish duration overrides: the
+           base single-value versions further down would otherwise clobber
+           the whole multi-animation list's durations while scrolled. */
+        .artist-page[data-scroll="1"] .banner.current.initial {
+            animation-duration: auto, 180ms;
+        }
+
+        .artist-page[data-scroll="1"] .banner.current.finish {
+            animation-duration: auto, 650ms;
+        }
+
+        /* Same story for the reduced-motion 1ms overrides. */
+        @media (prefers-reduced-motion: reduce) {
+            .artist-page[data-scroll="1"] .banner.current,
+            .artist-page[data-scroll="1"] .banner.current.initial,
+            .artist-page[data-scroll="1"] .banner.current.finish {
+                animation-duration: auto, 1ms;
+            }
+        }
+
+        /* Accent ground: no pixel-moving function in the list, so this one
+           DOES composite. */
+        .artist-page[data-scroll="1"] .hero-fallback {
+            animation-name: ground-mono-ride;
+            animation-duration: auto;
+            animation-timing-function: linear;
+            animation-fill-mode: both;
+            animation-timeline: --artist-pane;
+            animation-range: 0px var(--travel, 999999px);
+        }
+
+        /* (.hero-seed rides nothing here: its mono look is the seed twin's
+           crossfade below, exactly like the banner's.) */
+
+        /* The sheet, ungated like today's calc — it must track mid-scroll
+           even under main-thread stall. The static transform is the REST
+           pose and it is load-bearing: if the timeline never attaches, this
+           is what keeps rest parity (see the block comment above). The
+           easing is the exact p² glide, sampled at 5% steps — 21 points of
+           t², exact at every sample. */
+        .sheet {
+            transform: translateY(var(--fog-rest));
+            animation-name: sheet-glide-ride;
+            animation-duration: auto;
+            animation-timing-function: linear(
+                0, 0.0025 5%, 0.01 10%, 0.0225 15%, 0.04 20%, 0.0625 25%,
+                0.09 30%, 0.1225 35%, 0.16 40%, 0.2025 45%, 0.25 50%,
+                0.3025 55%, 0.36 60%, 0.4225 65%, 0.49 70%, 0.5625 75%,
+                0.64 80%, 0.7225 85%, 0.81 90%, 0.9025 95%, 1
+            );
+            animation-fill-mode: both;
+            animation-timeline: --artist-pane;
+            animation-range: 0px var(--travel, 999999px);
+        }
+
+        /* The identity block, ungated for the same reason. Today its top
+           sheds p·travel via --edge (a per-frame LAYOUT of the whole idpin
+           subtree); translateY(-p·travel) is the identical rigid motion of
+           the identical subtree, composited. The fill-both identity
+           transform at rest is the .fade-flow precedent. */
+        .idblock {
+            animation-name: idblock-ride;
+            animation-duration: auto;
+            animation-timing-function: linear;
+            animation-fill-mode: both;
+            animation-timeline: --artist-pane;
+            animation-range: 0px var(--travel, 999999px);
+        }
+
+        /* The wordmark's park scale: 1 - p·(1 - mark-end) is linear in p
+           between 1 and mark-end, so linear easing reproduces the calc
+           exactly (the var() re-resolves when measure() rewrites
+           --mark-end). transform-origin stays on the base gated rule — it
+           serves both branches. */
+        .artist-page[data-scroll="1"] .logo-slot {
+            animation-name: mark-park-ride;
+            animation-duration: auto;
+            animation-timing-function: linear;
+            animation-fill-mode: both;
+            animation-timeline: --artist-pane;
+            animation-range: 0px var(--travel, 999999px);
+        }
+
+        /* The shed chips' fade — over --fade-span (= travel / 2.4, its OWN
+           sentinel from measure()), so opacity = 1 - 2.4p with fill-both
+           holding 0 past p = 1/2.4 exactly where the calc clamps, and a
+           degenerate page (999999px sentinel) stays at opacity 1 at any
+           scrollTop, exactly as the pinned p keeps it today. */
+        .stat-chips > :nth-child(n + 4) {
+            animation-name: extras-fade-ride;
+            animation-duration: auto;
+            animation-timing-function: linear;
+            animation-fill-mode: both;
+            animation-timeline: --artist-pane;
+            animation-range: 0px var(--fade-span, 999999px);
+        }
+
+        /* The badge: same fade window, plus a counter-scale — the parent
+           .hero-preview now shrinks by transform, which the badge (16px at
+           every p today) would inherit. The linear counter-ramp holds its
+           size to ~0.1px through the visible window; its -3/-5px corner
+           offsets do drift ≤0.7px with the parent's transform (they are
+           exactly constant today) — accepted: invisible, and the badge is
+           gone past p = 0.4167 anyway. */
+        .preview-count {
+            transform-origin: center;
+            animation-name: badge-fade-ride;
+            animation-duration: auto;
+            animation-timing-function: linear;
+            animation-fill-mode: both;
+            animation-timeline: --artist-pane;
+            animation-range: 0px var(--fade-span, 999999px);
+        }
+
+        /* Play: the real width shrink is frozen at 50px here (--p stays 0),
+           and the button shrinks by transform instead. Centre-origin scale
+           plus a compensating translate pins the left edge — mathematically
+           identical to a left-center-origin scale, but it keeps the default
+           centre origin so the hover `scale: 1.04` pops symmetrically on
+           both branches. Visual width = 50·(1 - 0.44p) = 50 - 22p, the
+           layout shrink exactly; hit-testing follows transforms, so the
+           click target matches the visual as today. Known deviations, by
+           design decision if they read wrong: the box-shadow scales with
+           the button, and the 1px border reads thinner parked. */
+        .hero-play {
+            animation-name: play-shrink-ride;
+            animation-duration: auto;
+            animation-timing-function: linear;
+            animation-fill-mode: both;
+            animation-timeline: --artist-pane;
+            animation-range: 0px var(--travel, 999999px);
+        }
+
+        /* The glyph is NOT proportional to its button (21→15 vs 50→28), so
+           it rides its own counter-scale g(p) = (21-6p)/(21·(1-0.44p)),
+           sampled exactly at 5% steps — net rendered glyph = 21 - 6p px at
+           every sample (a plain linear ramp would be ~0.6px wrong
+           mid-ride). Default centre origin: the glyph is grid-centred and
+           must stay on its centre. */
+        .hero-play :global(.icon) {
+            animation-name: play-glyph-ride;
+            animation-duration: auto;
+            animation-timing-function: linear(
+                0, 0.0286 5%, 0.0586 10%, 0.0899 15%, 0.1228 20%,
+                0.1573 25%, 0.1935 30%, 0.2317 35%, 0.2718 40%,
+                0.3142 45%, 0.359 50%, 0.4063 55%, 0.4565 60%,
+                0.5098 65%, 0.5665 70%, 0.6269 75%, 0.6914 80%,
+                0.7604 85%, 0.8344 90%, 0.9141 95%, 1
+            );
+            animation-fill-mode: both;
+            animation-timeline: --artist-pane;
+            animation-range: 0px var(--travel, 999999px);
+        }
+
+        /* Preview: frozen at 40px, shrunk by transform on the same recipe,
+           plus the row-slide share its keyframes carry (Play's frozen box
+           no longer pulls it leftward — see the keyframes). Its former
+           backdrop-filter was removed with the chips' (2026-07-24 evidence
+           pack), which also retired the backdrop-under-transform Chromium
+           soft spot this ride would otherwise have to dodge. */
+        .hero-preview {
+            animation-name: preview-shrink-ride;
+            animation-duration: auto;
+            animation-timing-function: linear;
+            animation-fill-mode: both;
+            animation-timeline: --artist-pane;
+            animation-range: 0px var(--travel, 999999px);
+        }
+
+        /* Same counter-scale story as the Play glyph: g(p) =
+           (18-4p)/(18·(1-0.325p)), net glyph = 18 - 4p px at every sample.
+           Dead-centred in its button, so this one is horizontally exact. */
+        .hero-preview :global(.icon) {
+            animation-name: preview-glyph-ride;
+            animation-duration: auto;
+            animation-timing-function: linear(
+                0, 0.0343 5%, 0.0698 10%, 0.1064 15%, 0.1444 20%,
+                0.1837 25%, 0.2244 30%, 0.2666 35%, 0.3103 40%,
+                0.3558 45%, 0.403 50%, 0.4521 55%, 0.5031 60%,
+                0.5563 65%, 0.6117 70%, 0.6694 75%, 0.7297 80%,
+                0.7927 85%, 0.8587 90%, 0.9277 95%, 1
+            );
+            animation-fill-mode: both;
+            animation-timeline: --artist-pane;
+            animation-range: 0px var(--travel, 999999px);
+        }
+
+        /* The chips row's slide — a NEW consumer: today this motion is
+           supplied implicitly by the flex relayout as both buttons ahead
+           of it shrink their real widths (22p + 13p px, constant 16px
+           gaps, left-aligned row). With frozen button widths the chips
+           would stand still; the transform reproduces the slide rigidly,
+           composited. --row-slide is presence-aware (measure()), so a
+           missing preview button cannot leave a phantom 13px. Chip hover
+           popovers are absolutely positioned inside the row and ride
+           along. Nothing is needed on the fallback path — flex relayout
+           still supplies the motion there. */
+        .stat-chips {
+            animation-name: chips-slide-ride;
+            animation-duration: auto;
+            animation-timing-function: linear;
+            animation-fill-mode: both;
+            animation-timeline: --artist-pane;
+            animation-range: 0px var(--travel, 999999px);
+        }
+
+        /* ================= THE CROSSFADE TWINS ===========================
+           User-tuned constants (mono endpoints, the 46px seed blur, the
+           8px banner bake, the 0.22 squeeze) appear verbatim — nothing is
+           retuned, only re-plumbed.
+
+           Wrappers carry ONLY composited rides
+           (mono-fade opacity; plus the squeeze for banner/gpu twins, the
+           same wrapper-level squeeze the originals ride); inner elements
+           carry the STATIC endpoint filter of the ride they replace plus
+           whatever entry/dissolve their original runs — opacity multiplies
+           across the nesting, so dissolve × crossfade composes exactly
+           like the original animation pair. Base opacity 0 (top level,
+           with the twins' static geometry — see the twin base rules after
+           this @supports block) is the timeline-failure safety: an
+           animation bound to a missing timeline applies NOTHING
+           (fill-both does not hold), and the twins must then disappear
+           rather than sit at full mono over the resting page. Twins are
+           ungated (no [data-scroll]): their rides are pure composited
+           opacity/transform, and at p = 0 the fade holds them at
+           exactly 0. */
+        .artist-page .seed-twin-wrap,
+        .artist-page .banner-twin-wrap,
+        .artist-page .gpu-twin-wrap {
+            animation-name: mono-fade-ride;
+            animation-duration: auto;
+            animation-timing-function: linear;
+            animation-fill-mode: both;
+            animation-timeline: --artist-pane;
+            animation-range: 0px var(--travel, 999999px);
+        }
+
+        .artist-page .banner-twin-wrap,
+        .artist-page .gpu-twin-wrap {
+            animation-name: mono-fade-ride, hero-squeeze-ride;
+            animation-duration: auto, auto;
+            animation-timing-function: linear, linear;
+            animation-fill-mode: both, both;
+            animation-timeline: --artist-pane, --artist-pane;
+            animation-range: 0px var(--travel, 999999px);
+        }
+
+        .artist-page .seed-mono-twin {
+            position: absolute;
+            inset: -12% -8%;
+            background-position: center 32%;
+            background-repeat: no-repeat;
+            background-size: cover;
+            transform: scale(1.06);
+            /* The seed's mono to-pose, verbatim. */
+            filter: blur(46px) saturate(1.3) grayscale(1) contrast(1.14)
+                brightness(0.66) blur(8px);
+            opacity: 1;
+            visibility: visible;
+            transition: opacity 520ms ease, visibility 0s linear;
+        }
+
+        .artist-page .seed-mono-twin.hidden {
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 520ms ease, visibility 0s linear 520ms;
+        }
+
+        .artist-page .banner-mono-twin {
+            position: absolute;
+            top: 70px;
+            left: 0;
+            display: block;
+            width: 100%;
+            height: auto;
+            max-height: 78vh;
+            object-fit: cover;
+            object-position: center top;
+            /* Point-op mono components only — the blur is BAKED into the
+               canvas copy with clamped (edge-replicated) sampling, so the
+               copy stays pixel-aligned with the original (no scale hacks,
+               no ghosting in the crossfade) and has no transparent fringe
+               at the pane edges. grayscale/contrast/brightness are
+               per-pixel operations: they cannot bleed. */
+            filter: grayscale(1) contrast(1.14) brightness(0.66);
+        }
+
+        .artist-page .banner-mono-twin.entry {
+            animation: hero-banner-in 1.4s ease backwards;
+        }
+
+        .artist-page .banner-mono-twin.entry.initial {
+            animation-duration: 180ms;
+        }
+
+        .artist-page .banner-mono-twin.entry.finish {
+            animation-duration: 650ms;
+        }
+
+        .artist-page .gpu-twin {
+            position: absolute;
+            inset: 0;
+            /* Point-op mono only at the wrapper — the 8px blur is baked
+               into the gt-banner snapshot with clamped edges (no fringe,
+               no alignment hacks). Point ops cannot bleed at edges. */
+            filter: grayscale(1) contrast(1.14) brightness(0.66);
+        }
+
+        /* The gpu twin's snapshot canvas — the .gpu-hero's internal banner
+           geometry, verbatim (the canvas is created by snapshotGpuTwins,
+           hence :global). */
+        .artist-page .gpu-twin :global(.gt-banner) {
+            position: absolute;
+            top: 70px;
+            left: 0;
+            display: block;
+            width: 100%;
+            height: auto;
+            aspect-ratio: 16 / 9;
+            max-height: 78vh;
+            z-index: 1;
+        }
+
+        /* Rotation dissolve for the mono overlay — the incoming baked
+           frame fades in over the outgoing one on the banner's own curve,
+           in lockstep with the real hero and the tail mirror (same
+           pattern as .tail-mirror-frame.incoming). */
+        .artist-page .gpu-twin :global(.gt-banner.incoming) {
+            animation: hero-banner-in 1.4s ease backwards;
+        }
+
+        /* Reduced-motion parity for the twins' entry dissolves (the stock
+           1ms rule reaches only .banner). */
+        @media (prefers-reduced-motion: reduce) {
+            .artist-page .banner-mono-twin.entry,
+            .artist-page .banner-mono-twin.entry.initial,
+            .artist-page .banner-mono-twin.entry.finish {
+                animation-duration: 1ms;
+            }
+
+            .artist-page .seed-mono-twin,
+            .artist-page .seed-mono-twin.hidden {
+                transition-duration: 1ms;
+            }
+        }
+    }
+
+    /* Twin base geometry + hidden-at-rest, at top level (NOT inside the
+       @supports gate) on purpose: the twin DOM always renders, and on an
+       engine without scroll-driven animations these keep the twins out of
+       flow and invisible — the fallback branch keeps the --p filter rides
+       on the originals instead and never shows a twin. */
+    .seed-twin-wrap,
+    .banner-twin-wrap,
+    .gpu-twin-wrap {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    .seed-twin-wrap {
+        z-index: -1;
+    }
+
+    .banner-twin-wrap,
+    .gpu-twin-wrap {
+        z-index: 1;
+    }
+
+    .gpu-twin-wrap:not(.live) {
+        display: none;
+    }
+
+    /* The rides' keyframes, at top level. NAMING: the one referenced from
+       the mixed scoped/:global .banner + :global(.gpu-hero) rule carries
+       the -global- prefix — Svelte strips it and leaves the matching
+       animation-name values un-scoped, so the compiled name and the
+       keyframes name cannot diverge. (With svelte 5.56.4 plain names would
+       also compile — the rewrite covers :global-containing rules — so the
+       prefix is a namespace choice; the glyph keyframes below use plain
+       scoped names on the fade-flow-ride precedent.) Every from-pose is
+       the identity/rest value, so the fill-both hold at scrollTop 0 is
+       pixel-identical to today's rest page. */
+    @keyframes -global-hero-squeeze-ride {
+        from {
+            transform: translateY(0);
+        }
+        to {
+            /* -0.22 · travel; linear easing gives -0.22·p·travel at every
+               scrollTop — identical to the --edge calc. The 0px sentinel
+               (NOT --travel) keeps degenerate pages motionless. */
+            transform: translateY(calc(-0.22 * var(--ride, 0px)));
+        }
+    }
+
+    @keyframes ground-mono-ride {
+        from {
+            filter: grayscale(0) brightness(1);
+        }
+        to {
+            filter: grayscale(1) brightness(0.66);
+        }
+    }
+
+    @keyframes sheet-glide-ride {
+        from {
+            transform: translateY(var(--fog-rest));
+        }
+        to {
+            /* ≡ translateY(strip - fog-above): the same two exact endpoints
+               as the fallback calc (--fog-ride from measure()). */
+            transform: translateY(calc(var(--fog-rest) + var(--fog-ride, 0px)));
+        }
+    }
+
+    @keyframes idblock-ride {
+        from {
+            transform: translateY(0);
+        }
+        to {
+            transform: translateY(calc(-1 * var(--ride, 0px)));
+        }
+    }
+
+    @keyframes mark-park-ride {
+        from {
+            transform: scale(1);
+        }
+        to {
+            transform: scale(var(--mark-end, 1));
+        }
+    }
+
+    @keyframes extras-fade-ride {
+        from {
+            opacity: 1;
+        }
+        to {
+            opacity: 0;
+        }
+    }
+
+    /* The twins' crossfade — the ride that stands in for the retired mono
+       filter rides: linear over the same 0..--travel range, so twin
+       opacity ≡ p. */
+    @keyframes mono-fade-ride {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes badge-fade-ride {
+        from {
+            opacity: 1;
+            transform: scale(1);
+        }
+        to {
+            /* Inverse of the parent's scale at the fade end (p = 1/2.4):
+               1 / (1 - 0.325/2.4) = 1.1566 — holds the badge at 16px to
+               ~0.1px through its visible window. */
+            opacity: 0;
+            transform: scale(1.1566);
+        }
+    }
+
+    @keyframes play-shrink-ride {
+        from {
+            transform: translateX(0) scale(1);
+        }
+        to {
+            /* 0.56 = (50 - 22)/50 — update if --play-shrink changes. The
+               centre-origin scale sheds 11px each side; the -11px translate
+               pins the left edge (the row is left-aligned flex, so the real
+               shrink's left edge never moves; align-items: center holds the
+               vertical centre for free). */
+            transform: translateX(calc(-1 * var(--play-shrink) / 2)) scale(0.56);
+        }
+    }
+
+    @keyframes play-glyph-ride {
+        from {
+            transform: scale(1);
+        }
+        to {
+            /* g(1) = 15/11.76 — net 21·(1-0.44p)·g(p) = 21 - 6p px. Update
+               with the 0.56 pair if --play-shrink changes. */
+            transform: scale(1.2755);
+        }
+    }
+
+    @keyframes preview-shrink-ride {
+        from {
+            transform: translateX(0) scale(1);
+        }
+        to {
+            /* 0.675 = 27/40. The translate carries Play's 22px row slide
+               (the frozen Play box no longer pulls the row leftward) PLUS
+               this button's own 6.5px half-shrink, pinning its visual left
+               edge exactly where layout puts it today. */
+            transform: translateX(calc(-1 * var(--play-shrink) - 6.5px))
+                scale(0.675);
+        }
+    }
+
+    @keyframes preview-glyph-ride {
+        from {
+            transform: scale(1);
+        }
+        to {
+            /* g(1) = 14/12.15. */
+            transform: scale(1.1523);
+        }
+    }
+
+    @keyframes chips-slide-ride {
+        from {
+            transform: translateX(0);
+        }
+        to {
+            transform: translateX(calc(-1 * var(--row-slide, 35px)));
+        }
     }
 
     /* Nothing but the controls themselves may take clicks: the block spans the
@@ -3919,7 +4976,14 @@
     }
 
     /* Height 0 with its children hung off its bottom edge, so the block's
-       bottom IS --edge at every scroll position. */
+       bottom IS --edge at every scroll position. The calc stays here in
+       BOTH branches, deliberately: on the fallback path it is the live
+       per-frame mechanism (a relayout of the idpin subtree), while on the
+       scroll-driven path --p is never written, --edge is pinned at
+       --hero-span and this is a static rest pose for free — the identical
+       rigid motion then comes from idblock-ride, a composited transform of
+       the same subtree (children are absolutely positioned against this
+       block, so a translate moves them all identically, no relayout). */
     .idblock {
         position: absolute;
         left: 0;
@@ -3949,40 +5013,132 @@
         pointer-events: none;
     }
 
+    /* THE SEAM TAIL (Kyle's design, round 3). A soft colour lead-in
+       rising from the HERO'S OWN top edge, coloured like the hero itself,
+       so the edge carries its own dissolve and the hard line never exists
+       — at rest or sliding under the glass. Geometry: the banner's top
+       edge sits at 70px in this box (its margin-top), so the tail's
+       BOTTOM is pinned there. It RIDES WITH the hero: the gated squeeze
+       ride + fallback calc below mirror the banner's own, same selector
+       shape, same gating, so tail and edge move as one thing. Hidden
+       until the sharp artwork has painted (a tail for a hero that is not
+       on screen would colour the fallback wrong). z-index 1 outranks the
+       sibling hero layers' auto-level stacking contexts. Zero per-frame
+       cost: static images, composited once. */
+    .seam-tail {
+        position: absolute;
+        left: 0;
+        right: 0;
+        z-index: 1;
+        opacity: 0;
+        transition: opacity 400ms ease;
+    }
+
+    .seam-tail.painted {
+        opacity: 1;
+    }
+
+    /* The mirrored-artwork tail — the artwork's own top strip, flipped
+       about the seam. Colour-continuous with the hero at every horizontal
+       position by construction. It lives inside .seam-clip, which pins
+       at the bar's TOP line (24px = the pane padding above the stuck bar
+       in this box) and never rides: the tail inside rides with the hero,
+       and anything sliding past the bar's top edge is cut — the
+       reflection exists strictly inside the glass. Tail coordinates below
+       are clip-local (the clip's top sits 24px into this box). */
+    .seam-clip {
+        position: absolute;
+        top: 24px;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
+        overflow: clip;
+        pointer-events: none;
+    }
+
+    .seam-tail.mirror {
+        overflow: hidden;
+    }
+
+    /* The GPU path's snapshot canvas gets the identical treatment (it is
+       created unscoped by snapshotGpuTwins, hence :global; its wrapper is
+       display: contents so the canvas positions against the tail box). */
+    .seam-tail.mirror :global(.tail-mirror-src) {
+        display: contents;
+    }
+
+    .seam-tail.mirror img,
+    .seam-tail.mirror :global(.tail-mirror-frame) {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: auto;
+        transform: scaleY(-1);
+    }
+
+    /* Rotation dissolve — the banner's own curve and duration variants,
+       so tail and hero always fade as one. (.tail-prev sits underneath
+       with no animation, exactly like .banner.previous.) */
+    .seam-tail.mirror .tail-cur,
+    .seam-tail.mirror :global(.tail-mirror-frame.incoming) {
+        animation: hero-banner-in 1.4s ease backwards;
+    }
+
+    .seam-tail.mirror .tail-cur.initial {
+        animation-duration: 180ms;
+    }
+
+    .seam-tail.mirror .tail-cur.finish {
+        animation-duration: 650ms;
+    }
+
+    /* The bloom strip is retired (2026-07-24): the blurred hero copy that
+       used to fill the band behind the glass bar is gone — the seam tail
+       alone carries the band. HeroGpuCanvas still renders its INTERNAL
+       bloom canvases; they are hidden here rather than un-rendered to
+       keep the GPU component untouched (visual parity with the tested
+       configuration, which hid them the same way). Out-of-flow overlay,
+       so hiding it shifts no layout. */
+    .artist-page :global(.gpu-hero canvas.bloom) {
+        display: none;
+    }
+
+    /* THE seam design (Kyle, 2026-07-24): the PURE mirror — no fade,
+       no gradient, full strength. Exactly the bar band tall, so at rest
+       the flipped strip fills the glass edge-to-edge and stops cleanly at
+       the bar's top border. Clip-local: the hero's edge sits at
+       70 − 24 = 46px here, so top 0 + height 46 pins the mirror's bottom
+       to the edge and its top to the bar's top line. */
+    .seam-tail.t2 {
+        top: 0;
+        height: 46px;
+    }
+
     /* The monochrome treatment, applied to the PICTURE layers only. The
-       existing filters are re-stated because filter replaces rather than
-       composes. */
-    .artist-page[data-scroll="1"] .banner,
-    .artist-page[data-scroll="1"] :global(.gpu-hero) {
-        filter: var(--mono);
-        /* THE SQUEEZE, biased to keep FACES. At rest --edge IS --hero-span,
-           so this is exactly 0 and the artwork sits on the pixels it does
-           today — top-anchored, nothing tucked up behind the glass bar. As
-           the crop closes, only 22% of each lost pixel comes off the TOP and
-           78% off the bottom: round 9's centre-crop (50/50) pushed the
-           artwork up by half the travel and cut heads off at the park (the
-           user: "most faces are cut off") — faces live in a photo's upper
-           middle, so the banner keeps it. Still a rigid translation of an
-           unmasked layer: zero at rest, seam-proof throughout. */
-        transform: translateY(calc(-0.22 * (var(--hero-span) - var(--edge))));
-    }
+       existing filters are re-stated (in the keyframes and in the fallback
+       rules alike) because filter replaces rather than composes.
 
-    /* The accent ground desaturates with everything else. It was the one layer
-       left out of the monochrome, and its brightest, reddest point sits
-       directly behind the glass bar; the bloom over it is only 95% opaque, so
-       that red bled through and the bar's own backdrop saturate(1.7) amplified
-       it into a visibly warm bar on a black-and-white banner. */
-    .artist-page[data-scroll="1"] .hero-fallback {
-        filter: grayscale(var(--p)) brightness(calc(1 - var(--p) * 0.34));
-    }
+       THE SQUEEZE, biased to keep FACES. At rest --edge IS --hero-span, so
+       the translation is exactly 0 and the artwork sits on the pixels it
+       does today — top-anchored, nothing tucked up behind the glass bar. As
+       the crop closes, only 22% of each lost pixel comes off the TOP and
+       78% off the bottom: round 9's centre-crop (50/50) pushed the artwork
+       up by half the travel and cut heads off at the park (the user: "most
+       faces are cut off") — faces live in a photo's upper middle, so the
+       banner keeps it. Still a rigid translation of an unmasked layer: zero
+       at rest, seam-proof throughout.
 
-    .artist-page[data-scroll="1"] .bloom {
-        filter: blur(34px) saturate(1.6) var(--mono);
-    }
+       The accent ground (.hero-fallback) desaturates with everything else.
+       It was the one layer left out of the monochrome, and its brightest,
+       reddest point sits directly behind the glass bar, where the bar's
+       own backdrop saturate(1.7) amplified any bleed-through into a
+       visibly warm bar on a black-and-white banner.
 
-    .artist-page[data-scroll="1"] .hero-seed {
-        filter: blur(46px) saturate(1.3) var(--mono);
-    }
+       Both mechanisms live per-branch below: the fallback branch keeps the
+       live var(--p)/--mono/--edge calcs verbatim; the scroll-driven branch
+       rides the same curves as animations on the --artist-pane timeline. */
 
     /* Deterministic muted-accent ground: sits under every hero as the base, and
        IS the no-photo fallback (same reserved geometry, hue seeded from the
@@ -4032,27 +5188,6 @@
         background: transparent;
     }
 
-    /* Bloom: a blurred copy that only shows in the ~46px strip behind the glass
-       bar, artificially extending the image up into it. It sits BEHIND the
-       sharp photo (lower z-index), so it never touches the artwork itself. */
-    .bloom {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 106px;
-        object-fit: cover;
-        object-position: center top;
-        filter: blur(34px) saturate(1.6);
-        transform: scale(1.15);
-        opacity: 0.95;
-        z-index: 0;
-    }
-
-    .bloom.current {
-        animation: hero-bloom-in 1.4s ease backwards;
-    }
-
     /* ROUND 12: no .hero-scrim and no .hero-veil. Both jobs — the resting
        dissolve and the parked wordmark's backing — now belong to the SHEET,
        whose gradient sits on the hero's foot at rest and rides its darkest
@@ -4114,8 +5249,13 @@
         gap: 12px;
         padding: 0 28px;
         background: rgba(20, 20, 24, 0.28);
-        backdrop-filter: blur(20px) saturate(1.7);
-        -webkit-backdrop-filter: blur(20px) saturate(1.7);
+        /* 12px, down from 20: pixel-identical over every real captured
+           state (2026-07-24 backdrop evidence pack, two passes) — the
+           backdrop re-sample, not the kernel, is the GPU cost, but the
+           smaller radius still shaves ~0.4 CPU-s/6s of scroll. 8px was
+           one visible step too tight over a sharp hero. */
+        backdrop-filter: blur(12px) saturate(1.7);
+        -webkit-backdrop-filter: blur(12px) saturate(1.7);
         box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
     }
 
@@ -4156,65 +5296,8 @@
         color: #ff8a94;
     }
 
-    .hero-art-actions {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        margin-left: auto;
-    }
-
-    .rstatus + .hero-art-actions {
-        margin-left: 0;
-    }
-
-    .hero-art-notice {
-        max-width: 260px;
-        color: rgba(255, 255, 255, 0.78);
-        font-size: 10px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    .hero-art-notice.error {
-        color: #ff8a94;
-    }
-
-    .hero-art-btn {
-        display: inline-flex;
-        align-items: center;
-        gap: 5px;
-        height: 28px;
-        padding: 0 9px;
-        border: 1px solid rgba(255, 255, 255, 0.11);
-        border-radius: 7px;
-        background: rgba(12, 12, 14, 0.35);
-        color: rgba(255, 255, 255, 0.76);
-        font-size: 10px;
-        font-weight: 600;
-        backdrop-filter: blur(10px);
-        -webkit-backdrop-filter: blur(10px);
-    }
-
-    .hero-art-btn:hover,
-    .hero-art-btn.active {
-        border-color: color-mix(in srgb, var(--accent) 55%, transparent);
-        color: #fff;
-    }
-
-    .hero-art-btn:disabled {
-        opacity: 0.45;
-        cursor: wait;
-    }
-
-    .hero-art-btn.icon-only {
-        width: 28px;
-        padding: 0;
-        justify-content: center;
-    }
-
     /* The sharp artwork: native aspect ratio (no crop), offset down so it
-       begins right at the bottom of the glass bar. It sits ABOVE the bloom.
+       begins right at the bottom of the glass bar.
        max-height caps the very-wide / non-16:9 case so the hero can't swallow
        the viewport — object-fit then crops from the top, keeping faces.
        The 70px offset = the 46px bar height + the 24px top padding of the
@@ -4261,14 +5344,12 @@
 
     /* The first useful frame should feel immediate; the long dissolve is for
        the periodic photo rotation where an outgoing image exists underneath. */
-    .bloom.current.initial,
     .banner.current.initial {
         animation-duration: 180ms;
     }
 
     /* The preview→finished 4K swap dissolves faster than a rotation but slower
        than the first paint — enough to mask the grade/grain without dawdling. */
-    .bloom.current.finish,
     .banner.current.finish {
         animation-duration: 650ms;
     }
@@ -4278,18 +5359,10 @@
         to { opacity: 1; }
     }
 
-    @keyframes hero-bloom-in {
-        from { opacity: 0; }
-        to { opacity: 0.95; }
-    }
-
     @media (prefers-reduced-motion: reduce) {
         .banner.current,
-        .bloom.current,
         .banner.current.initial,
-        .bloom.current.initial,
-        .banner.current.finish,
-        .bloom.current.finish {
+        .banner.current.finish {
             animation-duration: 1ms;
         }
 
@@ -4319,6 +5392,11 @@
         position: absolute;
         left: 0;
         right: 0;
+        /* Identically 0px at EVERY p by construction — measure() writes
+           --lift = banner - 14 - markRest, cancelling the parked term — so
+           this needs no scroll-driven conversion: it is the live
+           (identically-zero) glue on the fallback path and a frozen rest
+           pose on the supported path, where --p is never written. */
         bottom: calc(
             var(--p) * (var(--banner-h) - 14px - var(--lift) - var(--mark-rest))
         );
@@ -4367,10 +5445,11 @@
        is written from the mark's rendered height so the PARKED size is a
        constant ~26px at every pane width: a narrow window gets a smaller hero
        wordmark and the same readable banner. Gated, so at rest there is no
-       transform on the type at all. */
+       transform on the type at all. The origin serves BOTH branches; the
+       scale itself lives per-branch (fallback: the live calc; scroll-driven:
+       the mark-park-ride animation over the identical linear ramp). */
     .artist-page[data-scroll="1"] .logo-slot {
         transform-origin: left bottom;
-        transform: scale(calc(1 - var(--p) * (1 - var(--mark-end))));
     }
 
     .name-title {
@@ -4496,9 +5575,11 @@
     }
 
     /* Floating stat chips beside Play — individually rounded translucent
-       pills (the .hero-art-btn glass recipe), deliberately NOT a joined bar.
-       They sit over the hero's dissolved tail, so the backdrop blur keeps
-       them legible on any artwork. */
+       pills, deliberately NOT a joined bar. They sit over the hero's
+       dissolved tail — dark by design — so their rgba backgrounds alone
+       carry legibility: the backdrop blur they used to run was measured
+       invisible there in every captured state and cost ~30% of the
+       scroll-time GPU bill (2026-07-24 evidence pack), so it is gone. */
     .stat-chips {
         display: flex;
         align-items: center;
@@ -4521,9 +5602,11 @@
     /* Only the first three stats survive into the banner; the rest fade out on
        the way up. They keep their layout width — the row is left-aligned, so
        nothing shifts — but they must stop taking clicks once invisible, which
-       opacity alone does not do. */
+       opacity alone does not do. The opacity ramp lives per-branch (fallback:
+       the live calc; scroll-driven: extras-fade-ride); the hit gate stays
+       here in base for both — pointer-events is not animatable, so apply()
+       keeps writing --extra-hit (boundary-only on the supported path). */
     .stat-chips > :nth-child(n + 4) {
-        opacity: calc(1 - var(--p) * 2.4);
         pointer-events: var(--extra-hit, auto);
     }
 
@@ -4540,8 +5623,6 @@
         font-size: 11.5px;
         font-weight: 600;
         white-space: nowrap;
-        backdrop-filter: blur(10px);
-        -webkit-backdrop-filter: blur(10px);
     }
 
     .chip :global(.icon) {
@@ -4674,9 +5755,14 @@
         }
     }
 
-    /* Shrunk by real width/height, not transform: with a transform the row
-       would keep its 50px layout box, the chips would stay centred in that
-       band and the parked wordmark would collide with them. */
+    /* FALLBACK: shrunk by real width/height, not transform — with a
+       transform alone the row would keep its 50px layout box, the chips
+       would stay centred in that band and the parked wordmark would collide
+       with them. On the scroll-driven path --p stays 0, so these calcs
+       freeze at 50px and play-shrink-ride shrinks the button by transform
+       instead — with chips-slide-ride supplying the row slide the frozen
+       layout box no longer provides, which is what makes the transform
+       route safe there. */
     .hero-play {
         display: grid;
         place-items: center;
@@ -4699,13 +5785,27 @@
         height: calc(21px - var(--p) * 6px);
     }
 
+    /* The individual `scale` property, NOT `transform: scale(1.04)`: on the
+       scroll-driven path a running transform animation (play-shrink-ride)
+       silently overrides any transform declaration and the hover pop would
+       die. `scale` COMPOSES with the animation's transform — identical at
+       rest, a multiplicative pop mid-ride — and stays symmetric about the
+       centre on both branches (no transform-origin is set on the button).
+       Known deviation: composing outside the ride's transform also
+       multiplies its translateX by 1.04, so a hovered mid-ride/parked
+       button sits up to ~0.4px (Play) / ~1.1px (preview) further left
+       than the fallback's fixed-centre pop — transient, hover-only,
+       accepted. Any future hover transform on an animated element must use
+       individual properties too. */
     .hero-play:hover {
         background: var(--accent-hover);
-        transform: scale(1.04);
+        scale: 1.04;
     }
 
-    /* Preview tracks. Glass, not accent: Play stays the row's one filled
-       control. It shrinks on the same --p curve as .hero-play, but the travel
+    /* Preview tracks. Translucent, not accent: Play stays the row's one
+       filled control. (The pill's backdrop blur went with the chips' —
+       same 2026-07-24 measurement; the rgba fill carries the look.)
+       It shrinks on the same --p curve as .hero-play, but the travel
        is chosen by where it LANDS, not by proportion: 40px at rest down to
        27px parked, which is the chips' fixed height (they never scale — only
        Play and this button animate). Matching the chips is the whole point of
@@ -4723,8 +5823,6 @@
         border-radius: 50%;
         background: rgba(14, 15, 18, 0.4);
         color: rgba(255, 255, 255, 0.72);
-        backdrop-filter: blur(10px);
-        -webkit-backdrop-filter: blur(10px);
     }
 
     /* The glyph lands at 14px parked — the size the chips' own icons run at,
@@ -4734,10 +5832,12 @@
         height: calc(18px - var(--p) * 4px);
     }
 
+    /* `scale`, not `transform` — same reasoning as .hero-play's hover: it
+       must compose with preview-shrink-ride instead of being overridden. */
     .hero-preview:hover:not(:disabled) {
         color: #fff;
         border-color: rgba(255, 255, 255, 0.75);
-        transform: scale(1.04);
+        scale: 1.04;
     }
 
     .hero-preview:disabled {
@@ -4749,8 +5849,11 @@
        on the same curve the shed chips use (see .stat-chips > :nth-child(n+4)),
        so the row loses its secondary detail all at once on the way up rather
        than the badge keeping its own schedule. The tooltip still carries the
-       count once it is gone. Offsets stay fixed: the badge is small enough at
-       a 27px parked circle, and animating them slid it off the edge. */
+       count once it is gone. Offsets stay fixed on the fallback branch: the
+       badge is small enough at a 27px parked circle, and animating them slid
+       it off the edge. (On the scroll-driven branch the parent's ride
+       transform drifts the corner offsets ≤0.7px — see the note at the
+       badge-fade-ride rule.) */
     .preview-count {
         position: absolute;
         top: -3px;
@@ -4768,7 +5871,9 @@
         font-weight: 800;
         line-height: 12px;
         text-align: center;
-        opacity: calc(1 - var(--p) * 2.4);
+        /* The fade ramp itself lives per-branch (fallback: the live calc;
+           scroll-driven: badge-fade-ride, which also counter-scales the
+           badge against its now-transform-shrunk parent). */
     }
 
     .popular h2 {
@@ -5781,17 +6886,6 @@
             padding: 0 20px;
         }
 
-        .hero-art-btn span,
-        .hero-art-notice {
-            display: none;
-        }
-
-        .hero-art-btn {
-            width: 28px;
-            padding: 0;
-            justify-content: center;
-        }
-
         /* The spacer is the source of truth for the row's resting height —
            heroScroll() reads --row-h off it, and the pinned row follows. */
         .actions-gap {