fix: resize and rearrange hero landing illustrations for laptop screens

src/components/ScenicHeroJourney.module.css

@@ -1,23 +1,112 @@
+/* ============================================================
+   ScenicHeroJourney — hero stage with fluid-scaling SVG backdrop
+   Strategy: illustrations use fluid width via clamp() so they
+   always leave a comfortable gap to the center content.
+   They are pushed left/right so ~half bleeds off the canvas edge,
+   clipped by heroStage overflow:hidden — matching the design.
+   ============================================================ */
+
+/* ── Container ─────────────────────────────────────────────── */
 .scenicContainer {
   position: relative;
   width: 100%;
-  max-width: 1440px;
   height: auto;
-  overflow: hidden;
+  overflow: visible;
   background-color: var(--bg-page);
 }
 
+/* ── Hero Stage ─────────────────────────────────────────────── */
 .heroStage {
   position: relative;
   width: 100%;
-  height: 680px;
+  /* fluid height: shrinks on narrower screens */
+  height: clamp(360px, 46vw, 680px);
   overflow: hidden;
   background: var(--bg-page);
 }
 
+/* ── Backdrop wrapper ───────────────────────────────────────── */
+.heroBackdrop {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* ── All backdrop imgs are absolutely positioned ─────────────── */
+.heroBackdrop img {
+  position: absolute;
+  display: block;
+  height: auto;
+}
+
+/* ── Dark-mode tint ─────────────────────────────────────────── */
+:global([data-theme="dark"]) .heroBackdrop {
+  opacity: 0.82;
+  filter: saturate(0.88) brightness(0.9);
+}
+
+/* ================================================================
+   LEFT illustration  (SVG intrinsic: 397 × 600)
+   Strategy: width scales with viewport so it's always ~28% of
+   the canvas width. Pushed so its RIGHT edge aligns with the
+   leftmost ~22% of the canvas (the rest bleeds off the left edge).
+   ================================================================ */
+.backdropLeft {
+  /* Start below the topBar icon zone (padding ~32px + icon 44px = ~76px) */
+  top: clamp(72px, 8vw, 100px);
+  left: clamp(-220px, calc(22% - 28vw), -40px);
+  width: clamp(240px, 28vw, 440px);
+}
+
+/* ================================================================
+   RIGHT illustration  (SVG intrinsic: 435 × 533)
+   Mirror of left: right edge bleeds off the right edge.
+   ================================================================ */
+.backdropRight {
+  /* Slightly lower than left to maintain visual rhythm */
+  top: clamp(80px, 9vw, 110px);
+  right: clamp(-240px, calc(22% - 29vw), -40px);
+  width: clamp(250px, 29vw, 460px);
+}
+
+/* ================================================================
+   SUN illustration  (SVG intrinsic: 139 × 139)
+   Sits in the upper-right quadrant, between the center text and
+   the right cubes.  Scales fluidly.
+   ================================================================ */
+.backdropSun {
+  top: clamp(20px, 3.5vw, 52px);
+  /* place sun between center (50%) and right illustration edge  */
+  right: clamp(100px, calc(22% + 2vw), 380px);
+  width: clamp(52px, 10vw, 139px);
+}
+
+/* ================================================================
+   MOBILE  ≤ 640px  — tighter crop, smaller presence
+   ================================================================ */
 @media (max-width: 640px) {
   .heroStage {
-    min-height: 760px;
     height: auto;
+    min-height: 680px;
+  }
+
+  .backdropLeft {
+    top: 130px;
+    left: -30px;
+    width: clamp(100px, 26vw, 160px);
+  }
+
+  .backdropRight {
+    top: 136px;
+    right: -30px;
+    width: clamp(110px, 28vw, 170px);
+  }
+
+  .backdropSun {
+    top: 44px;
+    right: 16px;
+    width: clamp(36px, 9vw, 56px);
   }
 }