From 7b72db8a24abe980f82687d1fa64901a7f497a38 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Wed, 23 Sep 2026 21:28:07 +0200
Subject: [PATCH] Add ambient drift animation to app backdrop; adjust inset and
 handle reduced motion

---
 web-player/src/routes/layout.css | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/web-player/src/routes/layout.css b/web-player/src/routes/layout.css
index 4d2eea9..caba038 100644
--- a/web-player/src/routes/layout.css
+++ b/web-player/src/routes/layout.css
@@ -169,10 +169,16 @@
 @utility app-backdrop {
 	pointer-events: none;
 	position: fixed;
-	inset: 0;
+	inset: -10%;
 	z-index: -10;
 	background-color: var(--mf-bg);
 	background-image: var(--mf-ambient);
+	animation: ambient-drift 48s ease-in-out infinite alternate;
+	will-change: transform;
+
+	@media (prefers-reduced-motion: reduce) {
+		animation: none;
+	}
 }
 @utility app-vignette {
 	pointer-events: none;
@@ -307,6 +313,18 @@ button:disabled {
 	}
 }
 
+@keyframes ambient-drift {
+	0% {
+		transform: translate3d(-3%, -2%, 0) scale(1);
+	}
+	50% {
+		transform: translate3d(2%, 3%, 0) scale(1.06);
+	}
+	100% {
+		transform: translate3d(3%, -1%, 0) scale(1.02);
+	}
+}
+
 @keyframes sheen {
 	from {
 		background-position: 200% 0;