Replace PNG fog with procedural SVG animation

public/smoke.svg

@@ -0,0 +1,11 @@
+<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
+  <filter id="noiseFilter">
+    <feTurbulence 
+      type="fractalNoise" 
+      baseFrequency="0.005" 
+      numOctaves="4" 
+      stitchTiles="stitch" />
+     <feColorMatrix type="matrix" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  1 0 0 0 0"/>
+  </filter>
+  <rect width="100%" height="100%" filter="url(#noiseFilter)"/>
+</svg>

src/app/globals.css

@@ -576,4 +576,30 @@
   opacity: 0.03;
   pointer-events: none;
   border-radius: inherit;
+}
+
+@keyframes fog-drift {
+  0% {
+    background-position: 0 0;
+  }
+
+  100% {
+    background-position: 500px 0;
+  }
+}
+
+.fog-layer-1 {
+  background-image: url('/smoke.svg');
+  background-repeat: repeat;
+  background-size: 500px 500px;
+  animation: fog-drift 60s linear infinite;
+  opacity: 0.4;
+}
+
+.fog-layer-2 {
+  background-image: url('/smoke.svg');
+  background-repeat: repeat;
+  background-size: 400px 400px;
+  animation: fog-drift 40s linear infinite reverse;
+  opacity: 0.3;
 }

src/components/UserHeader.tsx

@@ -228,8 +228,12 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
           <div className="absolute -top-10 -left-10 w-64 h-64 bg-neutral-200/40 rounded-full blur-3xl animate-float" style={{ animationDuration: '15s', animationDelay: '0s' }} />
           <div className="absolute top-1/2 left-1/3 w-96 h-32 bg-slate-300/30 rounded-full blur-3xl animate-float" style={{ animationDuration: '20s', animationDelay: '-5s' }} />
           <div className="absolute -bottom-10 right-0 w-80 h-80 bg-stone-200/30 rounded-full blur-3xl animate-float" style={{ animationDuration: '18s', animationDelay: '-2s' }} />
-          {/* Subtle moving fog layer */}
+
-          <div className="absolute inset-0 bg-[url('/fog-texture.png')] opacity-10 animate-slide-in-right" style={{ animationDuration: '60s', animationTimingFunction: 'linear', animationIterationCount: 'infinite' }} />
+          {/* Subtle moving fog layers - CSS procedural animation */}
+          <div className="absolute inset-0 z-10 opacity-30 mix-blend-overlay pointer-events-none" style={{ filter: theme === 'dark' ? 'invert(1)' : 'none' }}>
+            <div className="absolute inset-0 fog-layer-1" />
+            <div className="absolute inset-0 fog-layer-2" />
+          </div>
         </div>
 
         {/* Edge blur overlay - fades content into header */}