Add device animation functionality to platform row and enhance CSS for visual effects

theme/assets/js/main.js

@@ -610,3 +610,68 @@ document.addEventListener('DOMContentLoaded', () => {
   paintBg();
   start();
 })();
+
+/* ── Device Animator ──────────────────────────────────────────────────────── */
+(function () {
+  const DEVICES = [
+    'da-tablet', 'da-monitor-sm', 'da-monitor-lg',
+    'da-tv', 'da-projector', 'da-vwall'
+  ];
+  const DWELL = 2500; // ms each device is shown
+
+  document.querySelectorAll('.da-stage').forEach(function (stage) {
+    let current = 0;
+    let timer   = null;
+
+    // Collect the 6 device panels
+    const panels = DEVICES.map(function (cls) {
+      return stage.querySelector('.' + cls);
+    });
+
+    function show(idx) {
+      panels.forEach(function (el, i) {
+        if (!el) return;
+        el.classList.toggle('is-active',  i === idx);
+        el.classList.remove('is-leaving');
+      });
+    }
+
+    function advance() {
+      const leaving = current;
+      current = (current + 1) % DEVICES.length;
+      if (panels[leaving]) panels[leaving].classList.add('is-leaving');
+      show(current);
+      setTimeout(function () {
+        if (panels[leaving]) panels[leaving].classList.remove('is-leaving');
+      }, 600);
+    }
+
+    function startCycle() {
+      if (timer) return;
+      timer = setInterval(advance, DWELL);
+    }
+
+    function stopCycle() {
+      clearInterval(timer);
+      timer = null;
+    }
+
+    // Honour reduced-motion preference: show first device statically
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      show(0);
+      return;
+    }
+
+    show(0);
+    startCycle();
+
+    // Pause when scrolled out of view to save resources
+    if ('IntersectionObserver' in window) {
+      new IntersectionObserver(function (entries) {
+        entries.forEach(function (e) {
+          e.isIntersecting ? startCycle() : stopCycle();
+        });
+      }, { threshold: 0.2 }).observe(stage);
+    }
+  });
+})();