Scrim background needs to fade with image.

Author: cognigami

src/pages/work/ml-education.astro

@@ -431,6 +431,7 @@ import Layout from '../../layouts/Layout.astro';
   // Only the image fades — scrim and text stay put,
   // keeping the bottom text legible throughout.
   const heroImage = document.getElementById('story-hero-image');
+  const scrim     = document.querySelector('.story-hero__scrim');
   const heroEl    = document.getElementById('story-hero');
 
   let lastOpacity = -1;
@@ -444,6 +445,7 @@ import Layout from '../../layouts/Layout.astro';
     if (Math.abs(opacity - lastOpacity) < 0.005) return;
     lastOpacity = opacity;
     heroImage.style.opacity = String(opacity);
+    scrim.style.opacity = String(opacity);
   }
 
   window.addEventListener('scroll', () => {

src/pages/work/quantum-gaming.astro

@@ -14,6 +14,19 @@ import Layout from '../../layouts/Layout.astro';
       <div class="story-hero__image" id="story-hero-image"
         style={`background-image: url('${import.meta.env.BASE_URL}images/quantum-games.png');`}>
       </div>
+      <!-- For video, replace the preceding DIV with the following tag.
+        <video
+          class="story-hero__image"
+          id="story-hero-image"
+          autoplay
+          muted
+          loop
+          playsinline
+          style="width:100%; height:100%; object-fit:cover; position:absolute; inset:0;"
+        >
+          <source src={`${import.meta.env.BASE_URL}images/my_awesome_video.mp4`} type="video/mp4"/>
+        </video><Up>
+      -->
       <div class="story-hero__scrim"></div>
       <div class="story-hero__content">
         <span class="story-hero__label">01 — Transformation</span>
@@ -415,6 +428,7 @@ import Layout from '../../layouts/Layout.astro';
 
 <script>
   const heroImage = document.getElementById('story-hero-image');
+  const scrim     = document.querySelector('.story-hero__scrim');
   const heroEl    = document.getElementById('story-hero');
 
   let lastOpacity = -1;
@@ -428,6 +442,7 @@ import Layout from '../../layouts/Layout.astro';
     if (Math.abs(opacity - lastOpacity) < 0.005) return;
     lastOpacity = opacity;
     heroImage.style.opacity = String(opacity);
+    scrim.style.opacity = String(opacity)
   }
 
   window.addEventListener('scroll', () => {