fix: render animated background via portal at z-index:-1 to stop implicit compositing

Previous isolation:isolate fix didn't work because:
- position:fixed elements still see through isolation boundary
- backdrop-filter samples all rendered content regardless of stacking context
- The real issue: animated background at z-index:0 with will-change:transform
  forces Chrome to implicitly composite EVERY overlapping element

Fix: render BackgroundRenderer via createPortal on document.body with
z-index:-1, placing it below the root stacking context. This eliminates
implicit compositing entirely.

Also:
- Remove backdrop-blur-xl from desktop header (was resampling bg 60fps)
- Remove will-change:opacity from card ::after pseudo-element
- Replace transition-all with transition-colors on header buttons

src/styles/globals.css

@@ -400,7 +400,6 @@ img.twemoji {
     transition: opacity 0.3s ease;
     pointer-events: none;
     z-index: 10;
-    will-change: opacity;
   }
 
   .bento-card-hover:hover::after {