Remove the diagonal scroll animation and bump blur to 8px

Static now — drop the background-position keyframe animation and its
now-stale comment.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RvYdJ3os7tumimsLdLu2j9

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;
-  }
 }

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
+// set as a CSS background-image, rather than one element per icon.
-// `background-position` CSS animation — moving by exactly one tile per
-// loop wraps seamlessly since the background repeats.
 const pizza = (color: string) => `
   <path d="M12 3 3 20h18L12 3Z" fill="none" stroke="${color}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
   <path d="M4.5 17.5c2.5-1.5 4.5-1.5 7.5-.5s5 1 7.5-.5" fill="none" stroke="${color}" stroke-width="1.5" stroke-linecap="round" />