From dc867e84f427bd0292815d73d2e3953c1fd382a8 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 00:10:40 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20glass=20instant,=20content=20fades=20in?=
 =?UTF-8?q?=20=E2=80=94=20backdrop=20and=20blur=20separate=20from=20animat?=
 =?UTF-8?q?ion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/unified/UnifiedSettingsModal.tsx    | 16 +++++++---------
 styles/globals.css                               |  9 +++++++++
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/components/settings/unified/UnifiedSettingsModal.tsx b/components/settings/unified/UnifiedSettingsModal.tsx
index 3bfb955..6a865a0 100644
--- a/components/settings/unified/UnifiedSettingsModal.tsx
+++ b/components/settings/unified/UnifiedSettingsModal.tsx
@@ -374,7 +374,7 @@ export default function UnifiedSettingsModal() {
 
   return (
     <>
-      {/* Backdrop */}
+      {/* Backdrop — fades in/out */}
       <div
         className={`fixed inset-0 z-[60] bg-black/50 transition-opacity duration-200 ${
           isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
@@ -382,21 +382,19 @@ export default function UnifiedSettingsModal() {
         onClick={handleBackdropClick}
       />
 
-      {/* Modal outer wrapper — fades in/out, glass panel inside stays always-opaque */}
+      {/* Glass panel — always mounted, instant show/hide, blur always composited */}
       <div
-        className={`fixed inset-0 z-[61] flex items-center justify-center p-4 transition-all duration-200 ease-out ${
-          isOpen
-            ? 'opacity-100 scale-100 pointer-events-auto'
-            : 'opacity-0 scale-[0.97] pointer-events-none'
+        className={`fixed inset-0 z-[61] flex items-center justify-center p-4 ${
+          isOpen ? 'visible pointer-events-auto' : 'invisible pointer-events-none'
         }`}
       >
         <div
           className="w-full max-w-3xl h-[85vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
           onClick={e => e.stopPropagation()}
         >
-          {/* All content gated by isOpen — empty glass box when closed (GPU keeps blur warm) */}
+          {/* Content fades in/out independently — glass stays solid */}
           {isOpen && (
-            <>
+            <div className="flex flex-col h-full animate-fade-in">
               {/* Header */}
               <div className="shrink-0 px-6 pt-5 pb-4 border-b border-white/[0.06]">
                 <div className="flex items-center justify-between mb-4">
@@ -470,7 +468,7 @@ export default function UnifiedSettingsModal() {
                   </motion.div>
                 )}
               </AnimatePresence>
-            </>
+            </div>
           )}
         </div>
       </div>
diff --git a/styles/globals.css b/styles/globals.css
index 59c2bb5..ceeec13 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -107,4 +107,13 @@
   .animate-float {
     animation: float 6s ease-in-out infinite;
   }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  .animate-fade-in {
+    animation: fadeIn 150ms ease-out;
+  }
 }