From af7e0287d4bc025a66d892e087eee084b089351b Mon Sep 17 00:00:00 2001
From: Jonathon Wright <jonny.wright225@gmail.com>
Date: Sat, 27 Jun 2026 20:54:08 +1000
Subject: [PATCH] fix(ui): backdrop now moves in every browser
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The backdrop's only motion was the scroll-driven pan (animation-timeline:
scroll()), which is Chromium-only — so in Firefox/Safari the board sat dead
still. Add a continuous timed top↔bottom drift (48s, alternates) as the
universal baseline; keep the scroll-coupled pan as a Chromium enhancement that
overrides it. Motion-safe: both gated behind prefers-reduced-motion.
---
 src/styles/global.css | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index 95eaa67..7d8b506 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -420,6 +420,16 @@ svg {
       rgba(246, 248, 251, 0.82) 100%
     );
 }
+/* BASELINE motion (works in EVERY browser, no JS): a slow, continuous top↔bottom
+   drift. This is the guaranteed fallback — Firefox/Safari don't support
+   scroll-driven animations, so without this the board would sit dead-still. */
+@media (prefers-reduced-motion: no-preference) {
+  .site-bg__img {
+    animation: bgDrift 48s ease-in-out infinite alternate;
+  }
+}
+/* ENHANCEMENT: where scroll-driven animations exist (Chromium), couple the pan
+   to scroll position instead — overrides the timed drift on the same element. */
 @supports (animation-timeline: scroll()) {
   @media (prefers-reduced-motion: no-preference) {
     .site-bg__img {
@@ -428,9 +438,17 @@ svg {
     }
   }
 }
-/* Clean monotonic top→bottom pan: as the page scrolls, the board slowly drifts
-   so the motion is always obvious (no wandering loop that nets to zero). ~40% of
-   the 215%-tall image = a long, continuous travel. */
+/* Continuous timed drift (fallback) — gentle, alternates so it never jumps. */
+@keyframes bgDrift {
+  from {
+    transform: translate(-50%, -38%);
+  }
+  to {
+    transform: translate(-50%, -62%);
+  }
+}
+/* Scroll-coupled monotonic top→bottom pan (Chromium): ~44% travel of the
+   215%-tall image, tied directly to page scroll progress. */
 @keyframes bgPan {
   from {
     transform: translate(-50%, -28%);