fix: show full homepage carousel images

src/TravelSite.tsx

@@ -2526,22 +2526,18 @@ function HomePage() {
       {
         source: '/client-assets/home-hero-huangguoshu-hiker.webp',
         alt: { zh: '黄果树瀑布前的贵州徒步旅行者', en: 'A traveler hiking in front of Huangguoshu Waterfall' },
-        position: 'center 52%',
       },
       {
         source: '/client-assets/home-hero-waterfall-scale.webp',
         alt: { zh: '贵州巨型瀑布前的旅行者', en: 'A traveler beneath a monumental Guizhou waterfall' },
-        position: 'center 57%',
       },
       {
         source: '/client-assets/home-hero-mountain-village.webp',
         alt: { zh: '贵州山谷中的传统村寨', en: 'A traditional village in a Guizhou mountain valley' },
-        position: 'center 50%',
       },
       {
         source: '/client-assets/home-hero-cave-lanterns.webp',
         alt: { zh: '贵州洞穴水面上的灯火与游船', en: 'Lantern light and boats inside a Guizhou cave' },
-        position: 'center 52%',
       },
     ],
     [],
@@ -2562,18 +2558,6 @@ function HomePage() {
         .from('.oc-atlas-hero-media', { xPercent: 4, autoAlpha: 0, duration: 0.95 }, '-=0.65')
         .from('.oc-atlas-hero-rail > *', { y: 12, autoAlpha: 0, duration: 0.42, stagger: 0.06 }, '-=0.45');
 
-      gsap.to('.oc-atlas-hero-media img', {
-        yPercent: 7,
-        scale: 1.045,
-        ease: 'none',
-        scrollTrigger: {
-          trigger: '.oc-atlas-hero',
-          start: 'top top+=82',
-          end: 'bottom top',
-          scrub: true,
-        },
-      });
-
       gsap.utils.toArray<HTMLElement>('.oc-atlas-reveal').forEach((section) => {
         gsap.from(section.children, {
           y: 46,
@@ -2666,8 +2650,8 @@ function HomePage() {
               </div>
             </div>
 
-            <figure className="oc-atlas-hero-media">
-              <img key={activeHero.source} src={asset(activeHero.source)} alt={activeHero.alt[language]} style={{ objectPosition: activeHero.position }} />
+            <figure className="oc-atlas-hero-media" style={{ '--oc-atlas-hero-image': `url(${asset(activeHero.source)})` } as CSSProperties}>
+              <img key={activeHero.source} src={asset(activeHero.source)} alt={activeHero.alt[language]} />
               <figcaption>{pickText('贵州 · 中国西南', 'Guizhou · Southwest China', language)}</figcaption>
             </figure>
 

src/TravelSiteAtlas.css

@@ -272,22 +272,37 @@ html[data-oc-language='zh'] .oc-site .oc-atlas-hero h1 {
 
 .oc-atlas-hero-media {
   position: relative;
+  isolation: isolate;
   min-width: 0;
   margin: 0;
   overflow: hidden;
   border-radius: 0 0 0 34px;
-  background: #c7ccbf;
+  background: #13221a;
   box-shadow: 0 24px 54px rgba(29, 39, 31, .11);
 }
 
+.oc-atlas-hero-media::before {
+  content: '';
+  position: absolute;
+  inset: -32px;
+  z-index: 0;
+  background-image: linear-gradient(rgba(10, 20, 14, .28), rgba(10, 20, 14, .28)), var(--oc-atlas-hero-image);
+  background-position: center;
+  background-size: cover;
+  filter: blur(24px) saturate(.72);
+  transform: scale(1.08);
+}
+
 .oc-atlas-hero-media img {
+  position: relative;
+  z-index: 1;
+  display: block;
   width: 100%;
-  height: 108%;
-  object-fit: cover;
-  object-position: center 45%;
-  filter: saturate(.73) contrast(1.03);
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
+  filter: saturate(.88) contrast(1.02);
   animation: oc-atlas-image-in 1s cubic-bezier(.22, 1, .36, 1) both;
-  will-change: transform;
 }
 
 @keyframes oc-atlas-image-in {