re-add off-screen image hiding

.gitattributes

@@ -0,0 +1 @@
+public/empty.mp3 filter=lfs diff=lfs merge=lfs -text

public/empty.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:98875890b2f83542ccc5a791c22669b7372ea3bde7349d284feb3d937dce3d95
+size 4412

src/components/AudioArea.vue

@@ -32,7 +32,7 @@ export default defineComponent({
     // Use the global audio loading queue to throttle concurrent loads
     const preloadAudio = (src: string) => {
       console.debug(`[AUDIOAREA] Queueing audio for preload: ${src}`);
-      audioSrc.value = "";
+      audioSrc.value = "empty.mp3";
 
       queueAudioForLoading(
         src,

src/components/VideoScroll.vue

@@ -107,6 +107,7 @@ export default defineComponent({
         if (entry.isIntersecting) {
           element.classList.add("visible");
           if (!element.src && element.dataset.src) {
+            element.classList.add("displayed");
             // Queue the image for loading through the global service
             // Calculate the image's position to prioritize closer images
             queueImageForLoading(
@@ -122,6 +123,8 @@ export default defineComponent({
               }
             );
           }
+        } else {
+          element.classList.remove("visible");
         }
       });
     });
@@ -177,6 +180,9 @@ export interface VideoScrollDef {
 
 .video-scroll img.visible {
   visibility: visible !important;
+}
+
+.video-scroll img.displayed {
   opacity: 1 !important;
 }