/* --- Space Parallax Design --- */

:root {
  --space-bg: #0d0517;
  --nebula-1: rgba(139, 92, 246, 0.3); /* Purple */
  --nebula-2: rgba(30, 64, 175, 0.3);  /* Blue */
  --nebula-3: rgba(236, 72, 153, 0.2); /* Pink */
}

.bg-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: radial-gradient(circle at 50% 50%, #1a0b2e 0%, var(--space-bg) 100%);
  overflow: hidden;
}

/* Star Layers */
.stars-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background: transparent;
}

.stars-1 {
  width: 1px;
  height: 1px;
  box-shadow: 
    10vw 20vh #fff, 25vw 55vh #fff, 40vw 10vh #fff, 60vw 80vh #fff, 80vw 30vh #fff,
    15vw 90vh #fff, 45vw 45vh #fff, 70vw 20vh #fff, 95vw 60vh #fff, 30vw 30vh #fff,
    12vw 15vh #fff, 35vw 75vh #fff, 55vw 25vh #fff, 75vw 85vh #fff, 90vw 40vh #fff,
    5vw 40vh #fff, 50vw 95vh #fff, 65vw 5vh #fff, 85vw 70vh #fff, 20vw 10vh #fff,
    /* Extra Stars for visibility */
    3vw 33vh #fff, 18vw 67vh #fff, 33vw 12vh #fff, 48vw 82vh #fff, 63vw 42vh #fff,
    78vw 5vh #fff, 93vw 53vh #fff, 8vw 88vh #fff, 23vw 22vh #fff, 38vw 59vh #fff;
  animation: space-rotate 140s linear infinite, twinkle 4s ease-in-out infinite alternate;
  opacity: 0.6;
}

.stars-2 {
  width: 2px;
  height: 2px;
  box-shadow: 
    5vw 15vh #fff, 30vw 40vh #fff, 55vw 60vh #fff, 80vw 25vh #fff, 15vw 75vh #fff,
    45vw 10vh #fff, 75vw 90vh #fff, 90vw 55vh #fff, 25vw 85vh #fff, 60vw 35vh #fff,
    /* Extra Stars */
    12vw 45vh #fff, 37vw 15vh #fff, 62vw 85vh #fff, 87vw 35vh #fff, 2vw 65vh #fff;
  animation: space-rotate 90s linear infinite reverse, twinkle 5s ease-in-out infinite alternate-reverse;
  opacity: 0.8;
}

.stars-3 {
  width: 3px;
  height: 3px;
  box-shadow: 
    20vw 35vh #fff, 50vw 80vh #fff, 85vw 15vh #fff, 10vw 60vh #fff, 40vw 25vh #fff,
    70vw 55vh #fff, 95vw 90vh #fff, 30vw 10vh #fff, 60vw 70vh #fff, 15vw 20vh #fff,
    /* Extra Stars */
    5vw 5vh #fff, 25vw 95vh #fff, 45vw 55vh #fff, 65vw 15vh #fff, 85vw 85vh #fff;
  animation: space-rotate 70s linear infinite, twinkle 3s ease-in-out infinite alternate;
  opacity: 1;
}

@keyframes space-rotate {
  from { transform: translate(-25%, -25%) rotate(0deg); }
  to { transform: translate(-25%, -25%) rotate(360deg); }
}

@keyframes twinkle {
  0% { opacity: 0.4; transform: translate(-25%, -25%) scale(0.8); }
  100% { opacity: 1; transform: translate(-25%, -25%) scale(1.1); }
}

/* Nebula Orbs */
.nebula {
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(120px);
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: screen;
}

.nebula-1 {
  background: var(--nebula-1);
  top: -20%;
  left: -10%;
  animation: nebula-drift 40s infinite alternate ease-in-out;
}

.nebula-2 {
  background: var(--nebula-2);
  bottom: -20%;
  right: -10%;
  animation: nebula-drift 50s infinite alternate-reverse ease-in-out;
}

.nebula-3 {
  background: var(--nebula-3);
  top: 40%;
  left: 30%;
  width: 40vmax;
  height: 40vmax;
  animation: nebula-drift 35s infinite alternate ease-in-out;
}

@keyframes nebula-drift {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { transform: translate(10vw, 10vh) scale(1.2) rotate(15deg); }
}

/* Parallax adjustment for scroll */
@media (prefers-reduced-motion: no-preference) {
  .bg-animation {
    background-attachment: fixed;
  }
}

/* Accessibility: Disable animations for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .stars-layer, .nebula {
    animation: none !important;
  }
}