Add Matrix-themed glowing cursor effect with fading trail particles

frontend/index.html

@@ -95,5 +95,6 @@
     <script src="js/boot.js"></script>
     <script src="js/hero_fx.js"></script>
     <script src="js/matrix.js"></script>
+    <script src="./js/cursor.js"></script>
   </body>
 </html>

frontend/js/cursor.js

@@ -0,0 +1,61 @@
+if ("ontouchstart" in window) {
+  // Disable on touch devices
+} else {
+  const cursor = document.createElement("div");
+  cursor.className = "matrix-cursor";
+  document.body.appendChild(cursor);
+
+  const particles = [];
+
+  let mouseX = 0;
+  let mouseY = 0;
+
+  document.addEventListener("mousemove", (e) => {
+    mouseX = e.clientX;
+    mouseY = e.clientY;
+
+    createParticle(mouseX, mouseY);
+  });
+
+  function createParticle(x, y) {
+    const particle = document.createElement("div");
+    particle.className = "cursor-particle";
+
+    particle.style.left = `${x}px`;
+    particle.style.top = `${y}px`;
+
+    document.body.appendChild(particle);
+
+    particles.push({
+      element: particle,
+      life: 1,
+    });
+  }
+
+  function animate() {
+    cursor.style.left = `${mouseX}px`;
+    cursor.style.top = `${mouseY}px`;
+
+    for (let i = particles.length - 1; i >= 0; i--) {
+      particles[i].life -= 0.05;
+
+      particles[i].element.style.opacity = particles[i].life;
+      particles[i].element.style.transform =
+        `translate(-50%, -50%) scale(${particles[i].life})`;
+
+      if (particles[i].life <= 0) {
+        particles[i].element.remove();
+        particles.splice(i, 1);
+      }
+    }
+
+    if (particles.length > 12) {
+      particles[0].element.remove();
+      particles.shift();
+    }
+
+    requestAnimationFrame(animate);
+  }
+
+  animate();
+}

frontend/styles/main.css

@@ -2517,3 +2517,40 @@ body::-webkit-scrollbar-thumb {
 .rank-neutral {
   color: var(--text-muted);
 }
+
+/* Matrix Cursor Effect */
+
+.matrix-cursor {
+  position: fixed;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--green);
+  pointer-events: none;
+  z-index: 9999;
+  transform: translate(-50%, -50%);
+  box-shadow:
+    0 0 6px var(--green),
+    0 0 12px var(--green),
+    0 0 18px var(--green);
+}
+
+.cursor-particle {
+  position: fixed;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--green);
+  pointer-events: none;
+  z-index: 9998;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0 8px var(--green);
+  transition: opacity 0.1s linear;
+}
+
+@media (hover: none) {
+  .matrix-cursor,
+  .cursor-particle {
+    display: none;
+  }
+}