From 0da52b689c039cc463f459a2f0e327b147c06316 Mon Sep 17 00:00:00 2001
From: Kurtis Holsapple <kurtis@openfunctioncomputers.com>
Date: Wed, 7 May 2025 16:23:26 -0700
Subject: [PATCH] WIP

---
 dist/app.css             | 2 +-
 dist/app.js              | 7 +++++--
 dist/mix-manifest.json   | 4 ++--
 src/js/app.js            | 7 +++++--
 src/scss/_variables.scss | 1 +
 src/scss/global.scss     | 2 +-
 6 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/dist/app.css b/dist/app.css
index f27bd52..306049f 100644
--- a/dist/app.css
+++ b/dist/app.css
@@ -12064,7 +12064,7 @@ a {
 
 .watch-vp {
   opacity: 0;
-  transition: opacity 0.3s ease;
+  transition: opacity 0.75s ease;
 }
 .watch-vp.visible {
   opacity: 1;
diff --git a/dist/app.js b/dist/app.js
index 9504519..f3a7543 100644
--- a/dist/app.js
+++ b/dist/app.js
@@ -10,13 +10,16 @@
 var observer = new IntersectionObserver(function (entries) {
   entries.forEach(function (entry) {
     if (entry.isIntersecting) {
-      entry.target.classList.add('visible');
+      entry.target._inViewportTimeout = setTimeout(function () {
+        entry.target.classList.add('visible');
+      }, 250);
     } else {
+      clearTimeout(entry.target._inViewportTimeout);
       entry.target.classList.remove('visible');
     }
   });
 }, {
-  threshold: 0.1 // adjust as needed
+  threshold: 0.5 // adjust as needed
 });
 document.querySelectorAll('.watch-vp').forEach(function (el) {
   observer.observe(el);
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
index e37d823..60fecc2 100644
--- a/dist/mix-manifest.json
+++ b/dist/mix-manifest.json
@@ -1,4 +1,4 @@
 {
-    "/app.js": "/app.js?id=1121838d4c96cc32c63518343f8e22d9",
-    "/app.css": "/app.css?id=6ef8fbc49bc3b386876d8d8e84981fef"
+    "/app.js": "/app.js?id=d57b699e31f5b30c10b0526be11ef90e",
+    "/app.css": "/app.css?id=5e173ee1f8a497d5c9ffa2042c32bba5"
 }
diff --git a/src/js/app.js b/src/js/app.js
index 1dd6324..88e84e8 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -1,13 +1,16 @@
 const observer = new IntersectionObserver((entries) => {
     entries.forEach(entry => {
         if (entry.isIntersecting) {
-            entry.target.classList.add('visible');
+            entry.target._inViewportTimeout = setTimeout(() => {
+                entry.target.classList.add('visible');
+            }, 250);
         } else {
+            clearTimeout(entry.target._inViewportTimeout);
             entry.target.classList.remove('visible');
         }
     });
 }, {
-    threshold: 0.1 // adjust as needed
+    threshold: 0.5 // adjust as needed
 });
 
 document.querySelectorAll('.watch-vp').forEach(el => {
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 4efeeeb..8115bc3 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -10,6 +10,7 @@ $c-tan: #B9AF78;
 $c-textGrey: #333333;
 
 $transition-time: 0.3s;
+$transition-time-slow: 0.75s;
 
 // Bootstrap overrides
 $font-family-sans-serif: 'Inter', sans-serif;
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 132047a..c4e183e 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -43,7 +43,7 @@ a {
 
 .watch-vp {
     opacity: 0;
-    transition: opacity $transition-time ease;
+    transition: opacity $transition-time-slow ease;
 
     &.visible {
         opacity: 1;