feat: star background

assets/style.css

@@ -72,30 +72,118 @@ body {
 
 .space {
   position: fixed;
-  inset: -5% -5% -5% -5%;
+  inset: 0;
   z-index: -1;
   overflow: hidden;
   pointer-events: none;
+  background:
+    radial-gradient(55% 45% at 85% 6%, rgba(111, 227, 176, 0.07), transparent 70%),
+    radial-gradient(60% 50% at 8% 92%, rgba(110, 130, 255, 0.08), transparent 70%);
+}
+
+.space::before,
+.space::after {
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+  animation: nebula 50s ease-in-out infinite alternate;
   will-change: transform;
 }
 
+.space::before {
+  top: -14vmax;
+  left: -18vmax;
+  width: 75vmax;
+  height: 55vmax;
+  background: radial-gradient(closest-side, rgba(120, 140, 255, 0.17), rgba(80, 200, 210, 0.07) 55%, transparent);
+}
+
+.space::after {
+  right: -22vmax;
+  bottom: -26vmax;
+  width: 70vmax;
+  height: 65vmax;
+  background: radial-gradient(closest-side, rgba(180, 120, 255, 0.15), rgba(240, 150, 120, 0.06) 55%, transparent);
+  animation-duration: 64s;
+  animation-direction: alternate-reverse;
+}
+
+.space__layer {
+  position: absolute;
+  inset: -4%;
+  will-change: transform;
+  animation: drift var(--dur, 240s) linear infinite alternate;
+}
+
+.space__layer--far {
+  --dur: 300s;
+  --dx: -1.5%;
+  --dy: 2%;
+}
+
+.space__layer--near {
+  --dur: 180s;
+  --dx: -3%;
+  --dy: 3.5%;
+}
+
 .space__star {
   position: absolute;
-  left: 0;
-  top: 0;
   border-radius: 50%;
-  background: #ffffff;
+  background: var(--c, #fff);
+  box-shadow: 0 0 var(--g, 3px) var(--c, #fff);
+  opacity: var(--o, 0.6);
+  animation: twinkle var(--t, 5s) ease-in-out var(--d, 0s) infinite;
 }
 
-.space__nebula {
+.space__meteor {
   position: absolute;
-  border-radius: 50%;
-  filter: blur(80px);
-  will-change: transform, opacity;
+  width: clamp(90px, 12vmax, 170px);
+  height: 1.5px;
+  border-radius: 2px;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
+  box-shadow: 0 0 6px rgba(190, 215, 255, 0.5);
+  opacity: 0;
+  animation: meteor var(--t, 12s) linear var(--d, 4s) infinite;
+}
+
+@keyframes nebula {
+  from { transform: translate3d(0, 0, 0) scale(1); }
+  to { transform: translate3d(4vw, 3vh, 0) scale(1.1); }
+}
+
+@keyframes drift {
+  to { transform: translate3d(var(--dx, -2%), var(--dy, 3%), 0); }
+}
+
+@keyframes twinkle {
+  0%, 100% { opacity: var(--o, 0.6); }
+  50% { opacity: calc(var(--o, 0.6) * 0.3); }
+}
+
+@keyframes meteor {
+  0% {
+    opacity: 0;
+    transform: rotate(var(--a, 145deg)) translateX(0);
+  }
+  1.5% {
+    opacity: 0.9;
+  }
+  7%, 100% {
+    opacity: 0;
+    transform: rotate(var(--a, 145deg)) translateX(55vmax);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .space {
+  .space::before,
+  .space::after,
+  .space__layer,
+  .space__star {
+    animation: none;
+  }
+
+  .space__meteor {
     display: none;
   }
 }