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

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: '';