swarm-ui: the start page's rain follows the app's motion setting

The rain read only the OS reduced-motion query, once, at mount. The settings
menu's motion override (data-motion on the document) wins over the OS in
either direction everywhere else, and the shell applies it from an effect
that runs after this one. Whether the rain may move is now rainAllowed(), and
the component re-evaluates it on mount, on every document attribute change
and on the media query's change, starting or stopping the interval and
clearing the canvas.

frontend/packages/swarm-ui/test/rain.test.mjs

@@ -9,12 +9,29 @@ import {
   columnsFor,
   fadeColorOf,
   glyphFor,
+  rainAllowed,
   startDrops,
   stepDrops,
 } from "../src/shell/rain.ts";
 
 const always = (n) => () => n;
 
+test("the app's reduce setting stops the rain whatever the OS says", () => {
+  assert.equal(rainAllowed("reduce", false), false);
+  assert.equal(rainAllowed("reduce", true), false);
+});
+
+test("the app's allow setting runs the rain even on a reduce-motion OS", () => {
+  assert.equal(rainAllowed("allow", true), true);
+  assert.equal(rainAllowed("allow", false), true);
+});
+
+test("with no app setting the rain follows the OS", () => {
+  assert.equal(rainAllowed(undefined, false), true);
+  assert.equal(rainAllowed(undefined, true), false);
+  assert.equal(rainAllowed("", true), false);
+});
+
 test("a canvas gets one column per cell, rounded up, and at least one", () => {
   assert.equal(columnsFor(CELL * 10), 10);
   assert.equal(columnsFor(CELL * 10 + 1), 11);