From a8348a2b14bb2f104b2ef346b71684c0bdfbd0fb Mon Sep 17 00:00:00 2001
From: Avery Felts <averyfelts@Averys-MacBook-Air.local>
Date: Wed, 28 Jan 2026 09:10:35 -0700
Subject: [PATCH] Refine header fog mask for a much smoother, seamless
 transition

---
 src/components/UserHeader.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/UserHeader.tsx b/src/components/UserHeader.tsx
index ac3f62a..09c46cd 100644
--- a/src/components/UserHeader.tsx
+++ b/src/components/UserHeader.tsx
@@ -219,16 +219,16 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
         backdropFilter: 'blur(16px)',
         borderBottom: theme === 'light' ? '1px solid rgba(0,0,0,0.05)' : '1px solid rgba(255,255,255,0.08)'
       }}>
-        {/* Cloudy/Foggy effect overlay with feathered edges */}
+        {/* Cloudy/Foggy effect overlay with ultra-smooth feathered edges */}
         <div
-          className="absolute inset-0 pointer-events-none select-none overflow-hidden invert dark:invert-0 transition-all duration-300"
+          className="absolute inset-0 pointer-events-none select-none overflow-hidden invert dark:invert-0 transition-opacity duration-700"
           style={{
-            maskImage: 'linear-gradient(to bottom, transparent, black 15%, black 85%, transparent)',
-            WebkitMaskImage: 'linear-gradient(to bottom, transparent, black 15%, black 85%, transparent)'
+            maskImage: 'linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.02) 2%, rgba(0,0,0,0.4) 15%, black 40%, black 60%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,0.02) 98%, transparent 100%)',
+            WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.02) 2%, rgba(0,0,0,0.4) 15%, black 40%, black 60%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,0.02) 98%, transparent 100%)'
           }}
         >
-          <div className="absolute inset-0 fog-layer-1 opacity-35 dark:opacity-25" />
-          <div className="absolute inset-0 fog-layer-2 opacity-25 dark:opacity-15" />
+          <div className="absolute inset-0 fog-layer-1 opacity-[0.2] dark:opacity-[0.15]" />
+          <div className="absolute inset-0 fog-layer-2 opacity-[0.12] dark:opacity-[0.1]" />
         </div>
 
         <div className="container mx-auto px-4 h-16 sm:h-20 flex items-center justify-between relative z-50">