From 34ea31421fc143d7db424dfe7650b877aa9a6e01 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Thu, 12 Mar 2026 09:55:39 +0800
Subject: [PATCH] Boost ambient visibility: stronger orbs, reduced vignette,
 transparent cards

- Orbs repositioned centrally with larger ellipses (90%/80%) and higher
  opacity (0.45/0.35) so glow is visible through glassmorphism cards
- Vignette reduced from 0.45 to 0.30, transparent zone expanded to 50%
- Card opacity reduced from 0.80 to 0.65 to let more ambient bleed through
- Added overflow-hidden on ambient container to prevent black bar artifacts
  during drift animations

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/dashboard/DashboardAmbient.tsx | 8 ++++----
 frontend/src/index.css                                 | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/dashboard/DashboardAmbient.tsx b/frontend/src/components/dashboard/DashboardAmbient.tsx
index a99ab4e..4685042 100644
--- a/frontend/src/components/dashboard/DashboardAmbient.tsx
+++ b/frontend/src/components/dashboard/DashboardAmbient.tsx
@@ -9,18 +9,18 @@
  */
 export default function DashboardAmbient() {
   return (
-    <div className="pointer-events-none absolute inset-0 z-0" aria-hidden="true">
+    <div className="pointer-events-none absolute inset-0 z-0 overflow-hidden" aria-hidden="true">
       {/* Animated gradient orbs — position shifts via CSS animation */}
       <div
         className="absolute inset-0 animate-drift-1"
         style={{
-          background: 'radial-gradient(ellipse 70% 55% at 10% 10%, hsl(var(--accent-color) / 0.25) 0%, transparent 55%)',
+          background: 'radial-gradient(ellipse 90% 70% at 30% 20%, hsl(var(--accent-color) / 0.45) 0%, transparent 60%)',
         }}
       />
       <div
         className="absolute inset-0 animate-drift-2"
         style={{
-          background: 'radial-gradient(ellipse 55% 45% at 85% 85%, hsl(var(--accent-color) / 0.15) 0%, transparent 55%)',
+          background: 'radial-gradient(ellipse 80% 60% at 75% 75%, hsl(var(--accent-color) / 0.35) 0%, transparent 60%)',
         }}
       />
       {/* Noise texture */}
@@ -36,7 +36,7 @@ export default function DashboardAmbient() {
       <div
         className="absolute inset-0"
         style={{
-          background: 'radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.45) 100%)',
+          background: 'radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.30) 100%)',
         }}
       />
     </div>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 575407b..dddd95b 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -459,7 +459,7 @@ form[data-submitted] input:invalid + button {
 
 /* Dashboard glassmorphism — cards become semi-transparent to let ambient show through */
 .dashboard-glass .bg-card {
-  background-color: hsl(0 0% 5% / 0.80) !important;
+  background-color: hsl(0 0% 5% / 0.65) !important;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
 }