From 0c69b1fe0ea11c36ac20f7a3285bb3ccc57db196 Mon Sep 17 00:00:00 2001
From: Ben <ben@ben.us.com>
Date: Thu, 9 Jul 2026 10:03:08 -0700
Subject: [PATCH] Enhance space backdrop and star layer effects with improved
 positioning and parallax adjustments

---
 src/app.css | 36 ++++++++++++++++++++++++++----------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/app.css b/src/app.css
index 9f5e8f5..063770f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -62,12 +62,12 @@ a {
 .space-backdrop::after,
 .star-layer {
   pointer-events: none;
-  position: absolute;
   inset: 0;
   z-index: -1;
 }
 
 .space-backdrop {
+  position: fixed;
   overflow: hidden;
   background:
     radial-gradient(circle at 50% -8%, rgba(209, 183, 255, 0.2), transparent 23rem),
@@ -79,18 +79,20 @@ a {
 
 .space-backdrop::before {
   content: '';
+  position: absolute;
   inset: -16svh -8vw;
   background:
     radial-gradient(ellipse at 12% 32%, rgba(111, 42, 173, 0.22), transparent 28rem),
     radial-gradient(ellipse at 88% 28%, rgba(102, 54, 176, 0.18), transparent 24rem),
     radial-gradient(ellipse at 50% 83%, rgba(113, 0, 178, 0.44), transparent 35rem);
   filter: blur(18px);
-  transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.08), 0);
+  transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.14), 0);
   will-change: transform;
 }
 
 .space-backdrop::after {
   content: '';
+  position: absolute;
   opacity: 0.2;
   background-image:
     linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
@@ -100,6 +102,7 @@ a {
 }
 
 .star-layer {
+  position: absolute;
   inset: -18svh -10vw;
   background-repeat: repeat;
   transform-origin: center top;
@@ -120,7 +123,7 @@ a {
     9rem 11rem,
     13rem 17rem,
     19rem 23rem;
-  transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.1), 0);
+  transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.16), 0);
 }
 
 .star-layer-far {
@@ -137,7 +140,7 @@ a {
     17rem 19rem,
     23rem 29rem,
     31rem 37rem;
-  transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.14), 0);
+  transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.24), 0);
 }
 
 .star-layer-near {
@@ -154,7 +157,7 @@ a {
     24rem 31rem,
     36rem 42rem,
     19rem 23rem;
-  transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.28), 0);
+  transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.48), 0);
 }
 
 .hero {
@@ -302,25 +305,38 @@ a {
 }
 
 @media (max-width: 768px) {
+  .space-backdrop {
+    background:
+      radial-gradient(circle at 50% -4%, rgba(170, 132, 232, 0.1), transparent 17rem),
+      radial-gradient(ellipse at 6% 42%, rgba(76, 10, 130, 0.11), transparent 18rem),
+      radial-gradient(ellipse at 94% 48%, rgba(56, 5, 107, 0.1), transparent 19rem),
+      radial-gradient(ellipse at 50% 86%, rgba(89, 0, 151, 0.16), transparent 27rem),
+      linear-gradient(180deg, #020007 0%, #03000a 30%, #060011 58%, #0d001d 82%, #020007 100%);
+  }
+
   .space-backdrop::before {
-    transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.05), 0);
+    background:
+      radial-gradient(ellipse at 8% 32%, rgba(95, 35, 154, 0.08), transparent 18rem),
+      radial-gradient(ellipse at 92% 34%, rgba(82, 38, 145, 0.07), transparent 17rem),
+      radial-gradient(ellipse at 52% 86%, rgba(102, 0, 176, 0.12), transparent 25rem);
+    transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.12), 0);
   }
 
   .star-layer {
-    inset: -10svh -18vw;
+    inset: -16svh -20vw;
   }
 
   .star-layer-far {
-    transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.08), 0);
+    transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.2), 0);
   }
 
   .star-layer-dust {
     opacity: 0.68;
-    transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.06), 0);
+    transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.12), 0);
   }
 
   .star-layer-near {
-    transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.16), 0);
+    transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.38), 0);
   }
 
   .hero {