Isolate hue-rotate animation to background layer only

- Create separate background layer using ::before pseudo-element
- Move hue-rotate animation to background layer with z-index: -1
- Remove filter from main container to prevent inheritance
- Use equivalent gradient colors in CSS (pink-100, purple-50, indigo-100)
- Foreground elements (brain emoji, text) now maintain original colors
- Background still animates smoothly without affecting content

examples/chat-ui/src/index.css

@@ -11,7 +11,19 @@
   }
 }
 
-.animated-hue-bg {
+.animated-bg-container {
+  position: relative;
+}
+
+.animated-bg-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, #fdf2f8, #faf5ff, #eef2ff);
   animation: hue-rotate 60s linear infinite;
   animation-delay: var(--random-delay, 0s);
+  z-index: -1;
 }