From 2cb560fda435ba6c7ef990c0121f6390c6adcb4d Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 22:07:50 +0200
Subject: [PATCH] Keep light mode gradients visible while drifting

---
 web-player/src/lib/theme/tokens.ts |  4 ++--
 web-player/src/routes/layout.css   | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web-player/src/lib/theme/tokens.ts b/web-player/src/lib/theme/tokens.ts
index b3fdf5b..8b8431b 100644
--- a/web-player/src/lib/theme/tokens.ts
+++ b/web-player/src/lib/theme/tokens.ts
@@ -54,7 +54,7 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 			: `linear-gradient(90deg, oklch(0.66 0.11 ${H}), oklch(0.84 0.09 ${r(h + 18, 1)}), oklch(0.66 0.11 ${H}))`,
 		'--mf-hero-tint': light ? `oklch(0.8 0.05 ${H})` : `oklch(0.3 0.04 ${H})`,
 		'--mf-hero-bg': light
-			? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.6)}, ${glow(0.96, 0.02, 0.4)} 60%)`
+			? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.6)}, ${glow(0.93, 0.03, 0.52)} 60%)`
 			: `linear-gradient(120deg, ${glow(0.24, 0.04, 0.55)}, ${glow(0.14, 0.02, 0.35)} 60%, ${glow(0.12, 0.015, 0.25)})`,
 		'--mf-modal-glow': light
 			? `linear-gradient(135deg, ${glow(0.88, 0.05, 0.5)} 0%, ${glow(0.93, 0.03, 0.2)} 40%, transparent 75%)`
@@ -63,7 +63,7 @@ export function buildThemeTokens(hue: number, mode: 'dark' | 'light' = 'dark'):
 			? `linear-gradient(135deg, ${dangerGlow(0.86, 0.07, 0.55)} 0%, ${dangerGlow(0.92, 0.04, 0.22)} 40%, transparent 75%)`
 			: `linear-gradient(135deg, ${dangerGlow(0.34, 0.1, 0.45)} 0%, ${dangerGlow(0.22, 0.06, 0.18)} 35%, transparent 70%)`,
 		'--mf-spotlight-bg': light
-			? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.55)}, ${glow(0.96, 0.02, 0.35)} 55%)`
+			? `linear-gradient(120deg, ${glow(0.9, 0.04, 0.55)}, ${glow(0.93, 0.03, 0.47)} 55%)`
 			: `linear-gradient(120deg, ${glow(0.22, 0.04, 0.5)}, ${glow(0.13, 0.02, 0.3)} 55%, ${glow(0.11, 0.015, 0.2)})`,
 		'--mf-cover-grad': light
 			? `linear-gradient(150deg, oklch(0.84 0.03 ${H}), oklch(0.74 0.02 ${H}))`
diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 80cfea5..00c8f0b 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -224,22 +224,22 @@
 }
 @utility surface-active {
 	background-image: var(--mf-g-active);
-	background-size: 180% 100%;
+	background-size: 125% 100%;
 	animation: gradient-drift 14s ease-in-out infinite alternate;
 }
 @utility surface-active-hover {
 	background-image: var(--mf-g-hover);
-	background-size: 180% 100%;
+	background-size: 125% 100%;
 	animation: gradient-drift 14s ease-in-out infinite alternate;
 }
 @utility hero-surface {
 	background-image: var(--mf-hero-bg);
-	background-size: 180% 100%;
+	background-size: 125% 100%;
 	animation: gradient-drift 18s ease-in-out infinite alternate;
 }
 @utility spotlight-surface {
 	background-size:
-		180% 100%,
+		125% 100%,
 		100% 100%;
 	animation: gradient-drift 18s ease-in-out infinite alternate;
 	background-image:
@@ -252,7 +252,7 @@
 		);
 }
 @utility glow-drift {
-	background-size: 180% 100%;
+	background-size: 125% 100%;
 	animation: gradient-drift 18s ease-in-out infinite alternate;
 }
 @utility field-control {