diff --git a/src/components/ordering/MenuBackdrop.module.scss b/src/components/ordering/MenuBackdrop.module.scss
index c7d19ac..8e72bde 100644
--- a/src/components/ordering/MenuBackdrop.module.scss
+++ b/src/components/ordering/MenuBackdrop.module.scss
@@ -1,26 +1,11 @@
-@keyframes menu-backdrop-scroll {
- from {
- background-position: 0 0;
- }
- to {
- // Exactly one tile (see TILE_SIZE in MenuBackdrop.tsx) — moving by
- // precisely that distance loops seamlessly since the background repeats.
- background-position: 240px 240px;
- }
-}
-
.backdrop {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
- filter: blur(4px) grayscale(1);
+ filter: blur(8px) grayscale(1);
opacity: 0.6;
background-repeat: repeat;
background-size: 240px 240px;
-
- @media (prefers-reduced-motion: no-preference) {
- animation: menu-backdrop-scroll 20s linear infinite;
- }
}
diff --git a/src/components/ordering/MenuBackdrop.tsx b/src/components/ordering/MenuBackdrop.tsx
index 0c7b287..dddacf8 100644
--- a/src/components/ordering/MenuBackdrop.tsx
+++ b/src/components/ordering/MenuBackdrop.tsx
@@ -1,9 +1,7 @@
import styles from './MenuBackdrop.module.scss'
// Rendered once as a tiny repeating SVG tile (not as individual DOM icons)
-// so the whole pattern can scroll diagonally forever via a plain
-// `background-position` CSS animation — moving by exactly one tile per
-// loop wraps seamlessly since the background repeats.
+// set as a CSS background-image, rather than one element per icon.
const pizza = (color: string) => `