Refactor scripts into modules

clock.js

@@ -114,39 +114,6 @@
     });
   }
 
-  const lastAngles = {
-    handXeno: 0,
-    handQuantic: 0,
-    handChronon: 0,
-    handEonstrip: 0,
-    handMegasequence: 0
-  };
-
-  function rotateHand(id, angle) {
-    const el = document.getElementById(id);
-    if (!el) return;
-    const prev = lastAngles[id];
-
-    if (angle < prev) {
-      // When wrapping around (e.g. 15 → 0), animate to one full turn
-      // and then snap back to the new angle to avoid a jump.
-      const target = angle + 360;
-      const handle = () => {
-        el.removeEventListener('transitionend', handle);
-        // Snap back without animation
-        el.style.transition = 'none';
-        el.style.transform = `translateX(-50%) translateZ(0) rotate(${angle}deg)`;
-        void el.offsetWidth;
-        el.style.transition = '';
-      };
-      el.addEventListener('transitionend', handle, { once: true });
-      el.style.transform = `translateX(-50%) translateZ(0) rotate(${target}deg)`;
-    } else {
-      el.style.transform = `translateX(-50%) translateZ(0) rotate(${angle}deg)`;
-    }
-
-    lastAngles[id] = angle;
-  }
 
   function renderClock(cob) {
     // Use fractional progress within each unit so angles stay small
@@ -155,11 +122,11 @@
     const cf = (cob % COBIE_UNITS.eonstrip) / COBIE_UNITS.eonstrip;
     const ef = (cob % COBIE_UNITS.megasequence) / COBIE_UNITS.megasequence;
     const mf = (cob % COBIE_UNITS.cosmocycle) / COBIE_UNITS.cosmocycle;
-    rotateHand('handXeno', xf * 360);
-    rotateHand('handQuantic', qf * 360);
-    rotateHand('handChronon', cf * 360);
-    rotateHand('handEonstrip', ef * 360);
-    rotateHand('handMegasequence', mf * 360);
+    Animate.rotateHand('handXeno', xf * 360);
+    Animate.rotateHand('handQuantic', qf * 360);
+    Animate.rotateHand('handChronon', cf * 360);
+    Animate.rotateHand('handEonstrip', ef * 360);
+    Animate.rotateHand('handMegasequence', mf * 360);
   }
 
   function updateClock() {