feat: ci/cd

app/globals.css

@@ -82,6 +82,11 @@ svg {
 }
 
 .stellar-page::before {
+  --star-opacity-high: 1;
+  --star-opacity-low: 0.68;
+  --star-opacity-mid: 0.78;
+
+  inset: -260px -160px;
   background-image:
     radial-gradient(circle, rgb(255 255 255 / 90%) 1px, transparent 1.5px),
     radial-gradient(circle, rgb(0 231 255 / 65%) 1px, transparent 1.5px),
@@ -94,14 +99,22 @@ svg {
     86px 86px,
     142px 142px,
     230px 230px;
-  animation: star-drift 120s linear infinite;
+  opacity: 0.82;
+  animation:
+    star-drift 105s linear infinite,
+    star-twinkle 5.6s ease-in-out infinite alternate;
+  will-change: transform, opacity, filter;
 }
 
 .stellar-page::after {
   background:
+    radial-gradient(circle, rgb(255 255 255 / 70%) 1px, transparent 1.6px) 12px 22px / 166px 166px,
+    radial-gradient(circle, rgb(255 213 74 / 38%) 1px, transparent 1.8px) 72px 108px / 270px 270px,
     linear-gradient(180deg, transparent 0%, rgb(0 231 255 / 6%) 58%, rgb(51 232 121 / 10%) 100%),
     radial-gradient(ellipse at 30% 80%, rgb(139 77 255 / 18%), transparent 38%),
     radial-gradient(ellipse at 80% 70%, rgb(0 231 255 / 13%), transparent 32%);
+  animation: star-glow 12s ease-in-out infinite alternate;
+  will-change: opacity;
 }
 
 .home-shell {
@@ -510,13 +523,21 @@ svg {
 }
 
 .astroneer-hero::before {
+  --star-opacity-high: 0.66;
+  --star-opacity-low: 0.42;
+  --star-opacity-mid: 0.5;
+
   position: absolute;
-  inset: 0;
+  inset: -180px;
   background:
     radial-gradient(circle, rgb(255 255 255 / 80%) 1px, transparent 1.5px) 0 0 / 96px 96px,
     radial-gradient(circle, rgb(109 244 255 / 65%) 1px, transparent 1.5px) 44px 18px / 148px 148px;
   content: "";
   opacity: 0.55;
+  animation:
+    astroneer-star-drift 92s linear infinite,
+    star-twinkle 6.5s ease-in-out infinite alternate;
+  will-change: transform, opacity, filter;
 }
 
 .astroneer-hero::after {
@@ -1079,11 +1100,49 @@ h2.pixel-heading {
 
 @keyframes star-drift {
   from {
-    transform: translateY(0);
+    transform: translate3d(0, 0, 0);
   }
 
   to {
-    transform: translateY(-220px);
+    transform: translate3d(-120px, -220px, 0);
+  }
+}
+
+@keyframes astroneer-star-drift {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    transform: translate3d(-90px, -180px, 0);
+  }
+}
+
+@keyframes star-twinkle {
+  0%,
+  100% {
+    filter: brightness(0.92);
+    opacity: var(--star-opacity-low, 0.68);
+  }
+
+  45% {
+    filter: brightness(1.28);
+    opacity: var(--star-opacity-high, 1);
+  }
+
+  72% {
+    filter: brightness(1.05);
+    opacity: var(--star-opacity-mid, 0.78);
+  }
+}
+
+@keyframes star-glow {
+  from {
+    opacity: 0.78;
+  }
+
+  to {
+    opacity: 1;
   }
 }