Fix hero animation: object-fit cover + conditional blur + glass on collapse

- HeroBackground.vue:
  - Add object-cover class to Lottie animation (fills container)
  - Make dark overlay conditional (v-if collapseProgress > 0.5)
  - Overlay fades in during collapse (opacity 0→1)

- MainNavigation.vue:
  - Replace glassStyle prop with isCollapsed
  - Glass effect (backdrop-blur-md) applies only when collapsed

- topnav.vue:
  - Pass isCollapsed instead of glass-style
  - Home page: isCollapsed from useHeroScroll
  - Other pages: always true (always collapsed)

Result:
- Animation covers full viewport without crop
- No blur overlay when hero is expanded
- Glass effect appears only when header collapses to 100px

app/components/hero/HeroBackground.vue

@@ -6,7 +6,7 @@
         src="/animations/supply-chain.lottie"
         autoplay
         loop
-        class="absolute inset-0 w-full h-full"
+        class="absolute inset-0 w-full h-full object-cover"
         :style="{
           opacity: 1 - collapseProgress * 0.7,
           transform: `scale(${1 + collapseProgress * 0.1})`
@@ -14,8 +14,12 @@
       />
     </ClientOnly>
 
-    <!-- Overlay for text readability -->
-    <div class="absolute inset-0 bg-gradient-to-b from-slate-900/60 via-slate-900/40 to-slate-900/70" />
+    <!-- Overlay for text readability - only when hero starts collapsing -->
+    <div
+      v-if="collapseProgress > 0.5"
+      class="absolute inset-0 bg-gradient-to-b from-slate-900/60 via-slate-900/40 to-slate-900/70"
+      :style="{ opacity: (collapseProgress - 0.5) * 2 }"
+    />
   </div>
 </template>