watch plugin: analog clock overlay with SVG watchface

Simple watchface with second-hand wobble animation, 5-min idle
auto-show, W key toggle, light/dark theme colors, backdrop blur
from theme settings. Grace period prevents instant dismiss.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

public/plugins/watch/watch.css

@@ -0,0 +1,93 @@
+/* ── Watch overlay ── */
+
+#watch-overlay {
+    position: fixed; inset: 0; z-index: 9000;
+    display: grid; place-items: center;
+    cursor: pointer; overflow: hidden;
+    opacity: 0; transform: scale(0.985);
+    transition: opacity 220ms ease, transform 220ms ease;
+    pointer-events: none;
+}
+#watch-overlay.visible {
+    opacity: 1; transform: scale(1);
+    pointer-events: auto;
+}
+#watch-overlay.hidden { display: none; }
+
+#watch-darkening {
+    position: absolute; inset: 0;
+    background: #000; opacity: 0.8;
+    pointer-events: none;
+    backdrop-filter: blur(var(--ui-blur-overlay, 0px));
+    -webkit-backdrop-filter: blur(var(--ui-blur-overlay, 0px));
+}
+
+#watch-analog {
+    position: relative; z-index: 1;
+    width: min(78vmin, 720px);
+    aspect-ratio: 1;
+}
+#watch-dial {
+    position: relative; width: 100%; height: 100%;
+    border-radius: 50%;
+}
+.watch-layer {
+    position: absolute; inset: 0;
+    transform-origin: 50% 50%;
+    will-change: transform;
+}
+.watch-layer svg { display: block; width: 100%; height: 100%; }
+
+#watch-layer-digits { z-index: 1; filter: drop-shadow(0 0 12px rgba(0,0,0,0.8)); }
+#watch-layer-hour { z-index: 3; }
+#watch-layer-minute { z-index: 2; }
+#watch-layer-second { z-index: 4; }
+
+#watch-second-wobble {
+    width: 100%; height: 100%;
+    transform-origin: 50% 50%;
+    transition: transform 92ms cubic-bezier(0.22, 1, 0.36, 1);
+    will-change: transform;
+}
+
+/* Dark theme (default): white hands/markers */
+#watch-overlay {
+    --watch-svg-markers-fill: #fff;
+    --watch-svg-hour-fill: var(--t-accent, #68c6ed);
+    --watch-svg-minute-fill: #fff;
+    --watch-svg-second-fill: var(--t-accent, #68c6ed);
+}
+
+/* Light theme: black hands/markers */
+@media (prefers-color-scheme: light) {
+    #watch-overlay {
+        --watch-svg-markers-fill: #111;
+        --watch-svg-hour-fill: var(--t-accent, #2563eb);
+        --watch-svg-minute-fill: #111;
+        --watch-svg-second-fill: var(--t-accent, #2563eb);
+    }
+    #watch-darkening { background: #fff; opacity: 0.85; }
+    #watch-layer-digits { filter: drop-shadow(0 0 12px rgba(255,255,255,0.6)); }
+}
+
+/* Also detect hyprcrd's own theme mode via body class / data attribute */
+body.light-theme #watch-overlay,
+[data-theme-mode="light"] #watch-overlay {
+    --watch-svg-markers-fill: #111;
+    --watch-svg-hour-fill: var(--t-accent, #2563eb);
+    --watch-svg-minute-fill: #111;
+    --watch-svg-second-fill: var(--t-accent, #2563eb);
+}
+body.light-theme #watch-darkening,
+[data-theme-mode="light"] #watch-darkening {
+    background: #fff; opacity: 0.85;
+}
+body.light-theme #watch-layer-digits,
+[data-theme-mode="light"] #watch-layer-digits {
+    filter: drop-shadow(0 0 12px rgba(255,255,255,0.6));
+}
+
+@media (prefers-reduced-motion: reduce) {
+    #watch-overlay { transition: none !important; }
+    #watch-second-wobble { transition: none !important; }
+}