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>