Reduced motion is honored everywhere the table moves

One shared motion policy: the OS's reduce-motion setting, read live
through Svelte's own media query, folds into the flourishes switch.
Under it the board plays no flourishes, the reel skips its die
interlude and slate wipes, bodies jump between squares instead of
gliding, the canvas holds its ambient shimmers still, and the camera
cuts wherever the director would have panned — in the cockpit as in
the reel, so the eye still lands on what the director chose to watch.
Timers and animation frames are cleared when the policy flips or the
pane closes. A first turn and two reels stepped clean under the
setting with no errors.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG

packages/web/src/App.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { motion } from "./motion";
   import { attentionLabel, net, spellName } from "./net.svelte";
   import { FISTS } from "./fpv/paintedFx";
   import Board from "./Board.svelte";
@@ -205,7 +206,7 @@
       }
     }
     if (view) fpBatch = { n: (fpBatch?.n ?? 0) + 1, events, view };
-    if (!prefs.flourishes) return;
+    if (!motion.effects) return;
     fxCancels.push(scheduleFx(
       events, view,
       (fx) => (boardFx = [...boardFx, fx]),
@@ -222,6 +223,12 @@
       fxCancels = [];
     };
   });
+  $effect(() => {
+    if (motion.effects) return;
+    fxCancels.forEach((cancel) => cancel());
+    fxCancels = [];
+    boardFx = [];
+  });
   const openingRolls = $derived(net.openingRolls ?? local.openingRolls);
   function dismissRolls() {
     net.dismissRolls();
@@ -1877,7 +1884,7 @@
         <label class="pref-row pref-check">
           <input type="checkbox" checked={prefs.flourishes}
             onchange={(e) => setPref("flourishes", e.currentTarget.checked)} />
-          <span>Spell flourishes (the animated effects)</span>
+          <span>Spell flourishes (the animated effects — off as well whenever your system asks for reduced motion)</span>
         </label>
         <label class="pref-row pref-check">
           <input type="checkbox" checked={prefs.liveFp}