From 489624699e5a285d3ff531a1ed1b128a25f28262 Mon Sep 17 00:00:00 2001
From: Kato <kato@paraguay-srl.com>
Date: Sat, 5 Sep 2026 12:56:50 +0000
Subject: [PATCH] Fix image blink: remove duplicate hero-image CSS, remove
 stray </main>, add fade-in-section to sections

---
 css/styles.css | 34 +++++++++++++++++++++-------------
 index.html     | 14 +++++++-------
 js/main.js     | 25 +++++++++++++++++++++++++
 3 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index f671a83..13f4b25 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -72,7 +72,8 @@
 }
 
 /* Scroll reveal visible state */
-.fade-in-section.visible {
+.fade-in-section.visible,
+.section.visible {
   opacity: 1 !important;
   transform: translateY(0) !important;
 }
@@ -124,17 +125,6 @@ body {
    IMAGE STYLES
    ======================================== */
 
-/* Hero background image */
-.hero-image {
-  position: absolute;
-  top: 0; left: 0; right: 0; bottom: 0;
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-  z-index: 0;
-  filter: brightness(0.45) saturate(1.1);
-}
-
 .hero-content { position: relative; z-index: 1; }
 
 /* About card images */
@@ -144,8 +134,9 @@ body {
   object-fit: cover;
   border-radius: 8px 8px 0 0;
   margin: -20px -20px 16px -20px;
-  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
+  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease, opacity 0.6s ease;
   filter: saturate(0.85);
+  opacity: 1;
 }
 .about-card:hover .about-image {
   transform: scale(1.03);
@@ -349,6 +340,7 @@ body {
    HERO — Focal Motion
    ======================================== */
 .hero {
+  min-height: 500px;
   background: linear-gradient(135deg, #1877f2 0%, #42b0ff 40%, #1877f2 70%, #0d5fc9 100%);
   background-size: 300% 300%;
   animation: heroGradientShift 12s ease infinite;
@@ -359,6 +351,22 @@ body {
   overflow: hidden;
 }
 
+/* Hero image loading state — prevents blink */
+.hero-image {
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  filter: brightness(0.45) saturate(1.1);
+  opacity: 0;
+  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.hero-image.loaded {
+  opacity: 1;
+}
+
 /* Subtle mesh pattern overlay — sits above image, below content */
 .hero::before {
   content: '';
diff --git a/index.html b/index.html
index de2b216..4585f21 100644
--- a/index.html
+++ b/index.html
@@ -288,11 +288,8 @@
     </div>
   </div>
 
-  <!-- Main Content (logged-in) -->
-  <main class="main-content" id="main-content">
-    
-    <!-- About Section -->
-    <section class="section" id="about">
+  <!-- About Section (always visible) -->
+  <section class="section fade-in-section" id="about">
       <div class="container">
         <h2 class="section-title">
           <span class="hide-de">Über die Community</span>
@@ -347,8 +344,11 @@
       </div>
     </section>
 
+  <!-- Main Content (logged-in) -- Members, Wiki, Newsletter -->
+  <main class="main-content" id="main-content">
+
     <!-- Members Section -->
-    <section class="section section-alt" id="members">
+    <section class="section section-alt fade-in-section" id="members">
       <div class="container">
         <h2 class="section-title">
           <span class="hide-de">Mitglieder</span>
@@ -368,7 +368,7 @@
     </section>
 
     <!-- Wiki Section -->
-    <section class="section" id="wiki">
+    <section class="section fade-in-section" id="wiki">
       <div class="container">
         <h2 class="section-title">
           <span class="hide-de">Wiki</span>
diff --git a/js/main.js b/js/main.js
index e4d923f..9965c84 100644
--- a/js/main.js
+++ b/js/main.js
@@ -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)
 // ========================================