From 9201171936f3884c5bed07432de44c155b08a7fd Mon Sep 17 00:00:00 2001
From: Avery Felts <averyfelts@Averys-MacBook-Air.local>
Date: Tue, 27 Jan 2026 23:25:33 -0700
Subject: [PATCH] Boost header fog visibility and speed

---
 public/smoke.svg              |  6 +++---
 src/app/globals.css           | 12 ++++++------
 src/components/UserHeader.tsx |  2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/public/smoke.svg b/public/smoke.svg
index 25f04c2..06a0921 100644
--- a/public/smoke.svg
+++ b/public/smoke.svg
@@ -2,10 +2,10 @@
   <filter id="noiseFilter">
     <feTurbulence 
       type="fractalNoise" 
-      baseFrequency="0.005" 
-      numOctaves="4" 
+      baseFrequency="0.015" 
+      numOctaves="5" 
       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"/>
+     <feColorMatrix type="matrix" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  1.5 0 0 -0.2 0"/>
   </filter>
   <rect width="100%" height="100%" filter="url(#noiseFilter)"/>
 </svg>
diff --git a/src/app/globals.css b/src/app/globals.css
index 9a431fe..42ba3b7 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -591,15 +591,15 @@
 .fog-layer-1 {
   background-image: url('/smoke.svg');
   background-repeat: repeat;
-  background-size: 500px 500px;
-  animation: fog-drift 60s linear infinite;
-  opacity: 0.4;
+  background-size: 600px 600px;
+  animation: fog-drift 30s linear infinite;
+  opacity: 0.6;
 }
 
 .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;
+  background-size: 500px 500px;
+  animation: fog-drift 20s linear infinite reverse;
+  opacity: 0.5;
 }
\ No newline at end of file
diff --git a/src/components/UserHeader.tsx b/src/components/UserHeader.tsx
index 4c5ec65..63ff982 100644
--- a/src/components/UserHeader.tsx
+++ b/src/components/UserHeader.tsx
@@ -230,7 +230,7 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
           <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 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 z-10 opacity-60 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>