From 7f17028f450149b01ddc97c7223165e96bc149a0 Mon Sep 17 00:00:00 2001
From: Avery Felts <averyfelts@Averys-MacBook-Air.local>
Date: Wed, 28 Jan 2026 08:22:15 -0700
Subject: [PATCH] Fix smoke animation: update SVG colors and enhance
 multidirectional drifting

---
 public/smoke.svg              | 13 +++++++++----
 src/app/globals.css           | 31 ++++++++++++++++++++-----------
 src/components/UserHeader.tsx |  4 ++--
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/public/smoke.svg b/public/smoke.svg
index 5178c04..cc56e97 100644
--- a/public/smoke.svg
+++ b/public/smoke.svg
@@ -2,10 +2,15 @@
   <filter id="noiseFilter">
     <feTurbulence 
       type="fractalNoise" 
-      baseFrequency="0.04" 
-      numOctaves="6" 
+      baseFrequency="0.02" 
+      numOctaves="5" 
       stitchTiles="stitch" />
-     <feColorMatrix type="matrix" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  3 -1.5 0 0.2 0"/>
+     <feColorMatrix type="matrix" values="
+        0 0 0 0 1
+        0 0 0 0 1
+        0 0 0 0 1
+        1 0 0 0 -0.4
+     "/>
   </filter>
-  <rect width="100%" height="100%" filter="url(#noiseFilter)"/>
+  <rect width="100%" height="101%" filter="url(#noiseFilter)"/>
 </svg>
diff --git a/src/app/globals.css b/src/app/globals.css
index 4944c14..8c771fd 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -601,33 +601,42 @@
   border-radius: inherit;
 }
 
-@keyframes fog-drift {
+@keyframes fog-drift-1 {
   0% {
     background-position: 0 0;
   }
 
   100% {
-    background-position: 1000px 500px;
+    background-position: 800px 200px;
+  }
+}
+
+@keyframes fog-drift-2 {
+  0% {
+    background-position: 0 0;
+  }
+
+  100% {
+    background-position: -600px 150px;
   }
 }
 
 .fog-layer-1 {
   background-image: url('/smoke.svg');
   background-repeat: repeat;
-  background-size: 400px 400px;
-  animation: fog-drift 60s linear infinite;
-  opacity: 0.9;
-  filter: blur(8px);
+  background-size: 600px 600px;
+  animation: fog-drift-1 45s linear infinite;
+  opacity: 0.8;
+  filter: blur(4px);
 }
 
 .fog-layer-2 {
   background-image: url('/smoke.svg');
   background-repeat: repeat;
-  background-size: 350px 350px;
-  animation: fog-drift 50s linear infinite reverse;
-  animation-delay: -15s;
-  opacity: 0.7;
-  filter: blur(5px);
+  background-size: 500px 500px;
+  animation: fog-drift-2 35s linear infinite;
+  opacity: 0.6;
+  filter: blur(2px);
 }
 
 /* Swipe ecosystem for mobile placards */
diff --git a/src/components/UserHeader.tsx b/src/components/UserHeader.tsx
index 1228ba6..6b2d09a 100644
--- a/src/components/UserHeader.tsx
+++ b/src/components/UserHeader.tsx
@@ -221,8 +221,8 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
       }}>
         {/* Cloudy/Foggy effect overlay - removed mix-blend-overlay for visibility */}
         <div className="absolute inset-0 pointer-events-none select-none overflow-hidden invert dark:invert-0 transition-all duration-300">
-          <div className="absolute inset-0 fog-layer-1 opacity-40 dark:opacity-30" />
-          <div className="absolute inset-0 fog-layer-2 opacity-30 dark:opacity-20" />
+          <div className="absolute inset-0 fog-layer-1 opacity-50 dark:opacity-40" />
+          <div className="absolute inset-0 fog-layer-2 opacity-40 dark:opacity-30" />
         </div>
 
         <div className="container mx-auto px-4 h-16 sm:h-20 flex items-center justify-between relative z-50">