/**
 * Space Background for Raygun Divider
 * Hybrid: Star field + perspective grid + distant planet
 * Theme-reactive, animated
 */

/* ============================================
   CONTAINER
   ============================================ */

.raygun-divider-section {
  position: relative;
  overflow: hidden;
  /* Light mode: Visible dimension - lighter blue-gray center */
  background: radial-gradient(
    ellipse at 50% 40%,
    #3a4560 0%,
    #1a2535 30%,
    #0a0f1a 60%,
    #000000 100%
  );
}

[data-theme="dark"] .raygun-divider-section {
  /* Dark mode: Deep blue with visible depth */
  background: radial-gradient(
    ellipse at 50% 40%,
    #2a4268 0%,
    #1a2845 30%,
    #0a1020 60%,
    #000000 100%
  );
}

/* REMOVED: Using direct values instead of undefined variables */

/* ============================================
   STAR FIELD
   ============================================ */

.space-stars {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}

/* Layer 1: Small stars (far away) */
.space-stars::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow:
    147px 223px #ffffff,
    721px 389px #ffffff,
    321px 147px #ffffff,
    891px 512px #ffffff,
    467px 89px #ffffff,
    612px 334px #ffffff,
    234px 478px #ffffff,
    789px 123px #ffffff,
    456px 567px #ffffff,
    923px 234px #ffffff,
    178px 401px #ffffff,
    534px 678px #ffffff,
    890px 445px #ffffff,
    267px 612px #ffffff,
    745px 178px #ffffff,
    398px 289px #ffffff,
    623px 501px #ffffff,
    134px 334px #ffffff,
    867px 567px #ffffff,
    412px 123px #ffffff,
    678px 445px #ffffff,
    201px 289px #ffffff,
    534px 90px #ffffff,
    789px 612px #ffffff,
    345px 234px #ffffff;
  animation: twinkle 3s infinite ease-in-out;
}

/* Layer 2: Medium stars (mid-distance) */
.space-stars::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow:
    412px 156px #ffffff,
    623px 478px #ffffff,
    234px 89px #ffffff,
    845px 312px #ffffff,
    567px 234px #ffffff,
    123px 501px #ffffff,
    789px 178px #ffffff,
    456px 423px #ffffff,
    890px 556px #ffffff,
    201px 289px #ffffff,
    678px 90px #ffffff,
    345px 612px #ffffff,
    512px 367px #ffffff,
    734px 445px #ffffff,
    289px 534px #ffffff;
  animation: twinkle 4s infinite ease-in-out 0.5s;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.3; }
}

/* ============================================
   PERSPECTIVE GRID
   ============================================ */

.space-grid {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 1; /* Removed opacity - using stroke opacity instead */
}

.space-grid svg {
  width: 100%;
  height: 100%;
}

/* Grid animation removed - was causing visible jump on loop */

/* ============================================
   DISTANT PLANET
   ============================================ */

.space-planet {
  position: absolute;
  left: 40%;
  top: 60%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  z-index: 0; /* Above grid, behind laser/brain (z-index 10/20) */
  pointer-events: none;
  opacity: 0.7;
  filter: drop-shadow(0 0 30px rgba(100, 150, 255, 0.3));
  animation: planetFloat 8s ease-in-out infinite;
}

.space-planet img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated; /* Crisp pixel art */
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  transition: opacity 0.6s ease-in-out;
}

[data-theme="dark"] .space-planet {
  opacity: 0.8;
  filter: drop-shadow(0 0 40px rgba(120, 170, 255, 0.4));
}

@keyframes planetFloat {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -52%) scale(1.02);
  }
}

/* Mobile: smaller planet, simpler */
@media (max-width: 768px) {
  .space-planet {
    width: 100px;
    height: 100px;
    opacity: 0.5;
  }

  /* Disable animations on mobile for performance */
  .space-stars::before,
  .space-stars::after {
    animation: none;
  }

  .space-grid {
    animation: none;
  }

  .space-planet {
    animation: none;
    opacity: 0.6;
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .space-stars::before,
  .space-stars::after,
  .space-grid,
  .space-planet {
    animation: none !important;
  }
}