Fix image blink: remove duplicate hero-image CSS, remove stray </main>, add fade-in-section to sections

2026-09-05 12:56:50 +00:00
parent ef0d9aac55
commit 489624699e
3 changed files with 53 additions and 20 deletions
@@ -107,8 +107,33 @@ document.addEventListener('DOMContentLoaded', () => {

  // Ripple effect on buttons
  initRippleEffects();
+
+  // Fade in hero image (prevents blink)
+  initHeroImageFade();
 });

+// ========================================
+// HERO IMAGE FADE IN — prevents blink
+// ========================================
+function initHeroImageFade() {
+  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const heroImage = document.querySelector('.hero-image');
+  if (!heroImage) return;
+
+  if (prefersReducedMotion) {
+    heroImage.classList.add('loaded');
+    return;
+  }
+
+  if (heroImage.complete && heroImage.naturalHeight > 0) {
+    requestAnimationFrame(() => heroImage.classList.add('loaded'));
+    return;
+  }
+
+  heroImage.addEventListener('load', () => requestAnimationFrame(() => heroImage.classList.add('loaded')), { once: true });
+  heroImage.addEventListener('error', () => requestAnimationFrame(() => heroImage.classList.add('loaded')), { once: true });
+}
+
 // ========================================
 // SCROLL REVEAL (Intersection Observer)
 // ========================================