/* ===== Space Theme Styles ===== */

/* Space Background */
.hero-background {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
}

/* Stars Layers */
.stars-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: repeat;
  animation: drift linear infinite;
}

#stars-1 {
  background-image: radial-gradient(2px 2px at 20px 30px, #eee, transparent),
                    radial-gradient(2px 2px at 40px 70px, #eee, transparent),
                    radial-gradient(1px 1px at 50px 20px, #fff, transparent),
                    radial-gradient(1px 1px at 80px 10px, #fff, transparent),
                    radial-gradient(2px 2px at 110px 80px, #eee, transparent);
  background-size: 200px 200px;
  animation-duration: 120s;
  opacity: 0.8;
}

#stars-2 {
  background-image: radial-gradient(1px 1px at 30px 40px, #fff, transparent),
                    radial-gradient(2px 2px at 60px 80px, #eee, transparent),
                    radial-gradient(1px 1px at 90px 30px, #fff, transparent);
  background-size: 150px 150px;
  animation-duration: 180s;
  opacity: 0.6;
}

#stars-3 {
  background-image: radial-gradient(1px 1px at 130px 80px, #fff, transparent),
                    radial-gradient(1px 1px at 80px 50px, #fff, transparent);
  background-size: 100px 100px;
  animation-duration: 240s;
  opacity: 0.4;
}

@keyframes drift {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}

/* Nebula Effect */
.nebula-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(123, 97, 255, 0.1) 50%, transparent 100%);
  filter: blur(40px);
  animation: nebulaPulse 20s ease-in-out infinite;
}

@keyframes nebulaPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

/* Space Canvas for interactive elements */
#space-canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Solar System */
.solar-system {
  position: relative;
  width: min(500px, 80vw);
  height: min(500px, 80vw);
  margin: 0 auto;
  transform-style: preserve-3d;
  animation: systemRotate 60s linear infinite;
}

@media (max-width: 768px) {
  .solar-system {
    width: 300px;
    height: 300px;
  }
}

@keyframes systemRotate {
  from { transform: rotateZ(0deg); }
  to { transform: rotateZ(360deg); }
}

.sun {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFD700 0%, #FFA500 70%, #FF6347 100%);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 60px #FFA500,
              0 0 100px #FF6347,
              0 0 200px #FFD700,
              inset 0 0 30px #FFD700;
  animation: sunPulse 4s ease-in-out infinite;
}

@keyframes sunPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
}

.orbit {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.orbit-1 {
  width: 200px;
  height: 200px;
  animation: orbit 20s linear infinite;
}

.orbit-2 {
  width: 300px;
  height: 300px;
  animation: orbit 35s linear infinite;
}

.orbit-3 {
  width: 400px;
  height: 400px;
  animation: orbit 50s linear infinite;
}

@keyframes orbit {
  from { transform: translate(-50%, -50%) rotateZ(0deg); }
  to { transform: translate(-50%, -50%) rotateZ(-360deg); }
}

.planet {
  position: absolute;
  border-radius: 50%;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}

.planet-1 {
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #00FFA3 0%, #00CC82 100%);
  box-shadow: 0 0 20px #00FFA3;
}

.planet-2 {
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, #7B61FF 0%, #5A3FCC 100%);
  box-shadow: 0 0 30px #7B61FF;
}

.planet-3 {
  width: 25px;
  height: 25px;
  background: radial-gradient(circle, #FF006E 0%, #CC0056 100%);
  box-shadow: 0 0 25px #FF006E;
}

/* Space Journey Sections */
.space-section {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.space-section::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(9, 10, 15, 0.8) 100%);
  pointer-events: none;
}

/* Asteroid Field */
.asteroid-field {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.asteroid {
  position: absolute;
  background: #666;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  animation: floatAsteroid 20s linear infinite;
  opacity: 0.6;
}

@keyframes floatAsteroid {
  from {
    transform: translateX(-100px) translateY(100vh) rotate(0deg);
  }
  to {
    transform: translateX(calc(100vw + 100px)) translateY(-100px) rotate(360deg);
  }
}

/* Comet Trail */
.comet {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: shootComet 3s linear infinite;
}

.comet::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 2px;
  background: linear-gradient(to left, transparent, white);
  right: 2px;
  top: 0;
}

@keyframes shootComet {
  from {
    transform: translateX(100vw) translateY(-100px);
    opacity: 1;
  }
  to {
    transform: translateX(-200px) translateY(100vh);
    opacity: 0;
  }
}

/* Galaxy Swirl */
.galaxy-swirl {
  position: absolute;
  width: 600px;
  height: 600px;
  background: conic-gradient(from 0deg, transparent, rgba(123, 97, 255, 0.2), transparent, rgba(0, 255, 163, 0.2), transparent);
  border-radius: 50%;
  animation: galaxyRotate 30s linear infinite;
  filter: blur(20px);
  opacity: 0.5;
}

@keyframes galaxyRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Shooting Stars */
.shooting-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  box-shadow: 0 0 6px 2px white;
  animation: shoot 1s linear;
  animation-fill-mode: forwards;
}

.shooting-star::after {
  content: '';
  position: absolute;
  width: 150px;
  height: 1px;
  background: linear-gradient(to left, transparent, white);
  transform: translateY(-50%);
  right: 2px;
  top: 50%;
}

@keyframes shoot {
  from {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
  to {
    transform: translateX(-500px) translateY(300px);
    opacity: 0;
  }
}

/* Constellation Lines */
.constellation {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.constellation-line {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1;
  fill: none;
  animation: drawLine 2s ease-in-out infinite alternate;
}

@keyframes drawLine {
  from {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Parallax Scroll Effect */
.parallax-layer {
  position: absolute;
  width: 100%;
  height: 120%;
  will-change: transform;
}

.parallax-layer-1 {
  transform: translateZ(-1px) scale(2);
}

.parallax-layer-2 {
  transform: translateZ(-2px) scale(3);
}

.parallax-layer-3 {
  transform: translateZ(-3px) scale(4);
}

/* Space Dust Particles */
.space-dust {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 30%, white 1px, transparent 1px),
    radial-gradient(circle at 60% 70%, white 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, white 1px, transparent 1px);
  background-size: 500px 500px;
  animation: dustFloat 100s linear infinite;
  opacity: 0.3;
}

@keyframes dustFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-500px); }
}

/* Space Transitions */
.space-transition {
  position: relative;
  width: 100%;
  height: 15vh;
  min-height: 100px;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #1b2735 0%, #090a0f 100%);
}

@media (max-width: 768px) {
  .space-transition {
    height: 10vh;
    min-height: 60px;
  }
}

/* Update hero title for space theme */
.hero-title {
  background: linear-gradient(135deg, #FFD700 0%, #00FFA3 50%, #7B61FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  animation: cosmicShimmer 3s ease-in-out infinite;
}

@keyframes cosmicShimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
}

/* Space-themed buttons */
.btn-primary {
  background: linear-gradient(135deg, #00FFA3 0%, #00CC82 100%);
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: btnShine 3s infinite;
}

@keyframes btnShine {
  to { left: 100%; }
}

/* Space Journey Progress */
.journey-progress {
  position: fixed;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

@media (max-width: 768px) {
  .journey-progress {
    display: none;
  }
}

.journey-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  margin: 20px 0;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.journey-dot.active {
  background: #00FFA3;
  box-shadow: 0 0 20px #00FFA3;
}

.journey-dot::after {
  content: attr(data-section);
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}

.journey-dot:hover::after {
  opacity: 1;
}