From fc08665c1449a3097ef1085a68f944c6b57647be Mon Sep 17 00:00:00 2001
From: Muskankr <mkr803967@gmail.com>
Date: Wed, 27 May 2026 19:24:52 +0530
Subject: [PATCH] Add sparkle cursor effect to careers page

---
 carrers.html | 74 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)

diff --git a/carrers.html b/carrers.html
index ba74174c..cd48eb8a 100644
--- a/carrers.html
+++ b/carrers.html
@@ -441,6 +441,54 @@ <h3>Interview Process</h3>
         background: #1b5e20;
         transform: translateY(-3px);
       }
+
+      /* Sparkle Cursor Effect */
+
+#sparkle-container {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+.sparkle {
+  position: fixed;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  pointer-events: none;
+  background: radial-gradient(circle, #22c55e 0%, transparent 70%);
+  animation: sparkleFade 1.8s ease-out forwards;
+
+  box-shadow:
+    0 0 8px #22c55e,
+    0 0 18px #22c55e,
+    0 0 28px rgba(34, 197, 94, 0.8);
+
+  z-index: 9999;
+}
+
+@keyframes sparkleFade {
+  0% {
+    transform: scale(0.4);
+    opacity: 0;
+  }
+
+  20% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  70% {
+    opacity: 0.9;
+  }
+
+  100% {
+    transform: scale(1.8);
+    opacity: 0;
+  }
+}
+
     </style>
     <footer class="site-footer">
       <div class="footer-inner">
@@ -510,8 +558,34 @@ <h4>Tools</h4>
          <i class="fa-solid fa-arrow-up"></i>
     </button>
 
+    <div id="sparkle-container"></div>
+
     <!-- Optional: Add theme toggle script if needed -->
     <script>
+
+        const sparkleContainer = document.getElementById("sparkle-container");
+
+        let lastSparkle = 0;
+
+        document.addEventListener("mousemove", (e) => {
+        const now = Date.now();
+
+        if (now - lastSparkle < 40) return;
+
+        lastSparkle = now;
+
+        const sparkle = document.createElement("div");
+        sparkle.classList.add("sparkle");
+
+        sparkle.style.left = `${e.clientX}px`;
+        sparkle.style.top = `${e.clientY}px`;
+
+        sparkleContainer.appendChild(sparkle);
+
+        setTimeout(() => {
+            sparkle.remove();
+        }, 1000);
+        });
         // Theme toggle functionality
         document.addEventListener('DOMContentLoaded', function() {
             // Check for saved theme or default to light