From 9fe4b329e110d4946e20869e239f90b9be8d5a25 Mon Sep 17 00:00:00 2001
From: Jeremy Karst <jeremy@karsttech.com>
Date: Wed, 7 Jan 2026 01:17:13 -0500
Subject: [PATCH] Improved background reveal effects

---
 assets/css/custom.css                         |  2 ++
 layouts/partials/background-images.html       | 31 ++++++++++++++-----
 layouts/partials/home/page.html               | 31 ++++++++++++++-----
 .../assets/css/compiled/main.css              |  2 +-
 4 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/assets/css/custom.css b/assets/css/custom.css
index ae8e84f..8db57eb 100644
--- a/assets/css/custom.css
+++ b/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 {
diff --git a/layouts/partials/background-images.html b/layouts/partials/background-images.html
index 38a33c7..f56e7f8 100644
--- a/layouts/partials/background-images.html
+++ b/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> 
\ No newline at end of file
diff --git a/layouts/partials/home/page.html b/layouts/partials/home/page.html
index 3ca95fd..429197f 100644
--- a/layouts/partials/home/page.html
+++ b/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">
diff --git a/themes/congo-146_fix/assets/css/compiled/main.css b/themes/congo-146_fix/assets/css/compiled/main.css
index c1677e6..0d4e162 100644
--- a/themes/congo-146_fix/assets/css/compiled/main.css
+++ b/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;
 }