From 77f5cf493d89fb66a93bce04de2b8fb6e638d108 Mon Sep 17 00:00:00 2001
From: Michael Victory <opcomm@gmail.com>
Date: Mon, 22 Jun 2026 18:34:57 -0700
Subject: [PATCH] Hero loop: drop poster, fade the video in on play
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Can't generate a frame poster (the loop is VP9; fine for real browsers but the
review tooling can't decode it), so rely on the paper-tinted panel as the
instant never-blank base and fade the video in on the 'playing' event. Cleaner
and removes a 404. VP9 confirmed — plays on all modern browsers + iOS 14.5+.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 index.html | 3 ++-
 style.css  | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 8aaa73d..f6c5e5f 100644
--- a/index.html
+++ b/index.html
@@ -88,7 +88,7 @@
       <p class="call">or call <a class="tel" data-p1="778" data-p2="985" data-p3="6736" href="#contact">778&#8209;985&#8209;OPEN (6736)</a></p>
     </div>
     <div class="hero-media" aria-hidden="true">
-      <video class="hero-video" muted loop playsinline preload="none" poster="assets/media/hero-loop-poster.webp" data-src="assets/media/hero-loop.webm"></video>
+      <video class="hero-video" muted loop playsinline preload="none" data-src="assets/media/hero-loop.webm"></video>
     </div>
     </div>
   </section>
@@ -374,6 +374,7 @@ Cal("init", { origin: "https://cal.shopwisdom.ca" });
   var src = hv.getAttribute('data-src'); if (!src) return;
   var s = document.createElement('source'); s.src = src; s.type = 'video/webm';
   hv.appendChild(s); hv.load();
+  hv.addEventListener('playing', function () { hv.classList.add('is-playing'); }, { once: true });
   var p = hv.play(); if (p && p.catch) p.catch(function () {});
 })();
 </script>
diff --git a/style.css b/style.css
index 1995bf4..b1b4d78 100644
--- a/style.css
+++ b/style.css
@@ -130,7 +130,8 @@ a.tel { text-decoration: none; }
 /* Hero split — text left, ambient loop right. Poster-first + paper fallback = never blank. */
 .hero-wrap { display: grid; grid-template-columns: 1.05fr 0.9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
 .hero-media { position: relative; border-radius: 10px; overflow: hidden; background: var(--paper-2); aspect-ratio: 1 / 1; }
-.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }
+.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .8s ease; }
+.hero-video.is-playing { opacity: 1; }
 @media (max-width: 860px) {
   .hero-wrap { grid-template-columns: 1fr; gap: 2.2rem; }
   .hero-media { aspect-ratio: 16 / 10; max-height: 320px; }