From b585e18ccf9ef705e8f2d22104d9b1c6a8d7fd5e Mon Sep 17 00:00:00 2001
From: James Pine <ijamespine@me.com>
Date: Sun, 15 Mar 2026 08:53:03 -0700
Subject: [PATCH] fix: fade in hero background glow to avoid Safari rendering
 flash

---
 landing/src/app/globals.css | 14 ++++++++++++++
 landing/src/app/page.tsx    |  8 ++------
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/landing/src/app/globals.css b/landing/src/app/globals.css
index 143203e7..d83a2060 100644
--- a/landing/src/app/globals.css
+++ b/landing/src/app/globals.css
@@ -115,6 +115,20 @@
   animation: fadeUp 0.6s ease-out forwards;
 }
 
+.hero-glow-fade {
+  opacity: 0;
+  animation: fadeIn 2s ease-out 0.3s forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 /* Noise texture overlay for hero glow */
 /* .hero-glow::after {
   content: "";
diff --git a/landing/src/app/page.tsx b/landing/src/app/page.tsx
index a43b1536..7e2deb9e 100644
--- a/landing/src/app/page.tsx
+++ b/landing/src/app/page.tsx
@@ -39,7 +39,7 @@ export default function Home() {
       {/* ── Hero Section ─────────────────────────────────────────────── */}
       <section className="relative pt-32 pb-16">
         {/* Background glow */}
-        <div className="hero-glow pointer-events-none absolute inset-0 -top-32">
+        <div className="hero-glow hero-glow-fade pointer-events-none absolute inset-0 -top-32">
           <div className="absolute left-1/2 top-0 -translate-x-1/2 w-[800px] h-[600px] rounded-full bg-accent/15 blur-[150px]" />
           <div className="absolute left-1/2 top-12 -translate-x-1/2 w-[500px] h-[400px] rounded-full bg-accent/10 blur-[80px]" />
         </div>
@@ -48,11 +48,7 @@ export default function Home() {
           {/* Logo */}
           <div
             className="fade-in mx-auto mb-8 h-[120px] w-[120px] md:h-[160px] md:w-[160px]"
-            style={{
-              animationDelay: '0ms',
-              filter:
-                'drop-shadow(0 0 20px hsl(43 60% 50% / 0.4)) drop-shadow(0 0 60px hsl(43 60% 50% / 0.2))',
-            }}
+            style={{ animationDelay: '0ms' }}
           >
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img