feat: remove color tint overlay from artist hero

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/views/detail.js

@@ -73,7 +73,6 @@ export async function loadArtistDetail(artist) {
   hero.style.transition = '';
   hero.style.background = 'linear-gradient(135deg, var(--surface2), var(--surface))';
   hero.querySelector('.artist-hero-img')?.remove();
-  hero.querySelector('.artist-hero-tint')?.remove();
   const heroBgEl = document.getElementById('artist-hero-bg');
   if(heroBgEl) heroBgEl.style.backgroundImage = '';
   document.getElementById('artist-hero-pfp-wrap')?.querySelector('.artist-hero-pfp')?.remove();
@@ -141,17 +140,6 @@ export async function loadArtistDetail(artist) {
       pfpWrap.prepend(pfpImg);
       document.getElementById('artist-hero-pfp-initial')?.style.setProperty('display', 'none');
     }
-    // color tint — non-blocking, fades in via CSS
-    _extractColor(img).then(rgb => {
-      if(!rgb) return;
-      const [r, g, b] = rgb;
-      hero.querySelector('.artist-hero-tint')?.remove();
-      const tint = document.createElement('div');
-      tint.className = 'artist-hero-tint';
-      tint.style.cssText = `position:absolute;inset:0;background:linear-gradient(to right,rgba(${r},${g},${b},.55) 0%,rgba(${r},${g},${b},.25) 55%,rgba(${r},${g},${b},.6) 100%);pointer-events:none;opacity:0;transition:opacity 0.6s ease`;
-      if(overlay) hero.insertBefore(tint, overlay);
-      requestAnimationFrame(() => { tint.style.opacity = '1'; });
-    });
   } else if(bgSrc) {
     hero.style.background = '';
     const bgEl = document.getElementById('artist-hero-bg');
@@ -416,26 +404,3 @@ export async function loadAlbumDetail(album) {
 
 // ─── HELPERS ───
 
-async function _extractColor(src) {
-  return new Promise(resolve => {
-    const img = new Image();
-    img.crossOrigin = 'anonymous';
-    img.onload = () => {
-      try {
-        const c = document.createElement('canvas');
-        c.width = c.height = 64;
-        const ctx = c.getContext('2d');
-        ctx.drawImage(img, 0, 0, 64, 64);
-        const d = ctx.getImageData(0, 0, 64, 64).data;
-        let r = 0, g = 0, b = 0, n = 0;
-        for(let i = 0; i < d.length; i += 4) {
-          const lum = d[i] * 0.299 + d[i+1] * 0.587 + d[i+2] * 0.114;
-          if(lum > 20 && lum < 235) { r += d[i]; g += d[i+1]; b += d[i+2]; n++; }
-        }
-        resolve(n ? [Math.round(r/n), Math.round(g/n), Math.round(b/n)] : null);
-      } catch { resolve(null); }
-    };
-    img.onerror = () => resolve(null);
-    img.src = src;
-  });
-}