From 2b188aa29385e1507983e3ce1d06f59cf72617ed Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Sun, 6 Sep 2026 12:33:46 +0330
Subject: [PATCH] fix: add radiant glow and brighten sun illustration to match
 moon

---
 public/assets/bg-illustrations/sun.svg      | 26 ++++-----
 src/components/ScenicHeroJourney.module.css | 63 ++++++++++++++++++---
 src/styles/tokens.css                       | 26 +++++++++
 3 files changed, 93 insertions(+), 22 deletions(-)

diff --git a/public/assets/bg-illustrations/sun.svg b/public/assets/bg-illustrations/sun.svg
index 89a064a..2775d3b 100644
--- a/public/assets/bg-illustrations/sun.svg
+++ b/public/assets/bg-illustrations/sun.svg
@@ -1,15 +1,15 @@
 <svg width="139" height="139" viewBox="0 0 139 139" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M108.635 69.2868C108.635 91.0182 91.0183 108.635 69.287 108.635C47.5556 108.635 29.9388 91.0182 29.9388 69.2868C29.9388 47.5555 47.5556 29.9387 69.287 29.9387C91.0183 29.9387 108.635 47.5555 108.635 69.2868Z" fill="#FEDB4B"/>
-<rect x="64.1548" width="10.2647" height="22.2402" fill="#FEDB4B"/>
-<rect x="64.1548" y="116.333" width="10.2647" height="22.2402" fill="#FEDB4B"/>
-<rect x="0.00012207" y="74.4192" width="10.2647" height="22.2402" transform="rotate(-90 0.00012207 74.4192)" fill="#FEDB4B"/>
-<rect x="116.334" y="74.4192" width="10.2647" height="22.2402" transform="rotate(-90 116.334 74.4192)" fill="#FEDB4B"/>
-<rect x="108.375" y="126.725" width="10.2647" height="22.2402" transform="rotate(150 108.375 126.725)" fill="#FEDB4B"/>
-<rect x="50.2089" y="25.9771" width="10.2647" height="22.2402" transform="rotate(150 50.2089 25.9771)" fill="#FEDB4B"/>
-<rect x="99.4855" y="6.71606" width="10.2647" height="22.2402" transform="rotate(30 99.4855 6.71606)" fill="#FEDB4B"/>
-<rect x="41.3184" y="107.464" width="10.2647" height="22.2402" transform="rotate(30 41.3184 107.464)" fill="#FEDB4B"/>
-<rect x="6.71667" y="39.0881" width="10.2647" height="22.2402" transform="rotate(-60 6.71667 39.0881)" fill="#FEDB4B"/>
-<rect x="107.464" y="97.2551" width="10.2647" height="22.2402" transform="rotate(-60 107.464 97.2551)" fill="#FEDB4B"/>
-<rect x="11.849" y="108.375" width="10.2647" height="22.2402" transform="rotate(-120 11.849 108.375)" fill="#FEDB4B"/>
-<rect x="112.597" y="50.208" width="10.2647" height="22.2402" transform="rotate(-120 112.597 50.208)" fill="#FEDB4B"/>
+<path d="M108.635 69.2868C108.635 91.0182 91.0183 108.635 69.287 108.635C47.5556 108.635 29.9388 91.0182 29.9388 69.2868C29.9388 47.5555 47.5556 29.9387 69.287 29.9387C91.0183 29.9387 108.635 47.5555 108.635 69.2868Z" fill="var(--hero-illus-sun, #FFE66D)"/>
+<rect x="64.1548" width="10.2647" height="22.2402" fill="var(--hero-illus-sun, #FFE66D)"/>
+<rect x="64.1548" y="116.333" width="10.2647" height="22.2402" fill="var(--hero-illus-sun, #FFE66D)"/>
+<rect x="0.00012207" y="74.4192" width="10.2647" height="22.2402" transform="rotate(-90 0.00012207 74.4192)" fill="var(--hero-illus-sun, #FFE66D)"/>
+<rect x="116.334" y="74.4192" width="10.2647" height="22.2402" transform="rotate(-90 116.334 74.4192)" fill="var(--hero-illus-sun, #FFE66D)"/>
+<rect x="108.375" y="126.725" width="10.2647" height="22.2402" transform="rotate(150 108.375 126.725)" fill="var(--hero-illus-sun, #FFE66D)"/>
+<rect x="50.2089" y="25.9771" width="10.2647" height="22.2402" transform="rotate(150 50.2089 25.9771)" fill="var(--hero-illus-sun, #FFE66D)"/>
+<rect x="99.4855" y="6.71606" width="10.2647" height="22.2402" transform="rotate(30 99.4855 6.71606)" fill="var(--hero-illus-sun, #FFE66D)"/>
+<rect x="41.3184" y="107.464" width="10.2647" height="22.2402" transform="rotate(30 41.3184 107.464)" fill="var(--hero-illus-sun, #FFE66D)"/>
+<rect x="6.71667" y="39.0881" width="10.2647" height="22.2402" transform="rotate(-60 6.71667 39.0881)" fill="var(--hero-illus-sun, #FFE66D)"/>
+<rect x="107.464" y="97.2551" width="10.2647" height="22.2402" transform="rotate(-60 107.464 97.2551)" fill="var(--hero-illus-sun, #FFE66D)"/>
+<rect x="11.849" y="108.375" width="10.2647" height="22.2402" transform="rotate(-120 11.849 108.375)" fill="var(--hero-illus-sun, #FFE66D)"/>
+<rect x="112.597" y="50.208" width="10.2647" height="22.2402" transform="rotate(-120 112.597 50.208)" fill="var(--hero-illus-sun, #FFE66D)"/>
 </svg>
diff --git a/src/components/ScenicHeroJourney.module.css b/src/components/ScenicHeroJourney.module.css
index 6614def..6f97c24 100644
--- a/src/components/ScenicHeroJourney.module.css
+++ b/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;
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index f6defb0..1bb16b5 100644
--- a/src/styles/tokens.css
+++ b/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) {