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) => `