fix: add radiant glow and brighten sun illustration to match moon

src/components/ScenicHeroJourney.module.css

@@ -35,17 +35,58 @@
   user-select: none;
 }
 
-/* ── All backdrop imgs are absolutely positioned ─────────────── */
+/* ── All backdrop SVGs are absolutely positioned ─────────────── */
+.heroBackdrop svg,
 .heroBackdrop img {
   position: absolute;
   display: block;
   height: auto;
 }
 
-/* ── Dark-mode tint ─────────────────────────────────────────── */
+.heroBackdrop svg path,
+.heroBackdrop svg rect {
+  transition: fill 0.3s ease;
+}
+
+/* ── Dark-mode styling ─────────────────────────────────────────── */
 :global([data-theme="dark"]) .heroBackdrop {
-  opacity: 0.82;
-  filter: saturate(0.88) brightness(0.9);
+  opacity: 1;
+}
+
+/* ── Celestial Bodies (Sun & Moon) ──────────────────────────── */
+.backdropSun,
+.backdropMoon {
+  position: absolute;
+  display: block;
+  height: auto;
+  pointer-events: none;
+  user-select: none;
+  transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
+              transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+/* Light mode (default): Sun shines brightly with solar glow, Moon hidden */
+.backdropSun {
+  opacity: 1;
+  transform: scale(1) rotate(0deg);
+  filter: drop-shadow(0 0 16px var(--hero-illus-sun-glow)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.85));
+}
+
+.backdropMoon {
+  opacity: 0;
+  transform: scale(0.65) rotate(-25deg);
+}
+
+/* Dark mode: Bright half-moon shines with lunar glow, Sun gracefully sets */
+:global([data-theme="dark"]) .backdropSun {
+  opacity: 0;
+  transform: scale(0.65) rotate(35deg);
+}
+
+:global([data-theme="dark"]) .backdropMoon {
+  opacity: 1;
+  transform: scale(1) rotate(0deg);
+  filter: drop-shadow(0 0 16px var(--hero-illus-moon-glow)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
 }
 
 /* ================================================================
@@ -64,7 +105,8 @@
   width: clamp(250px, 29vw, 460px);
 }
 
-.backdropSun {
+.backdropSun,
+.backdropMoon {
   top: clamp(20px, 3.5vw, 52px);
   right: clamp(100px, calc(22% + 2vw), 380px);
   width: clamp(52px, 10vw, 139px);
@@ -95,8 +137,9 @@
     width: clamp(295px, 38vw, 380px);
   }
 
-  /* Sun — upper-right zone, between avatar and right cubes */
-  .backdropSun {
+  /* Celestial — upper-right zone, between avatar and right cubes */
+  .backdropSun,
+  .backdropMoon {
     top: clamp(26px, 3.5vw, 44px);
     right: clamp(120px, 33vw, 280px);
     width: clamp(62px, 9vw, 96px);
@@ -130,7 +173,8 @@
     width: clamp(210px, 46vw, 260px);
   }
 
-  .backdropSun {
+  .backdropSun,
+  .backdropMoon {
     top: clamp(24px, 5vw, 36px);
     right: clamp(52px, 15vw, 68px);
     width: clamp(34px, 8vw, 42px);
@@ -162,7 +206,8 @@
     width: 418px;
   }
 
-  .backdropSun {
+  .backdropSun,
+  .backdropMoon {
     top: 50px;
     right: 346px;
     width: 139px;