Add space backdrop and star layers to landing page for enhanced visual effects

src/app.css

@@ -54,24 +54,109 @@ a {
   position: relative;
   isolation: isolate;
   overflow: clip;
-  background:
-    radial-gradient(circle at 50% 0%, rgba(181, 140, 255, 0.22), transparent 34rem),
-    linear-gradient(to bottom, rgba(7, 0, 20, 0.18), rgba(54, 0, 95, 0.38));
+  background: var(--color-bg-deep);
 }
 
-.landing-page::before {
-  content: '';
+.space-backdrop,
+.space-backdrop::before,
+.space-backdrop::after,
+.star-layer {
+  pointer-events: none;
   position: absolute;
+  inset: 0;
   z-index: -1;
-  inset: -8svh 0;
-  background-image: url('/assets/squiggleverse-bg.webp');
-  background-position: center top;
-  background-size: cover;
-  transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.16), 0) scale(1.08);
+}
+
+.space-backdrop {
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 50% -8%, rgba(209, 183, 255, 0.2), transparent 23rem),
+    radial-gradient(ellipse at 18% 48%, rgba(112, 14, 181, 0.42), transparent 35rem),
+    radial-gradient(ellipse at 84% 50%, rgba(88, 8, 156, 0.38), transparent 34rem),
+    radial-gradient(ellipse at 50% 88%, rgba(111, 0, 185, 0.58), transparent 42rem),
+    linear-gradient(180deg, #03000b 0%, #0d001b 26%, #260047 62%, #57008f 100%);
+}
+
+.space-backdrop::before {
+  content: '';
+  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);
+  will-change: transform;
+}
+
+.space-backdrop::after {
+  content: '';
+  opacity: 0.2;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
+  background-size: 13rem 13rem;
+  mask-image: linear-gradient(to bottom, transparent, black 15%, black 86%, transparent);
+}
+
+.star-layer {
+  inset: -18svh -10vw;
+  background-repeat: repeat;
   transform-origin: center top;
   will-change: transform;
 }
 
+.star-layer-dust {
+  opacity: 0.72;
+  background-image:
+    radial-gradient(circle, rgba(255, 255, 255, 0.74) 0 0.8px, transparent 1.4px),
+    radial-gradient(circle, rgba(223, 207, 255, 0.62) 0 0.7px, transparent 1.3px),
+    radial-gradient(circle, rgba(255, 255, 255, 0.5) 0 0.6px, transparent 1.2px);
+  background-position:
+    1rem 2rem,
+    6rem 8rem,
+    11rem 4rem;
+  background-size:
+    9rem 11rem,
+    13rem 17rem,
+    19rem 23rem;
+  transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.1), 0);
+}
+
+.star-layer-far {
+  opacity: 0.78;
+  background-image:
+    radial-gradient(circle, rgba(255, 255, 255, 0.86) 0 1px, transparent 1.8px),
+    radial-gradient(circle, rgba(222, 204, 255, 0.72) 0 1px, transparent 1.7px),
+    radial-gradient(circle, rgba(255, 255, 255, 0.55) 0 0.8px, transparent 1.5px);
+  background-position:
+    2rem 4rem,
+    8rem 13rem,
+    16rem 7rem;
+  background-size:
+    17rem 19rem,
+    23rem 29rem,
+    31rem 37rem;
+  transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.14), 0);
+}
+
+.star-layer-near {
+  opacity: 0.9;
+  background-image:
+    radial-gradient(circle, rgba(255, 255, 255, 0.98) 0 1.4px, rgba(202, 181, 255, 0.48) 2.2px, transparent 8px),
+    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 1px, rgba(180, 132, 255, 0.36) 2px, transparent 6px),
+    radial-gradient(circle, rgba(255, 255, 255, 0.78) 0 1px, transparent 2px);
+  background-position:
+    4rem 6rem,
+    14rem 18rem,
+    24rem 10rem;
+  background-size:
+    24rem 31rem,
+    36rem 42rem,
+    19rem 23rem;
+  transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.28), 0);
+}
+
 .hero {
   width: min(1120px, 100%);
   min-height: 100svh;
@@ -217,9 +302,25 @@ a {
 }
 
 @media (max-width: 768px) {
-  .landing-page::before {
-    inset: -4svh 0;
-    transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.1), 0) scale(1.08);
+  .space-backdrop::before {
+    transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.05), 0);
+  }
+
+  .star-layer {
+    inset: -10svh -18vw;
+  }
+
+  .star-layer-far {
+    transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.08), 0);
+  }
+
+  .star-layer-dust {
+    opacity: 0.68;
+    transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.06), 0);
+  }
+
+  .star-layer-near {
+    transform: translate3d(0, calc(var(--parallax-y, 0px) * -0.16), 0);
   }
 
   .hero {
@@ -258,7 +359,10 @@ a {
     transition-duration: 0.001ms !important;
   }
 
-  .landing-page::before {
+  .space-backdrop::before,
+  .star-layer-dust,
+  .star-layer-far,
+  .star-layer-near {
     transform: none;
     will-change: auto;
   }