Add star button to toggle weather animation

internal/web/static/js/weather.js

@@ -8,7 +8,31 @@
   if (!canvas) return;
   var variant = root.dataset.weather;
   if (!variant) return;
-  if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+  var reducedMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  var STORAGE_KEY = "pete-weather-off";
+  var toggleBtn = document.querySelector("[data-weather-toggle]");
+  var star = document.querySelector("[data-weather-star]");
+
+  function userDisabled() {
+    try { return localStorage.getItem(STORAGE_KEY) === "1"; } catch (e) { return false; }
+  }
+  function setDisabled(v) {
+    try {
+      if (v) localStorage.setItem(STORAGE_KEY, "1");
+      else localStorage.removeItem(STORAGE_KEY);
+    } catch (e) {}
+  }
+  function syncBtn(enabled) {
+    if (!toggleBtn) return;
+    toggleBtn.setAttribute("aria-pressed", enabled ? "true" : "false");
+    toggleBtn.title = enabled ? "Turn off weather animation" : "Turn on weather animation";
+    if (star) {
+      star.style.color = "var(--accent)";
+      star.style.opacity = enabled ? "1" : "0.3";
+      star.style.filter = enabled ? "none" : "grayscale(1)";
+    }
+  }
 
   var ctx = canvas.getContext("2d");
   var W = 0, H = 0, DPR = 1;
@@ -232,15 +256,33 @@
     }
     raf = requestAnimationFrame(step);
   }
-  raf = requestAnimationFrame(step);
+  function start() {
+    if (raf) return;
+    last = performance.now();
+    raf = requestAnimationFrame(step);
+  }
+  function stop() {
+    if (raf) cancelAnimationFrame(raf);
+    raf = 0;
+    ctx.clearRect(0, 0, W, H);
+  }
+
+  var enabled = !userDisabled() && !reducedMotion;
+  syncBtn(enabled);
+  if (enabled) start();
+
+  if (toggleBtn) {
+    toggleBtn.addEventListener("click", function () {
+      enabled = !enabled;
+      setDisabled(!enabled);
+      syncBtn(enabled);
+      if (enabled) start(); else stop();
+    });
+  }
 
   document.addEventListener("visibilitychange", function () {
-    if (document.hidden) {
-      cancelAnimationFrame(raf);
-      raf = 0;
-    } else if (!raf) {
-      last = performance.now();
-      raf = requestAnimationFrame(step);
-    }
+    if (!enabled) return;
+    if (document.hidden) stop();
+    else start();
   });
 })();

internal/web/templates/layout.html

@@ -39,6 +39,17 @@
         <span class="font-display text-3xl font-bold tracking-tight">{{.SiteTitle}}</span>
         <span class="hidden sm:inline rounded-full bg-[color:var(--accent)]/20 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-[color:var(--ink)]/70" data-phase-label>day</span>
       </a>
+      {{if .Weather.Variant}}
+      <button type="button" data-weather-toggle aria-pressed="true"
+              title="Toggle weather animation"
+              class="inline-flex shrink-0 items-center justify-center rounded-full bg-[color:var(--card)] p-2 shadow-pete border-2 border-[color:var(--ink)]/10 hover:bg-[color:var(--ink)]/5 transition">
+        <svg aria-hidden="true" viewBox="0 0 24 24" class="h-5 w-5 transition-colors"
+             data-weather-star fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round">
+          <polygon points="12,2.7 14.85,9.27 21.95,10.05 16.6,14.83 18.18,21.8 12,18.13 5.82,21.8 7.4,14.83 2.05,10.05 9.15,9.27"/>
+        </svg>
+        <span class="sr-only">Toggle weather animation</span>
+      </button>
+      {{end}}
       <div class="flex items-center gap-2 min-w-0 max-w-full">
         <button type="button" data-search-trigger title="Search (⌘K)"
                 class="flex shrink-0 items-center gap-2 rounded-full bg-[color:var(--card)] px-3 py-2 text-sm shadow-pete border-2 border-[color:var(--ink)]/10 hover:bg-[color:var(--ink)]/5 transition">