Improved background reveal effects

assets/css/custom.css

@@ -23,6 +23,8 @@
   overflow-y: auto;
   padding: 1rem;
   scroll-behavior: smooth;
+  scrollbar-color: rgba(145, 145, 185, 0.8) rgba(0, 0, 0, 0.1);
+  scrollbar-width: thin;
 }
 
 .background-container {

layouts/partials/background-images.html

@@ -39,12 +39,24 @@
     let revealTimer = null;
     let isRevealed = false;
 
-    container.addEventListener('mousemove', (e) => {
+    const isOverContent = (e) => {
+      const target = e.target;
+      return target.closest('article, header, nav, footer, section') !== null;
+    };
+
+    window.addEventListener('mousemove', (e) => {
       if (isRevealed) return;
       
       circle.style.left = e.clientX + 'px';
       circle.style.top = e.clientY + 'px';
       
+      if (isOverContent(e)) {
+        if (hoverTimer) {
+          resetTimer();
+        }
+        return;
+      }
+      
       if (!hoverTimer) {
         hoverTimer = setTimeout(() => {
           circle.classList.add('active');
@@ -58,21 +70,26 @@
       }
     });
 
-    const resetEffect = () => {
+    const resetTimer = () => {
       clearTimeout(hoverTimer);
       clearTimeout(revealTimer);
       hoverTimer = null;
       revealTimer = null;
-      circle.classList.remove('active', 'fade-out');
+      circle.classList.remove('active');
+    };
+
+    const resetEffect = () => {
+      resetTimer();
+      circle.classList.remove('fade-out');
       fullImg.classList.remove('unblurred');
       isRevealed = false;
     };
 
-    container.addEventListener('mouseleave', resetEffect);
-    window.addEventListener('mouseout', (e) => {
-      if (!e.relatedTarget || e.relatedTarget.nodeName === 'HTML') {
-        resetEffect();
+    document.addEventListener('mouseout', (e) => {
+      if (!e.relatedTarget && !e.toElement) {
+        resetTimer();
       }
     });
+    window.addEventListener('blur', resetTimer);
   </script>
 </div> 

layouts/partials/home/page.html

@@ -31,12 +31,24 @@
     let revealTimer = null;
     let isRevealed = false;
 
-    container.addEventListener('mousemove', (e) => {
+    const isOverContent = (e) => {
+      const target = e.target;
+      return target.closest('article, header, nav, footer, section') !== null;
+    };
+
+    window.addEventListener('mousemove', (e) => {
       if (isRevealed) return;
       
       circle.style.left = e.clientX + 'px';
       circle.style.top = e.clientY + 'px';
       
+      if (isOverContent(e)) {
+        if (hoverTimer) {
+          resetTimer();
+        }
+        return;
+      }
+      
       if (!hoverTimer) {
         hoverTimer = setTimeout(() => {
           circle.classList.add('active');
@@ -50,22 +62,27 @@
       }
     });
 
-    const resetEffect = () => {
+    const resetTimer = () => {
       clearTimeout(hoverTimer);
       clearTimeout(revealTimer);
       hoverTimer = null;
       revealTimer = null;
-      circle.classList.remove('active', 'fade-out');
+      circle.classList.remove('active');
+    };
+
+    const resetEffect = () => {
+      resetTimer();
+      circle.classList.remove('fade-out');
       fullImg.classList.remove('unblurred');
       isRevealed = false;
     };
 
-    container.addEventListener('mouseleave', resetEffect);
-    window.addEventListener('mouseout', (e) => {
-      if (!e.relatedTarget || e.relatedTarget.nodeName === 'HTML') {
-        resetEffect();
+    document.addEventListener('mouseout', (e) => {
+      if (!e.relatedTarget && !e.toElement) {
+        resetTimer();
       }
     });
+    window.addEventListener('blur', resetTimer);
   </script>
 </div>
 <article class="prose max-w-full dark:prose-invert glass">

themes/congo-146_fix/assets/css/compiled/main.css

@@ -582,7 +582,7 @@ video {
 .prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)):hover {
   color: rgba(var(--color-neutral), 1);
   text-decoration: none;
-  background-color: rgba(var(--color-primary-600), 1);
+  background-color: rgba(var(--color-primary-600), 0.8);
   border-radius: 0.09rem;
 }