artist page: compositor scroll pipeline + final hero design (crossfade twins, mirror seam, bloom retired)

Scroll-driven animation conversion
- apply() writes nothing per frame on the supported path; the hero
  squeeze, fade line and header curves all ride scroll-driven animations
  on the compositor.
- Section boundaries flip via IntersectionObserver sentinels; the scroll
  listener is gone from the hot path.
- The scrollbar thumb rides its own scroll-driven animation.
- @supports-not fallback keeps the previous rAF --p path verbatim, so
  unsupported engines render identically.
- Curves verified exact to 1e-6 against the old path, 0.000px continuity
  across boundary flips, correct retarget on resize.

Perf fixes
- Forced-layout reads pulled out of both scroll handlers.
- Resize settle-reflow: a second reflow 200ms after resize quiesces, and
  the pane is observed too. This was the root cause of the fullscreen
  fade-wedge and of the long-standing intermittent where rows stayed
  hidden after a resize.

Glass
- backdrop-filter removed from chips and preview surfaces.
- Bar glass blur 20 -> 12.
- Choose-hero pill removed from the UI; pickArtistHero/clearArtistHero
  backend is untouched and the control can be re-homed later.

Hero design (final)
- Crossfade twins are permanent. Twin blur is baked via bakeBlur()
  (clamp-to-edge pad -> blur -> crop) so the frames stay pixel-aligned
  with no edge fringe and no geometry scaling.
- Bloom strip retired everywhere; HeroGpuCanvas's internal bloom canvases
  are hidden by one scoped rule and the component is unchanged.
- Seam is a pure mirror: the artwork's top strip flipped inside the glass
  band, clipped at the bar's top line, riding the squeeze with the hero
  and dissolving in lockstep on rotation.
- GPU twin overlay crossfades on rotation instead of snapping — the
  incoming baked frame fades in on hero-banner-in with a 2-frame cap.
- ~930 lines of experimental variants and the perf-flag system deleted;
  the surviving path is a pixel no-op against the approved configuration.

Debug overlay
- PERF/SEAM rows dropped; the overlay keeps stats plus an FPS/drops/worst
  counter (Ctrl+Shift+D).

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>

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();
     }

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;