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;

src/styles/tokens.css

@@ -107,6 +107,19 @@
   --focus-ring: #3D8AFA;
   --overlay-contact: rgba(255, 255, 255, 0.721569);
   --shadow-color: rgba(16, 63, 127, 0.078431);
+
+  /* Hero Scenic Landscape Palette (Day / Light Mode) */
+  --hero-illus-cube-top: #9DCDFD;
+  --hero-illus-cube-front: #2066AB;
+  --hero-illus-cube-side: #0E4073;
+  --hero-illus-cube-shadow: #0C234F;
+  --hero-illus-tree-light: #2166A9;
+  --hero-illus-tree-dark: #104179;
+  --hero-illus-tree-trunk: #08234B;
+  --hero-illus-sun: #FFE66D;
+  --hero-illus-sun-glow: rgba(255, 220, 80, 0.6);
+  --hero-illus-moon: #FFFDF0;
+  --hero-illus-moon-glow: rgba(255, 253, 240, 0.4);
 }
 
 [data-theme="dark"] {
@@ -131,6 +144,19 @@
   --focus-ring: #82B5FF;
   --overlay-contact: rgba(1, 13, 39, 0.721569);
   --shadow-color: rgba(0, 0, 0, 0.239216);
+
+  /* Hero Scenic Landscape Palette (Night / Dark Mode) */
+  --hero-illus-cube-top: #528AE6;
+  --hero-illus-cube-front: #1D4685;
+  --hero-illus-cube-side: #122955;
+  --hero-illus-cube-shadow: #091A3E;
+  --hero-illus-tree-light: #428CE8;
+  --hero-illus-tree-dark: #18366B;
+  --hero-illus-tree-trunk: #0A1B3D;
+  --hero-illus-sun: #FDE047;
+  --hero-illus-sun-glow: rgba(253, 224, 71, 0.45);
+  --hero-illus-moon: #FFFDF0;
+  --hero-illus-moon-glow: rgba(255, 253, 240, 0.65);
 }
 
 @media (max-width: 1024px) {