Big Boom

starpilot/system/the_galaxy/assets/mobile/css/material.css

@@ -242,12 +242,16 @@ body {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  #galaxy-bg, #galaxy-bg::before, #galaxy-bg::after, #galaxy-bg .galaxy-hero,
-  #galaxy-stars, #galaxy-stars .galaxy-hero {
+  #galaxy-bg, #galaxy-bg::before, #galaxy-bg::after, #galaxy-bg .galaxy-hero {
     animation: none !important;
   }
 }
 
+/* Keep decorative animation out of modal backdrops and drawer content. */
+body:has(.gx-scrim, .gx-underlay, .gx-drawer.open) #galaxy-bg .galaxy-hero {
+  display: none;
+}
+
 [data-theme="light"] #galaxy-bg {
   background-color: #eef1fb;
   background-image:
@@ -625,50 +629,6 @@ body.is-scrolling .gx-tile {
   background: var(--card-scroll-bg) !important;
 }
 
-/* Layer 2: Celestial Starlight Canopy */
-#galaxy-stars {
-  position: fixed;
-  inset: 0;
-  z-index: 20;
-  pointer-events: none;
-  overflow: hidden;
-  contain: strict;
-  transform: translateZ(0);
-}
-
-#galaxy-stars .galaxy-hero {
-  position: absolute;
-  border-radius: 50%;
-  background: radial-gradient(
-    circle,
-    rgba(255, 255, 255, 0.95) 0%,
-    rgba(157, 114, 255, 0.65) 35%,
-    rgba(77, 232, 232, 0.2) 65%,
-    transparent 100%
-  );
-  box-shadow:
-    0 0 8px rgba(157, 114, 255, 0.4),
-    0 0 3px rgba(255, 255, 255, 0.8);
-  mix-blend-mode: screen;
-  will-change: transform, opacity;
-  animation: galaxy-twinkle 6s ease-in-out infinite alternate;
-}
-
-/* Keep decorative animation out of modal backdrops and drawer content. */
-body:has(.gx-scrim, .gx-underlay, .gx-drawer.open) #galaxy-stars {
-  display: none;
-}
-
-[data-theme="light"] #galaxy-stars {
-  opacity: 0.4;
-}
-
-[data-theme="light"] #galaxy-stars .galaxy-hero {
-  background: radial-gradient(circle at center, #7849e8 0%, #b38fff 60%, rgba(120, 73, 232, 0) 100%);
-  box-shadow: 0 0 4px rgba(120, 73, 232, 0.45), 0 0 8px rgba(77, 232, 232, 0.3);
-  mix-blend-mode: normal;
-}
-
 .gx-unit-note {
   align-items: center;
   background: var(--primary-container);

starpilot/system/the_galaxy/assets/mobile/index.html

@@ -34,7 +34,6 @@
   <div id="galaxy-app" v-cloak>
     <app-shell></app-shell>
   </div>
-  <div id="galaxy-stars" aria-hidden="true"></div>
   <!-- Snackbar for messages -->
   <div id="snackbar_wrapper"></div>
   <script type="module" src="/assets/mobile/js/app.js"></script>

starpilot/system/the_galaxy/assets/mobile/js/app.js

@@ -154,23 +154,18 @@ initRouter()
   }, { passive: true })
 })()
 
-// Layer 2 Celestial Starlight Canopy Spawner
+// Layer 2: Ambient Hero Stars Spawner
 ;(() => {
-  const container = document.getElementById("galaxy-stars") || document.getElementById("galaxy-bg")
-  if (!container) return
+  const bg = document.getElementById("galaxy-bg")
+  if (!bg) return
   for (let i = 0; i < 14; i++) {
     const s = document.createElement("i")
     s.className = "galaxy-hero"
-    const inTopCanopy = Math.random() < 0.7
-    const topPercent = inTopCanopy ? Math.random() * 28 : Math.random() * 95
-    const leftPercent = inTopCanopy
-      ? Math.random() * 96 + 2
-      : Math.random() < 0.5 ? Math.random() * 12 + 2 : Math.random() * 12 + 86
-    s.style.left = leftPercent.toFixed(2) + "%"
-    s.style.top = topPercent.toFixed(2) + "%"
+    s.style.left = (Math.random() * 100).toFixed(2) + "%"
+    s.style.top = (Math.random() * 100).toFixed(2) + "%"
     s.style.animationDelay = (Math.random() * 4).toFixed(2) + "s"
-    const size = Math.random() > 0.5 ? 6 : 4
+    const size = Math.random() > 0.6 ? 3 : 2
     s.style.width = s.style.height = size + "px"
-    container.appendChild(s)
+    bg.appendChild(s)
   }
 })()