improve transition

animations.js

@@ -585,4 +585,15 @@ gsap.to(".menu-button", {
             document.querySelector('.menu-button').classList.remove('active');
         }
     }
+});
+
+// Animate body background color when approaching about section
+gsap.to("body", {
+    scrollTrigger: {
+        trigger: "#about",
+        start: "top 90%",
+        end: "top 50%",
+        scrub: 1
+    },
+    backgroundColor: "rgb(20, 30, 60)", // Brighter dark blue
 });

styles.css

@@ -179,6 +179,22 @@ body {
     transition: opacity 0.5s ease;
 }
 
+/* Add transition overlay */
+.transition-overlay {
+    position: fixed;
+    inset: 0;
+    background: radial-gradient(
+        circle at center,
+        rgba(74, 144, 226, 0.3) 0%,
+        rgba(41, 121, 255, 0.2) 50%,
+        rgba(41, 121, 255, 0.1) 100%
+    );
+    z-index: var(--z-dark-overlay);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+}
+
 /* CTA Button */
 .cta-button {
     background: transparent;