diff --git a/ui/test/weather-artwork.test.mjs b/ui/test/weather-artwork.test.mjs
new file mode 100644
index 00000000..a3f1eda5
--- /dev/null
+++ b/ui/test/weather-artwork.test.mjs
@@ -0,0 +1,196 @@
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import { test } from 'node:test';
+
+const page = fs.readFileSync(new URL('../widgets/weather/index.html', import.meta.url), 'utf8');
+const art = /\/\* ---- artwork[\s\S]*?\nfunction buildIcon\([\s\S]*?\n\}/.exec(page)?.[0];
+const { buildIcon, cloudPath } = new Function(`${art}; return { buildIcon, cloudPath };`)();
+
+const CONDITIONS = ['clear', 'few', 'scattered', 'broken', 'mist', 'shower', 'rain', 'thunder', 'snow'];
+
+test('every condition draws by day and by night', () => {
+  assert.ok(art, 'the artwork block is not in the weather page');
+  for (const cond of CONDITIONS)
+    for (const day of [true, false]) {
+      const svg = buildIcon(cond, day);
+      assert.ok(svg.length > 100, `${cond} drew nothing`);
+      assert.doesNotMatch(svg, /NaN|undefined/, `${cond} ${day ? 'day' : 'night'} has a broken value`);
+    }
+});
+
+test('the cloud rests both puffs on a flat base', () => {
+  const d = cloudPath(2, 14, 96);
+  const [, sx, base, bx] = /^M([\d.]+) ([\d.]+)H([\d.]+)A/.exec(d).map(Number);
+  assert.ok(bx > sx, 'the base runs left to right');
+  assert.ok(Math.abs(base - (14 + 0.702 * 96)) < 0.01);
+  assert.match(d, /z$/);
+});
+
+const ORIGIN_RULE = /\.ico (\.wx-[\w-]+(?:,\.ico \.wx-[\w-]+)*)\{transform-box:fill-box;transform-origin:center\}/;
+
+test('no part with its own transform gets a centred transform origin', () => {
+  const classes = ORIGIN_RULE.exec(page)?.[1]
+    .split(',.ico .')
+    .map(c => c.replace(/^\./, ''));
+  assert.ok(classes?.length, 'the transform-origin rule is gone');
+  for (const cond of CONDITIONS)
+    for (const day of [true, false])
+      for (const [tag] of buildIcon(cond, day).matchAll(/<[a-z]+\b[^>]*>/g)) {
+        const cls = /class="([^"]+)"/.exec(tag)?.[1].split(' ') ?? [];
+        if (cls.some(c => classes.includes(c)))
+          assert.doesNotMatch(tag, /\stransform=/, `${cond}: ${tag} would move off its place`);
+      }
+});
+
+test('css motion stops for reduced motion and while the card is off screen', () => {
+  assert.match(page, /@media\(prefers-reduced-motion:reduce\)\{\.ico \*\{animation:none\}/);
+  assert.match(page, /\.ico\.off \*\{animation-play-state:paused\}/);
+  assert.match(
+    page,
+    /whileOnScreen\(icoEl,\s*v\s*=>\s*\{onScreen=v;icoEl\.classList\.toggle\('off',!v\);runAmbient\(\);\}\)/,
+  );
+});
+
+test('nothing blurred is moved by a frame-rate css animation', () => {
+  for (const cls of ['wx-front', 'wx-back', 'wx-mist', 'wx-orb', 'wx-cloud'])
+    assert.doesNotMatch(page, new RegExp(`\\.${cls}[^{]*\\{[^}]*animation`), `.${cls} has a css animation`);
+  for (const cond of CONDITIONS)
+    for (const day of [true, false])
+      for (const [part] of buildIcon(cond, day).matchAll(/<g class="wx-(?:drop|flake)[^>]*>[\s\S]*?<\/g>/g))
+        assert.doesNotMatch(part, /filter=/, `${cond}: falling parts carry a filter`);
+});
+
+const ambientSource = /const still=[\s\S]*?\nstill\.addEventListener\('change',runAmbient\);/.exec(page)?.[0];
+
+function ambientHarness(reduced) {
+  const styled = [];
+  const el = { style: {}, removeAttribute: n => styled.push(n) };
+  const icoEl = { querySelectorAll: () => [el] };
+  const timers = [];
+  const env = {
+    matchMedia: () => ({ matches: reduced, addEventListener() {} }),
+    setInterval: (fn, ms) => timers.push(ms),
+    clearInterval: () => {},
+    performance: { now: () => 1000 },
+  };
+  const run = new Function(
+    'icoEl',
+    'matchMedia',
+    'setInterval',
+    'clearInterval',
+    'performance',
+    `${ambientSource.replace(/\nwhileOnScreen[^\n]*/, '')}; return v => { onScreen = v; runAmbient(); };`,
+  )(icoEl, env.matchMedia, env.setInterval, env.clearInterval, env.performance);
+  return { run, timers, el, styled };
+}
+
+test('slow motion runs on a timer only while the card is on screen', () => {
+  assert.ok(ambientSource, 'the ambient motion block is gone');
+  const h = ambientHarness(false);
+  h.run(false);
+  assert.deepEqual(h.timers, []);
+  h.run(true);
+  assert.deepEqual(h.timers, [500]);
+  assert.match(h.el.style.transform, /^translateX\(-?[\d.]+px\)$/);
+});
+
+test('slow motion stays still for reduced motion', () => {
+  const h = ambientHarness(true);
+  h.run(true);
+  assert.deepEqual(h.timers, []);
+  assert.ok(h.styled.includes('style'), 'moved parts are put back');
+});
+
+test('every falling part starts inside its lane', () => {
+  for (const cond of ['shower', 'rain', 'snow', 'thunder'])
+    for (const day of [true, false]) {
+      const svg = buildIcon(cond, day);
+      const parts = [
+        ...svg.matchAll(
+          /<g class="wx-pos[^"]*" data-lo="([\d.]+)" data-hi="([\d.]+)" transform="translate\(([\d.]+) 0\)"(?: opacity="[\d.]+")?><g class="wx-(?:drop|flake|bolt)/g,
+        ),
+      ];
+      assert.ok(parts.length, `${cond} has no falling parts`);
+      assert.equal(
+        parts.length,
+        svg.match(/class="wx-(?:drop|flake|bolt)/g).length,
+        `${cond}: a falling part has no lane`,
+      );
+      for (const [, lo, hi, x] of parts) assert.ok(+lo <= +x && +x <= +hi, `${cond}: ${x} is outside ${lo} to ${hi}`);
+    }
+});
+
+test('a falling part restarts at a new spot inside its lane', () => {
+  const handler = /icoEl\.addEventListener\('animationiteration',(e=>\{[\s\S]*?\n\})\);/.exec(page)?.[1];
+  assert.ok(handler, 'the restart handler is gone');
+  const restart = new Function(`return ${handler}`)();
+  const seen = new Set();
+  let transform;
+  let strikes = 0;
+  const lane = (flip = false) => ({
+    classList: { contains: c => c === 'wx-pos' || (flip && c === 'wx-flip') },
+    dataset: { lo: '30', hi: '64' },
+    setAttribute: (_, v) => {
+      transform = v;
+    },
+    querySelector: () => ({
+      animate: () => {
+        strikes++;
+      },
+    }),
+  });
+  for (let i = 0; i < 40; i++) {
+    restart({ target: { parentNode: lane(i % 2 === 1) } });
+    const x = +/^translate\(([\d.]+) 0\)/.exec(transform)[1];
+    assert.ok(x >= 30 && x <= 64, `${x} left the lane`);
+    seen.add(x);
+    if (i % 2 === 0) assert.doesNotMatch(transform, /scale/);
+  }
+  assert.ok(seen.size > 1, 'the spot never changes');
+  assert.equal(strikes, 20, 'each new strike draws the bolt');
+  transform = undefined;
+  restart({ target: { parentNode: { classList: { contains: () => false } } } });
+  assert.equal(transform, undefined);
+});
+
+test('the lightning flash is hidden at rest', () => {
+  for (const day of [true, false])
+    assert.match(buildIcon('thunder', day), /<path class="wx-flash[^"]*"[^>]*opacity="0"/);
+});
+
+test('the lightning flash drifts with the cloud it lights', () => {
+  for (const day of [true, false]) assert.match(buildIcon('thunder', day), /<path class="wx-flash wx-front"/);
+});
+
+test('a faint far layer keeps its opacity off the animated element', () => {
+  for (const cond of ['shower', 'rain', 'snow'])
+    for (const day of [true, false]) {
+      const svg = buildIcon(cond, day);
+      assert.match(svg, /<g class="wx-pos"[^>]*opacity="0\.5+"/, `${cond} has no faint far layer`);
+      assert.doesNotMatch(
+        svg,
+        /<g class="wx-(?:drop|flake)"[^>]*opacity=/,
+        `${cond}: the animation overrides the faint layer`,
+      );
+    }
+});
+
+test('falling parts start in separate lanes, so a still picture shows each one', () => {
+  for (const cond of ['shower', 'rain', 'snow'])
+    for (const day of [true, false]) {
+      const near = [...buildIcon(cond, day).matchAll(/<g class="wx-pos" [^>]*translate\(([\d.]+) 0\)"><g/g)].map(
+        m => +m[1],
+      );
+      const gaps = near
+        .sort((a, b) => a - b)
+        .slice(1)
+        .map((x, i) => x - near[i]);
+      assert.ok(Math.min(...gaps) >= 8, `${cond}: two parts start ${Math.min(...gaps)} apart`);
+    }
+});
+
+test('reduced motion shows rain and snow below the cloud, not behind it', () => {
+  const still = /@media\(prefers-reduced-motion:reduce\)\{([^@]*?)\}\s*\n/.exec(page)?.[1];
+  assert.match(still, /\.ico \.wx-drop\{transform:translate\(-?[\d.]+px,[\d.]+px\)\}/);
+  assert.match(still, /\.ico \.wx-flake\{transform:translate\(-?[\d.]+px,[\d.]+px\)\}/);
+});
diff --git a/ui/test/widget-colours.test.mjs b/ui/test/widget-colours.test.mjs
index 6f7a0f61..c99caa91 100644
--- a/ui/test/widget-colours.test.mjs
+++ b/ui/test/widget-colours.test.mjs
@@ -57,18 +57,6 @@ const BESPOKE = new Map(
     '#E5E5EA': 'Analog clock dial in the dark theme',
     '#007CA6': 'Jellyfin brand',
     '#4CAF50': 'Emby brand',
-    /* An embedded illustration set, one path list per condition. Artwork, not
-       interface colour. */
-    '#DAD6CB': 'weather illustration',
-    '#E9E5D9': 'weather illustration',
-    '#3E4962': 'weather illustration',
-    '#5C6C91': 'weather illustration',
-    '#7388B6': 'weather illustration',
-    '#A2BFFF': 'weather illustration',
-    '#1F9FB0': 'weather illustration',
-    '#BEBEBE': 'weather illustration',
-    '#A2A2A2': 'weather, cloud by day',
-    '#BCBCBC': 'weather, cloud by night',
     '#F0852A': 'weather, temperature reading',
     /* Drawn from the title when a book has no colour of its own. */
     '#E7E0D2': 'books, spine',
diff --git a/ui/widgets/weather/index.html b/ui/widgets/weather/index.html
index 7fa61f0a..1ccc01bf 100644
--- a/ui/widgets/weather/index.html
+++ b/ui/widgets/weather/index.html
@@ -17,15 +17,19 @@
   .cond{font-size:15px;font-weight:600;color:#2C2C2E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
   .temp{font-size:42px;font-weight:700;line-height:1;letter-spacing:-0.01em;color:#f0852a}
   .msg{margin-top:3px}
-  @keyframes wxdrop{0%{transform:translateY(-6px);opacity:0}25%{opacity:1}75%{opacity:1}100%{transform:translateY(14px);opacity:0}}
-  .wx-drop{animation:wxdrop 0.9s linear infinite;animation-delay:calc(var(--i)*-0.28s);transform-origin:center}
-  @keyframes wxflake{0%{transform:translate(-1.5px,-6px) rotate(0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translate(1.5px,14px) rotate(40deg);opacity:0}}
-  .wx-flake{animation:wxflake 2.7s linear infinite;animation-delay:calc(var(--i)*-0.9s);transform-origin:center}
-  @keyframes wxbolt{0%,66%,100%{opacity:0.9}70%{opacity:1}73%{opacity:0.4}76%{opacity:1}80%{opacity:0.85}}
-  .wx-bolt{animation:wxbolt 2.5s ease-in-out infinite}
-  @keyframes wxmist{0%,100%{transform:translateX(-3px)}50%{transform:translateX(4px)}}
-  .wx-mist{animation:wxmist 5s ease-in-out infinite;animation-delay:calc(var(--i)*0.5s)}
-  @media(prefers-reduced-motion:reduce){.wx-drop,.wx-flake,.wx-bolt,.wx-mist{animation:none;opacity:1}}
+  /* Only on elements without a transform attribute. A transform-origin on one moves it. */
+  .ico .wx-drop,.ico .wx-flake{transform-box:fill-box;transform-origin:center}
+  @keyframes wxdrop{0%{transform:translate(0,0);opacity:0}22%{opacity:1}80%{opacity:1}100%{transform:translate(-7.5px,15.2px);opacity:0}}
+  @keyframes wxflake{0%{transform:translate(0,-2px) rotate(0);opacity:0}18%{opacity:1}50%{transform:translate(2px,6px) rotate(45deg)}85%{opacity:1}100%{transform:translate(-1px,15px) rotate(90deg);opacity:0}}
+  @keyframes wxflash{0%,100%{opacity:0}1.5%{opacity:.5}4%{opacity:.08}6.5%{opacity:.35}12%{opacity:0}}
+  @keyframes wxbolt{0%{opacity:1}5%{opacity:.7}7%{opacity:1}20%,100%{opacity:.6}}
+  .wx-drop{animation:wxdrop 1.1s cubic-bezier(.45,0,.9,.6) infinite}
+  .wx-flake{animation:wxflake 4.2s linear infinite}
+  .wx-flash{animation:wxflash 6.5s linear infinite}
+  .wx-bolt{animation:wxbolt 6.5s linear infinite}
+  .wx-draw{stroke-dasharray:1}
+  .ico.off *{animation-play-state:paused}
+  @media(prefers-reduced-motion:reduce){.ico *{animation:none}.ico .wx-drop{transform:translate(-3.75px,7.6px)}.ico .wx-flake{transform:translate(1px,6px)}}
   .ico .ph{fill:rgba(235,235,245,0.16)}
   html[data-theme="light"] .ico .ph{fill:rgba(60,60,67,0.12)}
   .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@@ -42,10 +46,9 @@
   <div class="sr-only" id="sr"></div>
 </div>
 <script type="module">
-import { poll, fetchData, linkTo, loadStrings, wt, formatNumber, errorState, setCardAppearance, placeholder, sinceLabel, readingTime } from '/js/widget-toolbox.js?v=49800e75';
+import { poll, fetchData, linkTo, loadStrings, wt, formatNumber, errorState, setCardAppearance, placeholder, sinceLabel, readingTime, whileOnScreen } from '/js/widget-toolbox.js?v=49800e75';
 await loadStrings();
 document.getElementById('widget').setAttribute('aria-label', wt('widget.label', 'Weather'));
-const EL={"sun":{"x0":107.8,"y0":87.0,"w":242.3,"h":244.1,"paths":[["#FF9230","1.00"," M 215.58 89.81 C 241.94 86.96 269.20 93.16 291.65 107.32 C 314.91 121.80 332.92 144.53 341.61 170.54 C 350.16 195.80 349.91 223.95 340.89 249.05 C 330.79 277.55 309.38 301.77 282.41 315.39 C 259.42 327.17 232.56 331.03 207.16 326.46 C 180.70 321.85 156.06 307.83 138.40 287.62 C 120.06 266.91 109.34 239.64 108.73 211.98 C 107.83 183.48 117.63 154.83 135.82 132.88 C 155.41 108.82 184.69 92.94 215.58 89.81 Z"]]},"cloud":{"x0":96.3,"y0":374.6,"w":265.1,"h":189.6,"paths":[["#a2a2a2","0.70"," M 236.06 381.18 C 241.38 379.00 247.22 377.88 252.92 377.28 C 259.15 379.09 265.68 377.66 272.05 378.17 C 291.70 379.30 310.88 387.36 325.52 400.51 C 340.61 413.94 351.20 432.47 354.85 452.35 C 361.40 485.57 346.91 521.63 319.92 541.83 C 304.27 553.77 284.64 559.98 265.05 560.42 C 230.34 560.46 195.64 560.39 160.93 560.46 C 143.59 560.79 125.94 553.79 114.32 540.75 C 104.18 529.79 98.52 514.90 98.49 500.00 C 98.82 490.51 101.13 481.02 105.75 472.69 C 108.21 467.97 111.80 464.01 114.84 459.67 L 113.35 459.54 C 114.43 458.28 115.47 456.90 116.97 456.12 C 121.15 454.45 124.17 450.93 128.14 448.87 C 132.47 445.99 137.70 444.95 142.05 442.11 C 142.89 441.64 143.82 441.26 144.80 441.34 C 148.57 441.84 152.24 440.55 156.01 440.57 C 163.04 440.56 170.09 440.74 177.12 440.44 C 180.12 433.26 183.16 426.03 187.54 419.55 C 189.16 417.07 191.34 414.84 192.01 411.85 L 192.16 411.37 C 195.29 407.82 198.20 403.90 202.07 401.14 C 203.38 400.46 204.78 399.90 205.91 398.93 C 211.60 393.97 218.06 389.97 224.79 386.59 C 228.50 384.67 232.67 383.69 236.06 381.18 Z"],["#bebebe","0.75"," M 252.92 377.28 C 272.68 374.55 293.29 378.52 310.68 388.29 C 328.60 398.24 343.06 414.28 351.12 433.13 C 359.51 452.55 361.01 474.86 355.26 495.23 C 350.52 512.25 340.79 527.84 327.61 539.61 C 313.15 552.67 294.48 560.98 275.09 562.97 C 267.42 563.79 259.71 563.38 252.01 563.47 C 221.66 563.48 191.31 563.47 160.96 563.42 C 144.43 564.19 127.77 557.63 115.88 546.16 C 104.44 535.23 97.46 519.77 96.96 503.93 C 96.26 487.75 102.22 471.34 113.35 459.54 L 114.84 459.67 C 111.80 464.01 108.21 467.97 105.75 472.69 C 101.13 481.02 98.82 490.51 98.49 500.00 C 98.52 514.90 104.18 529.79 114.32 540.75 C 125.94 553.79 143.59 560.79 160.93 560.46 C 195.64 560.39 230.34 560.46 265.05 560.42 C 284.64 559.98 304.27 553.77 319.92 541.83 C 346.91 521.63 361.40 485.57 354.85 452.35 C 351.20 432.47 340.61 413.94 325.52 400.51 C 310.88 387.36 291.70 379.30 272.05 378.17 C 265.68 377.66 259.15 379.09 252.92 377.28 Z"],["#e9e5d9","1.00"," M 202.07 401.14 C 211.72 392.08 223.47 385.24 236.06 381.18 C 232.67 383.69 228.50 384.67 224.79 386.59 C 218.06 389.97 211.60 393.97 205.91 398.93 C 204.78 399.90 203.38 400.46 202.07 401.14 Z"],["#e9e5d9","1.00"," M 176.69 439.75 C 180.22 429.69 185.32 420.16 192.01 411.85 C 191.34 414.84 189.16 417.07 187.54 419.55 C 183.16 426.03 180.12 433.26 177.12 440.44 C 170.09 440.74 163.04 440.56 156.01 440.57 C 152.24 440.55 148.57 441.84 144.80 441.34 C 155.22 438.61 166.05 440.14 176.69 439.75 Z"],["#e9e5d9","1.00"," M 116.97 456.12 C 124.01 449.50 132.73 444.65 142.05 442.11 C 137.70 444.95 132.47 445.99 128.14 448.87 C 124.17 450.93 121.15 454.45 116.97 456.12 Z"]]},"rain":{"x0":143.0,"y0":604.3,"w":152.8,"h":98.7,"paths":[["#1f9fb0","1.00"," M 181.48 605.61 C 186.67 604.33 192.82 608.46 192.96 613.97 C 193.13 616.16 192.05 618.15 190.98 619.98 C 180.67 637.69 170.54 655.51 160.18 673.20 C 157.38 677.93 150.45 677.92 146.74 674.28 C 143.77 671.85 142.98 667.25 144.94 663.95 C 155.28 645.95 165.70 628.00 176.06 610.01 C 177.21 607.90 179.10 606.16 181.48 605.61 Z"],["#1f9fb0","1.00"," M 281.39 620.63 C 288.13 618.69 295.81 626.48 292.03 633.06 C 281.47 651.47 270.87 669.86 260.18 688.20 C 257.54 692.64 251.07 693.00 247.34 689.75 C 243.94 687.46 242.83 682.51 244.92 678.99 C 255.26 660.97 265.69 643.01 276.05 625.02 C 277.18 622.93 279.05 621.19 281.39 620.63 Z"],["#1f9fb0","1.00"," M 221.45 630.61 C 226.64 629.30 232.81 633.44 232.97 638.95 C 233.14 641.14 232.05 643.14 230.98 644.98 C 220.68 662.68 210.55 680.49 200.21 698.16 C 197.58 702.64 191.06 703.01 187.32 699.74 C 183.93 697.44 182.84 692.48 184.94 688.97 C 195.27 670.96 205.70 653.00 216.06 635.01 C 217.19 632.91 219.09 631.17 221.45 630.61 Z"]]},"bolt":{"x0":199.0,"y0":774.6,"w":44.7,"h":53.5,"paths":[["#1C1C1E","0.15"," M 205.82 779.46 C 206.55 777.68 207.48 775.06 209.91 775.54 C 216.27 775.88 222.88 774.57 229.00 776.80 C 233.87 777.14 238.76 776.71 243.64 776.98 C 243.11 777.83 242.57 778.69 242.03 779.55 L 241.55 779.54 C 229.64 779.43 217.73 779.58 205.82 779.46 Z"],["#3e4962","0.38"," M 205.82 779.46 C 217.73 779.58 229.64 779.43 241.55 779.54 C 240.38 780.95 239.21 782.38 238.04 783.80 L 237.77 783.78 C 226.49 783.25 215.19 783.63 203.91 783.57 C 204.56 782.19 205.21 780.83 205.82 779.46 Z"],["#5c6c91","0.57"," M 203.91 783.57 C 215.19 783.63 226.49 783.25 237.77 783.78 C 236.45 785.40 235.11 787.00 233.79 788.62 L 233.54 788.62 C 222.92 788.40 212.30 788.70 201.69 788.43 C 202.43 786.80 203.17 785.18 203.91 783.57 Z"],["#7388b6","0.71"," M 201.69 788.43 C 212.30 788.70 222.92 788.40 233.54 788.62 C 232.08 790.30 230.82 792.23 229.11 793.65 C 224.21 793.50 219.32 793.45 214.42 793.52 C 214.55 793.14 214.81 792.37 214.94 791.99 C 209.98 791.99 205.02 791.99 200.05 792.00 C 200.59 790.79 201.14 789.61 201.69 788.43 Z"],["#a2bfff","1.00"," M 214.42 793.52 C 219.32 793.45 224.21 793.50 229.11 793.65 C 219.22 805.25 208.98 816.54 198.98 828.05 C 204.15 816.55 209.17 804.98 214.42 793.52 Z"]]},"snow":{"x0":107.0,"y0":869.0,"w":172.3,"h":65.5,"paths":[["#1f9fb0","1.00"," M 125.23 869.02 C 128.33 869.35 131.43 869.69 134.54 870.06 C 134.13 874.53 133.71 879.00 133.30 883.48 C 137.62 882.88 141.93 882.28 146.24 881.70 C 146.83 884.85 147.42 888.00 148.00 891.16 C 143.50 891.88 138.99 892.55 134.49 893.29 C 136.30 897.24 138.11 901.18 139.89 905.15 C 136.99 906.42 134.10 907.71 131.20 908.99 C 129.39 905.03 127.59 901.07 125.77 897.12 C 122.39 900.17 119.02 903.24 115.61 906.27 C 113.49 904.12 111.36 901.98 109.23 899.85 C 112.60 896.78 116.00 893.75 119.36 890.68 C 115.25 888.78 111.12 886.92 107.00 885.02 C 108.58 882.12 110.16 879.23 111.75 876.34 C 115.73 878.17 119.70 880.02 123.67 881.87 C 124.20 877.58 124.72 873.30 125.23 869.02 Z"],["#1f9fb0","1.00"," M 251.42 876.07 C 255.21 876.48 259.00 876.92 262.80 877.36 C 262.29 882.88 261.79 888.40 261.28 893.93 C 266.56 893.20 271.83 892.46 277.11 891.73 C 277.83 895.62 278.54 899.52 279.27 903.42 C 273.75 904.30 268.24 905.15 262.73 906.02 C 264.94 910.90 267.15 915.79 269.35 920.68 C 265.80 922.26 262.25 923.84 258.71 925.44 C 256.49 920.56 254.30 915.66 252.07 910.79 C 247.93 914.55 243.80 918.32 239.67 922.08 C 237.06 919.41 234.37 916.82 231.88 914.05 C 236.05 910.35 240.12 906.55 244.26 902.82 C 239.20 900.50 234.16 898.17 229.11 895.84 C 231.05 892.26 232.98 888.68 234.92 885.11 C 239.79 887.37 244.64 889.67 249.51 891.93 C 250.14 886.64 250.78 881.35 251.42 876.07 Z"],["#1f9fb0","1.00"," M 182.96 876.96 C 187.39 877.45 191.82 877.95 196.25 878.46 C 195.63 884.90 195.06 891.34 194.47 897.79 C 200.63 896.94 206.78 896.08 212.94 895.23 C 213.78 899.77 214.60 904.32 215.43 908.87 C 209.01 909.88 202.58 910.89 196.16 911.90 C 198.73 917.60 201.31 923.30 203.89 929.00 C 199.74 930.85 195.60 932.71 191.45 934.54 C 188.89 928.84 186.30 923.15 183.73 917.46 C 178.89 921.83 174.09 926.26 169.25 930.64 C 166.20 927.55 163.16 924.46 160.11 921.38 C 164.93 916.97 169.76 912.58 174.58 908.18 C 168.71 905.44 162.82 902.75 156.94 900.02 C 159.19 895.85 161.45 891.68 163.71 887.51 C 169.39 890.16 175.05 892.82 180.73 895.47 C 181.47 889.30 182.21 883.12 182.96 876.96 Z"]]},"moon":{"x0":76.3,"y0":1030.0,"w":246.2,"h":245.1,"paths":[["#e9e5d9","1.00"," M 102.20 1081.21 C 123.40 1051.15 159.13 1031.96 195.94 1031.21 C 229.85 1029.97 263.85 1044.27 286.83 1069.20 C 310.77 1094.57 322.47 1130.81 317.92 1165.40 C 316.28 1158.87 313.38 1152.33 307.79 1148.26 C 299.66 1141.60 287.33 1140.84 278.40 1146.36 C 268.32 1152.27 263.41 1165.65 267.43 1176.66 C 270.51 1185.91 279.25 1193.00 288.97 1193.97 C 295.80 1194.79 303.03 1192.77 308.20 1188.18 C 310.43 1186.19 312.57 1184.11 314.64 1181.97 C 305.50 1216.66 279.57 1246.32 246.57 1260.33 C 212.89 1275.04 172.38 1272.85 140.52 1254.48 C 109.63 1237.17 87.31 1205.45 81.65 1170.48 C 76.31 1139.56 83.83 1106.67 102.20 1081.21 M 184.35 1052.38 C 181.40 1053.48 178.93 1055.83 177.64 1058.70 C 175.01 1065.23 179.71 1073.72 186.97 1074.07 C 194.08 1075.19 200.53 1067.90 199.21 1060.98 C 198.50 1054.20 190.53 1049.96 184.35 1052.38 M 263.28 1080.45 C 255.84 1083.05 253.14 1093.67 258.72 1099.33 C 263.46 1105.20 274.17 1104.20 277.50 1097.35 C 279.86 1093.56 279.59 1088.55 277.04 1084.93 C 274.38 1080.25 268.13 1078.93 263.28 1080.45 M 141.35 1105.41 C 138.07 1106.33 135.77 1109.57 135.77 1112.96 C 135.32 1116.79 138.61 1120.02 142.10 1120.91 C 147.00 1121.91 152.06 1117.37 151.55 1112.40 C 151.26 1107.59 145.94 1103.92 141.35 1105.41 M 216.29 1105.40 C 209.77 1106.88 204.78 1113.29 205.07 1120.00 C 205.08 1127.41 211.55 1134.04 218.98 1134.11 C 227.51 1134.76 235.18 1126.43 234.08 1118.00 C 233.40 1109.60 224.44 1103.36 216.29 1105.40 M 162.33 1146.40 C 158.82 1147.11 156.74 1151.86 159.31 1154.65 C 161.50 1158.00 167.45 1157.15 168.19 1153.10 C 169.51 1149.51 166.15 1145.39 162.33 1146.40 M 222.38 1174.35 C 219.59 1175.99 217.45 1179.39 218.32 1182.69 C 219.26 1185.73 222.05 1188.22 225.27 1188.51 C 229.36 1188.66 233.44 1185.25 233.13 1180.97 C 233.57 1175.51 226.94 1172.16 222.38 1174.35 M 150.33 1183.33 C 142.60 1184.82 136.53 1192.05 136.73 1199.98 C 136.16 1208.29 142.89 1215.87 150.89 1217.32 C 161.02 1219.57 172.02 1210.53 171.20 1200.03 C 171.60 1189.43 160.51 1180.80 150.33 1183.33 M 236.39 1220.42 C 230.75 1222.69 227.07 1229.00 227.77 1235.05 C 228.08 1244.16 239.29 1250.58 247.35 1246.37 C 252.40 1244.41 255.45 1239.19 255.80 1233.95 C 255.97 1229.32 253.39 1224.96 249.78 1222.22 C 246.10 1219.16 240.77 1219.11 236.39 1220.42 Z"],["#dad6cb","1.00"," M 184.35 1052.38 C 190.53 1049.96 198.50 1054.20 199.21 1060.98 C 200.53 1067.90 194.08 1075.19 186.97 1074.07 C 179.71 1073.72 175.01 1065.23 177.64 1058.70 C 178.93 1055.83 181.40 1053.48 184.35 1052.38 Z"],["#dad6cb","1.00"," M 263.28 1080.45 C 268.13 1078.93 274.38 1080.25 277.04 1084.93 C 279.59 1088.55 279.86 1093.56 277.50 1097.35 C 274.17 1104.20 263.46 1105.20 258.72 1099.33 C 253.14 1093.67 255.84 1083.05 263.28 1080.45 Z"],["#dad6cb","1.00"," M 141.35 1105.41 C 145.94 1103.92 151.26 1107.59 151.55 1112.40 C 152.06 1117.37 147.00 1121.91 142.10 1120.91 C 138.61 1120.02 135.32 1116.79 135.77 1112.96 C 135.77 1109.57 138.07 1106.33 141.35 1105.41 Z"],["#dad6cb","1.00"," M 216.29 1105.40 C 224.44 1103.36 233.40 1109.60 234.08 1118.00 C 235.18 1126.43 227.51 1134.76 218.98 1134.11 C 211.55 1134.04 205.08 1127.41 205.07 1120.00 C 204.78 1113.29 209.77 1106.88 216.29 1105.40 Z"],["#dad6cb","1.00"," M 278.40 1146.36 C 287.33 1140.84 299.66 1141.60 307.79 1148.26 C 313.38 1152.33 316.28 1158.87 317.92 1165.40 C 318.01 1171.08 316.53 1176.65 314.64 1181.97 C 312.57 1184.11 310.43 1186.19 308.20 1188.18 C 303.03 1192.77 295.80 1194.79 288.97 1193.97 C 279.25 1193.00 270.51 1185.91 267.43 1176.66 C 263.41 1165.65 268.32 1152.27 278.40 1146.36 Z"],["#dad6cb","1.00"," M 162.33 1146.40 C 166.15 1145.39 169.51 1149.51 168.19 1153.10 C 167.45 1157.15 161.50 1158.00 159.31 1154.65 C 156.74 1151.86 158.82 1147.11 162.33 1146.40 Z"],["#dad6cb","1.00"," M 222.38 1174.35 C 226.94 1172.16 233.57 1175.51 233.13 1180.97 C 233.44 1185.25 229.36 1188.66 225.27 1188.51 C 222.05 1188.22 219.26 1185.73 218.32 1182.69 C 217.45 1179.39 219.59 1175.99 222.38 1174.35 Z"],["#dad6cb","1.00"," M 150.33 1183.33 C 160.51 1180.80 171.60 1189.43 171.20 1200.03 C 172.02 1210.53 161.02 1219.57 150.89 1217.32 C 142.89 1215.87 136.16 1208.29 136.73 1199.98 C 136.53 1192.05 142.60 1184.82 150.33 1183.33 Z"],["#dad6cb","1.00"," M 236.39 1220.42 C 240.77 1219.11 246.10 1219.16 249.78 1222.22 C 253.39 1224.96 255.97 1229.32 255.80 1233.95 C 255.45 1239.19 252.40 1244.41 247.35 1246.37 C 239.29 1250.58 228.08 1244.16 227.77 1235.05 C 227.07 1229.00 230.75 1222.69 236.39 1220.42 Z"]]}};
 const API='/api';
 const params=new URLSearchParams(location.search);
 const id=params.get('id')||'';
@@ -58,53 +61,82 @@
 const msgEl=document.getElementById('msg');
 const srEl=document.getElementById('sr');
 
-/* ---- icon assembly from embedded artwork ---- */
-function sym(name){
-  const e=EL[name];
-  const inner=e.paths.map(([f,o,d])=>`<path fill="${f}" opacity="${o}" d="${d}"/>`).join('');
-  return {g:`<g transform="translate(${-e.x0},${-e.y0})">${inner}</g>`,w:e.w,h:e.h};
-}
-function place(name,W,px,py){
-  const s=sym(name);const sc=W/s.w;
-  return `<g transform="translate(${px},${py}) scale(${sc})">${s.g}</g>`;
-}
-function placeIndividual(name,W,px,py,cls){
-  const e=EL[name];const sc=W/e.w;
-  const parts=e.paths.map(([f,o,d],i)=>`<g class="${cls}" style="--i:${i}"><path fill="${f}" opacity="${o}" transform="translate(${-e.x0},${-e.y0})" d="${d}"/></g>`).join('');
-  return `<g transform="translate(${px},${py}) scale(${sc})">${parts}</g>`;
-}
-/* Cloud with an overridden fill and opacity, for the lighter back cloud. */
-function placeCloud(W,px,py,fill,op){
-  const e=EL.cloud;const sc=W/e.w;
-  const inner=e.paths.map(([f,o,d])=>{
-    /* only recolor the two main translucent body layers; keep highlight bits */
-    const isBody = (f==='#a2a2a2'||f==='#bebebe');
-    return `<path fill="${isBody?fill:f}" opacity="${isBody?op:o}" d="${d}"/>`;
+/* ---- artwork, drawn in the icon's 100-unit box ---- */
+const f=n=>+n.toFixed(3);
+function cloudPath(x,y,W){
+  const rs=.226*W,rb=.351*W,base=y+.702*W;
+  const sx=x+rs,sy=base-rs,bx=x+W-rb,by=base-rb;
+  const dx=bx-sx,dy=by-sy,d=Math.hypot(dx,dy);
+  const a=(rs*rs-rb*rb+d*d)/(2*d),h=Math.sqrt(rs*rs-a*a);
+  const px=f(sx+a*dx/d+h*dy/d),py=f(sy+a*dy/d-h*dx/d);
+  return `M${f(sx)} ${f(base)}H${f(bx)}A${f(rb)} ${f(rb)} 0 1 0 ${px} ${py}A${f(rs)} ${f(rs)} 0 0 0 ${f(x)} ${f(sy)}A${f(rs)} ${f(rs)} 0 0 0 ${f(sx)} ${f(base)}z`;
+}
+const MARIA=[[-.32,-.28,.26],[-.08,-.44,.16],[-.46,.06,.18],[.3,-.02,.2],[.4,.22,.13],[-.04,.42,.14]];
+const PITS=[[.5,-.36,.06],[.12,.08,.05],[.2,.56,.06]];
+function orb(day,cx,cy,r){
+  const body=day
+    ?`<circle cx="${cx}" cy="${cy}" r="${r}" fill="#FF9230"/><circle cx="${cx}" cy="${cy}" r="${f(r*.95)}" fill="none" stroke="#FFD600" stroke-opacity=".55" stroke-width="${f(r*.1)}"/>`
+    :`<circle cx="${cx}" cy="${cy}" r="${r}" fill="#FFFFFF" fill-opacity=".92"/>`
+      +`<g fill="#8E8E93" opacity=".22" filter="url(#wx-soft)">${MARIA.map(([x,y,k])=>`<circle cx="${f(cx+x*r)}" cy="${f(cy+y*r)}" r="${f(k*r)}"/>`).join('')}</g>`
+      +PITS.map(([x,y,k])=>`<circle cx="${f(cx+x*r)}" cy="${f(cy+y*r)}" r="${f(k*r)}" fill="#8E8E93" fill-opacity=".35"/>`).join('');
+  return `<g class="wx-orb">${body}</g>`;
+}
+let clipN=0;
+function cloud(day,x,y,W,back,glow=''){
+  const d=cloudPath(x,y,W),id=`wx-c${clipN++}`;
+  const layers=glow
+    ?(day?[['#FFFFFF',.5],['#8E8E93',.15]]:[['#8E8E93',.35]])
+    :back?(day?[['#FFFFFF',.6],['#8E8E93',.16]]:[['#FFFFFF',.85]])
+    :(day?[['#8E8E93',.4]]:[['#FFFFFF',.6]]);
+  const body=[...layers,['#0091FF',.06]].map(([c,o])=>`<path d="${d}" fill="${c}" fill-opacity="${o}"/>`).join('');
+  return `<g class="wx-cloud ${back?'wx-back':'wx-front'}"><clipPath id="${id}"><path d="${d}"/></clipPath><g clip-path="url(#${id})">${glow}${body}</g><path class="wx-rim" d="${d}" fill="none" stroke="#FFFFFF" stroke-opacity="${day?.45:.22}" stroke-width="1.8"/></g>`;
+}
+const over=(day,orbAt,x,y,W)=>orb(day,...orbAt)+cloud(day,x,y,W,false,`<g filter="url(#wx-blur)">${orb(day,...orbAt)}</g>`);
+const PC=[8,-3,84],BASE=f(PC[1]+.702*PC[2]),SKY=[78,27,31],LANE=[30,64];
+const rnd=(lo,hi)=>f(lo+Math.random()*(hi-lo));
+function falling(n,shape,cls,[lo,hi],op=1){
+  const step=(LANE[1]-LANE[0])/n;
+  return Array.from({length:n},(_,i)=>{
+    const d=rnd(lo,hi);
+    return `<g class="wx-pos" data-lo="${LANE[0]}" data-hi="${LANE[1]}" transform="translate(${f(LANE[0]+(i+.5)*step)} 0)"${op<1?` opacity="${op}"`:''}><g class="${cls}" style="animation-duration:${d}s;animation-delay:-${rnd(0,d)}s">${shape}</g></g>`;
   }).join('');
-  return `<g transform="translate(${px},${py}) scale(${sc})"><g transform="translate(${-e.x0},${-e.y0})">${inner}</g></g>`;
 }
-function mistSVG(day){
-  const c=day?'#a2a2a2':'#bcbcbc';
-  const rows=[[10,28,86],[8,42,80],[14,56,90],[10,70,84]];
-  return rows.map((r,i)=>`<line class="wx-mist" style="--i:${i}" x1="${r[0]}" y1="${r[1]}" x2="${r[2]}" y2="${r[1]}" stroke="${c}" stroke-width="6" stroke-linecap="round" opacity="0.7"/>`).join('');
+const drop=(k,w)=>`<path d="M0 ${f(BASE-2)}l${f(-4.2*k)} ${f(8.5*k)}" stroke="#00D2E0" stroke-width="${w}" stroke-linecap="round"/>`;
+const rain=()=>falling(2,drop(.7,2.2),'wx-drop',[1.6,2],.5)+falling(4,drop(1,3.6),'wx-drop',[.95,1.25]);
+function flake(cx,cy,r,w,c){
+  return [0,60,120].map(a=>`<path d="M${cx} ${f(cy-r)}v${f(2*r)}" transform="rotate(${a} ${cx} ${cy})" stroke="${c}" stroke-width="${w}" stroke-linecap="round"/>`).join('');
+}
+function snow(day){
+  const c=day?'#00D2E0':'#FFFFFF',y=f(BASE+3);
+  return falling(2,flake(0,y,2.8,1.8,c),'wx-flake',[5.5,7.5],.55)+falling(3,flake(0,y,4.6,2.6,c),'wx-flake',[3.6,4.8]);
+}
+function storm(day){
+  const z=`M4 ${f(BASE-6)}L-6 ${f(BASE+10)}L4 ${f(BASE+11)}L-8 ${f(BASE+30)}`;
+  const bolt=`<g class="wx-pos wx-flip" data-lo="40" data-hi="58" transform="translate(50 0)"><g class="wx-bolt"><path class="wx-draw" pathLength="1" d="${z}" fill="none" stroke="#FFD600" stroke-width="3.8" stroke-linecap="round" stroke-linejoin="round"/></g></g>`;
+  return bolt+cloud(day,...PC)+`<path class="wx-flash wx-front" d="${cloudPath(...PC)}" fill="#FFFFFF" opacity="0"/>`;
 }
-const CLIP='<defs><clipPath id="below"><rect x="0" y="46" width="100" height="54"/></clipPath></defs>';
+function mist(day){
+  const c=day?'#8E8E93':'#FFFFFF';
+  const fog=`<linearGradient id="wx-fog"><stop offset="0" stop-color="${c}" stop-opacity="0"/><stop offset=".3" stop-color="${c}"/><stop offset=".7" stop-color="${c}"/><stop offset="1" stop-color="${c}" stop-opacity="0"/></linearGradient>`;
+  const bands=[[10,14,80,.5],[0,28,96,.75],[14,42,84,.9],[2,56,90,.65],[18,68,66,.4]];
+  return `<defs>${fog}<filter id="wx-haze" x="-10%" y="-80%" width="120%" height="260%"><feGaussianBlur stdDeviation="1.6"/></filter></defs>`
+    +`<g filter="url(#wx-haze)" opacity="${day?.6:.7}">${bands.map(([x,y,w,o])=>`<rect class="wx-mist" x="${x}" y="${y}" width="${w}" height="9" rx="4.5" fill="url(#wx-fog)" fill-opacity="${o}"/>`).join('')}</g>`;
+}
+const BLUR='<defs><filter id="wx-blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="5"/></filter><filter id="wx-soft"><feGaussianBlur stdDeviation="1"/></filter></defs>';
 
 function buildIcon(cond,day){
-  const orb=day?'sun':'moon';
-  const CW=96,SUNW=74;
   switch(cond){
-    case 'clear':     return place(orb,84,8,8);
-    case 'few':       return place(orb,SUNW,40,-2)+place('cloud',CW,2,18);
-    case 'scattered': return place('cloud',96,2,14);
-    case 'broken':    return placeCloud(78,36,6,'#FFFFFF',0.96)+place('cloud',88,0,20);
-    case 'shower':    return CLIP+`<g clip-path="url(#below)">${placeIndividual('rain',54,20,46,'wx-drop')}</g>`+place('cloud',CW,2,0);
-    case 'rain':      return CLIP+place(orb,SUNW,42,-2)+`<g clip-path="url(#below)">${placeIndividual('rain',52,18,48,'wx-drop')}</g>`+place('cloud',CW,2,2);
-    case 'thunder':   return `<g class="wx-bolt">${place('bolt',36,42,38)}</g>`+place('cloud',CW,2,0);
-    case 'snow':      return CLIP+place(orb,SUNW,42,-2)+`<g clip-path="url(#below)">${placeIndividual('snow',60,16,56,'wx-flake')}</g>`+place('cloud',CW,2,2);
-    case 'mist':      return mistSVG(day);
+    case 'clear':     return BLUR+orb(day,50,50,42);
+    case 'few':       return BLUR+over(day,[77,35,37],2,18,96);
+    case 'scattered': return BLUR+cloud(day,2,14,96);
+    case 'broken':    return BLUR+cloud(day,36,6,78,true)+cloud(day,0,20,88,false);
+    case 'shower':    return BLUR+rain()+cloud(day,...PC);
+    case 'rain':      return BLUR+rain()+over(day,SKY,...PC);
+    case 'thunder':   return BLUR+storm(day);
+    case 'snow':      return BLUR+snow(day)+over(day,SKY,...PC);
+    case 'mist':      return BLUR+mist(day);
   }
-  return place('cloud',96,2,14);
+  return BLUR+cloud(day,2,14,96);
 }
 
 /* WMO weather code -> {cond, label} */
@@ -155,6 +187,7 @@
   setCardAppearance(!lightCard);
 
   icoEl.innerHTML=buildIcon(m.cond,day);
+  if(ambientTimer)ambient();
   condEl.textContent=m.label;
   const unitSym = d.units==='f' ? '°F' : '°C';
   tempEl.innerHTML=formatNumber(Number(d.temp))+'&deg;';
@@ -185,6 +218,32 @@
 }
 setInterval(describe, 60000);
 
+const still=matchMedia('(prefers-reduced-motion: reduce)');
+const bounce=(t,period)=>{const x=(t/period)%2;return x<1?x:2-x;};
+let ambientTimer=0,onScreen=true;
+function ambient(){
+  const t=performance.now()/1000;
+  for(const e of icoEl.querySelectorAll('.wx-front'))e.style.transform=`translateX(${(bounce(t,18)*5-2.5).toFixed(2)}px)`;
+  for(const e of icoEl.querySelectorAll('.wx-back'))e.style.transform=`translateX(${(2.5-bounce(t,26)*5).toFixed(2)}px)`;
+  icoEl.querySelectorAll('.wx-mist').forEach((e,i)=>{e.style.transform=`translateX(${(bounce(t+2*i,8+3*i)*6-3).toFixed(2)}px)`;});
+}
+function runAmbient(){
+  clearInterval(ambientTimer);
+  ambientTimer=0;
+  if(still.matches){for(const e of icoEl.querySelectorAll('.wx-front,.wx-back,.wx-mist'))e.removeAttribute('style');return;}
+  if(onScreen){ambient();ambientTimer=setInterval(ambient,500);}
+}
+whileOnScreen(icoEl,v=>{onScreen=v;icoEl.classList.toggle('off',!v);runAmbient();});
+still.addEventListener('change',runAmbient);
+icoEl.addEventListener('animationiteration',e=>{
+  const p=e.target.parentNode;
+  if(!p.classList.contains('wx-pos'))return;
+  const x=(+p.dataset.lo+Math.random()*(p.dataset.hi-p.dataset.lo)).toFixed(1);
+  const flip=p.classList.contains('wx-flip');
+  p.setAttribute('transform',`translate(${x} 0)${flip&&Math.random()<.5?' scale(-1 1)':''}`);
+  if(flip)p.querySelector('.wx-draw').animate([{strokeDashoffset:1},{strokeDashoffset:0}],{duration:200,easing:'ease-out'});
+});
+
 const state=errorState({root:widgetEl,content:[icoEl,condEl,tempEl],caption:msgEl});
 
 {