add Planets,Asteroid Belt and Colorful Nebulae

[ZHaiiiNINnnG]

1. Ringed Planet
   What was added
   • A new decorative planet with a visible ring system.
   How it was implemented
   • A circular
   styled with a radial gradient to simulate planetary lighting.
   • A ::before pseudo-element creates the planetary ring using an elliptical border rotated at an angle.
   Design intent
   • Placed in the upper-right area of the viewport.
   • Acts as a major visual anchor, balancing the spaceship in the center.
   • Enhances depth and realism of the space scene.
2. Regular Planet
   What was added
   • A smaller, ringless planet.
   How it was implemented
   • A simple circular
   with a warm-colored radial gradient.
   • Inner shadow simulates spherical shading.
   Design intent
   • Positioned in the lower-left region.
   • Uses warm tones to contrast with the cool blue background.
   • Helps distribute visual weight diagonally across the canvas.
3. Asteroid Belt
   What was added
   • A horizontal asteroid belt crossing the scene.
   How it was implemented
   • A container
   holding multiple small asteroid elements.
   • Each asteroid is an individually positioned circle with inset shadows.
   Design intent
   • Adds mid-ground detail between background stars and the foreground spaceship.
   • Enhances spatial layering and scale perception.
   • The belt subtly guides the viewer’s eye across the composition.
4. Colorful Nebulae
   What was added
   • Two large nebula clouds with different color schemes.
   How it was implemented
   • Large absolutely positioned
   elements.
   • Radial gradients combined with heavy blur filters.
   • Semi-transparent colors (pink, blue, cyan, purple).
   Design intent
   • Serve as distant background elements.
   • Provide atmospheric depth without distracting from the spaceship.
   • Add color richness and a sci-fi aesthetic.
5. Layout and Integration Principles
   • All decorative elements use position: absolute and are independent of the spaceship animation.
   • No existing CSS selectors or HTML structures were altered.
   • Z-order naturally places:
   o Nebulae in the far background
   o Planets and asteroid belt in the mid-ground
   o Spaceship as the foreground focal point
   • The overall composition follows a triangular balance to maintain visual harmony.