/* Cosmic Loader Styles */
.cosmic-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, #0a0e24 0%, #000000 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1000;
  overflow: hidden;
}

/* Galaxy Animation */
.galaxy {
  position: relative;
  width: 200px;
  height: 200px;
  animation: rotate-galaxy 20s linear infinite;
}

.galaxy-core {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #9d52ff 0%, #5e2bff 70%, #3a1b99 100%);
  border-radius: 50%;
  box-shadow: 0 0 40px #7a3dff;
}

.galaxy-arm {
  position: absolute;
  width: 200px;
  height: 20px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(157, 82, 255, 0.7) 30%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(157, 82, 255, 0.7) 70%,
    transparent 100%
  );
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform-origin: left center;
}

.arm-1 {
  transform: translate(0, -50%) rotate(0deg);
}
.arm-2 {
  transform: translate(0, -50%) rotate(90deg);
}
.arm-3 {
  transform: translate(0, -50%) rotate(180deg);
}
.arm-4 {
  transform: translate(0, -50%) rotate(270deg);
}

/* Stars */
.stars {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.star {
  position: absolute;
  width: 3px; /* Adjusted to match the most common size */
  height: 3px;
  border-radius: 50%;
  background: white;
  filter: drop-shadow(0 0 2px white);
  animation: twinkle 5s infinite alternate;
}

.star-1 {
  top: 20%;
  left: 30%;
  animation-delay: 0s;
}
.star-2 {
  top: 40%;
  left: 70%;
  animation-delay: 0.5s;
}
.star-3 {
  top: 60%;
  left: 20%;
  animation-delay: 1s;
}
.star-4 {
  top: 30%;
  left: 80%;
  animation-delay: 1.5s;
}
.star-5 {
  top: 70%;
  left: 60%;
  animation-delay: 2s;
}
.star-6 {
  top: 10%;
  left: 50%;
  animation-delay: 2.5s;
}
.star-7 {
  top: 80%;
  left: 30%;
  animation-delay: 3s;
}
.star-8 {
  top: 25%;
  left: 10%;
  animation-delay: 3.5s;
}

/* Cosmic Text */
.cosmic-text {
  text-align: center;
  margin-top: 50px;
  position: relative;
  z-index: 10;
}

.welcome-text {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(to right, #9d52ff, #5e2bff, #00d4ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1rem;
  text-shadow: 0 0 10px rgba(157, 82, 255, 0.3);
  animation: pulse-text 2s infinite alternate;
}

.loading-text {
  color: #a0a8ff;
  font-size: 1.2rem;
  animation: pulse-opacity 2s infinite;
}

/* Animations */
@keyframes rotate-galaxy {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes twinkle {
  0% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 0 10px white;
  }
}

@keyframes pulse-text {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.05);
  }
}

@keyframes pulse-opacity {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

/* Alien UAV Cursor Styles */
.alien-uav {
  position: fixed;
  width: 64px;
  height: 64px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  filter: drop-shadow(0 0 12px rgba(0, 255, 127, 0.7));
  transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.uav-core {
  position: relative;
  width: 100%;
  height: 100%;
}

.uav-body {
  position: absolute;
  width: 40px;
  height: 40px;
  background: radial-gradient(ellipse at center, #004aad 0%, #001f4d 100%);
  border-radius: 50%;
  top: 12px;
  left: 12px;
  box-shadow: 0 0 15px rgba(0, 74, 173, 0.8),
    inset 0 0 20px rgba(0, 255, 127, 0.3);
  transform-style: preserve-3d;
}

.uav-ring {
  position: absolute;
  width: 64px;
  height: 64px;
  border: 2px solid rgba(0, 255, 127, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 255, 127, 0.5),
    inset 0 0 10px rgba(0, 255, 127, 0.5);
  animation: rotate 20s linear infinite;
}

.uav-ring:nth-child(2) {
  width: 52px;
  height: 52px;
  top: 6px;
  left: 6px;
  animation: rotate-reverse 15s linear infinite;
  border-color: rgba(0, 74, 173, 0.8);
}

.uav-ring:nth-child(3) {
  width: 76px;
  height: 76px;
  top: -6px;
  left: -6px;
  animation: rotate 25s linear infinite;
  border-color: rgba(0, 255, 127, 0.4);
}

.energy-core {
  position: absolute;
  width: 16px;
  height: 16px;
  background: radial-gradient(ellipse at center, #00ff7f 0%, #004aad 100%);
  border-radius: 50%;
  top: 24px;
  left: 24px;
  box-shadow: 0 0 10px #00ff7f, 0 0 20px #00ff7f;
  animation: pulse 2s infinite alternate;
  z-index: 2;
}

.energy-tendrils {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0, 255, 127, 0.1) 100%
  );
  border-radius: 50%;
  animation: pulse-tendrils 3s infinite alternate;
}

.uav-sensors {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #00ff7f;
  border-radius: 50%;
  box-shadow: 0 0 5px #00ff7f;
  animation: blink 4s infinite;
}

.sensor-1 {
  top: 8px;
  left: 8px;
}
.sensor-2 {
  top: 8px;
  right: 8px;
}
.sensor-3 {
  bottom: 8px;
  left: 8px;
}
.sensor-4 {
  bottom: 8px;
  right: 8px;
}

.alien-uav-hover {
  transform: translate(-50%, -50%) scale(1.4);
  filter: drop-shadow(0 0 20px rgba(0, 255, 127, 0.9));
}

.alien-uav-hover .uav-body {
  box-shadow: 0 0 25px rgba(0, 74, 173, 1),
    inset 0 0 30px rgba(0, 255, 127, 0.5);
}

.alien-uav-hover .energy-core {
  animation: pulse-fast 0.5s infinite alternate;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-reverse {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.1);
    opacity: 1;
  }
}

@keyframes pulse-fast {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px #00ff7f, 0 0 20px #00ff7f;
  }
  100% {
    transform: scale(1.2);
    box-shadow: 0 0 15px #00ff7f, 0 0 30px #00ff7f;
  }
}

@keyframes pulse-tendrils {
  0% {
    transform: scale(1);
    opacity: 0.3;
  }
  100% {
    transform: scale(1.1);
    opacity: 0.6;
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

/* Energy trail effect */
.uav-trail {
  position: fixed;
  width: 8px;
  height: 8px;
  background: #00ff7f;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  filter: blur(1px);
  box-shadow: 0 0 10px #00ff7f;
}

.trail-active {
  opacity: 0.7;
}

/* Cosmic Overlay */
.space-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
  background: radial-gradient(
    ellipse at center,
    rgba(5, 5, 15, 0.1) 0%,
    transparent 70%
  );
}

/* Fluid Space Particles */
.space-particle {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  opacity: 0;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  background: radial-gradient(
    circle,
    rgba(180, 200, 255, 0.6) 0%,
    transparent 70%
  );
  transform-origin: center;
  animation: float 15s infinite ease-in-out;
}

/* Shooting Stars */
.shooting-star {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: white;
  filter: drop-shadow(0 0 10px white);
  opacity: 0;
  z-index: 11;
  transform-origin: center;
}

.shooting-star::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  transform-origin: left center;
}

/* Animations */
@keyframes float {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0.2;
  }
  25% {
    transform: translate(-5px, -10px);
    opacity: 0.4;
  }
  50% {
    transform: translate(5px, -15px);
    opacity: 0.3;
  }
  75% {
    transform: translate(10px, 5px);
    opacity: 0.5;
  }
}

@keyframes shoot {
  0% {
    transform: translate(var(--start-x), var(--start-y)) rotate(var(--angle));
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--end-x), var(--end-y)) rotate(var(--angle));
    opacity: 0;
  }
}

/* Solar System Animations */
@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(var(--orbit-radius)) rotate(-360deg);
  }
}

@keyframes ping-slow {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes pulse-slow {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.1;
    transform: scale(1.1);
  }
}

.animate-orbit {
  animation: orbit var(--orbit-duration) linear infinite;
  transform-origin: left center;
}

.animate-ping-slow {
  animation: ping-slow 4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-pulse-slow {
  animation: pulse-slow 8s ease-in-out infinite;
}

/* Planet Styling */
.planet {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

.surface-detail {
  background-image: radial-gradient(
      circle at 30% 30%,
      transparent 60%,
      rgba(0, 0, 0, 0.2) 60.5%
    ),
    radial-gradient(
      circle at 70% 70%,
      transparent 60%,
      rgba(0, 0, 0, 0.2) 60.5%
    ),
    radial-gradient(
      circle at 20% 80%,
      transparent 70%,
      rgba(0, 0, 0, 0.15) 70.5%
    );
}

/* Sun Styling */
.sun {
  z-index: 1;
}

.sun-core {
  position: relative;
  z-index: 2;
  box-shadow: 0 0 20px #f59e0b, 0 0 40px #f59e0b, 0 0 60px #f59e0b;
}

.sun-corona {
  z-index: 1;
}

.sun-flare {
  z-index: 0;
}

/* Mobile specific styles */
.solar-system-mobile {
  display: none;
}

@media (max-width: 768px) {
  .solar-system-container {
    display: none;
  }

  .solar-system-mobile {
    display: block;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  /* Simplify for mobile */
  .surface-detail,
  .great-red-spot,
  .sun-flare {
    display: none;
  }

  /* Hide Jupiter on mobile to save space */
  .jupiter {
    display: none;
  }
}

/* Cosmic Animations */
@keyframes shooting-star-1 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate(100px, 100px);
    opacity: 0;
  }
}

@keyframes shooting-star-2 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate(-150px, 80px);
    opacity: 0;
  }
}

@keyframes shooting-star-3 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate(120px, -60px);
    opacity: 0;
  }
}

@keyframes comet {
  0% {
    transform: translate(-100px, -100px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(100vw, 100vh);
    opacity: 0;
  }
}

@keyframes orbit-slow {
  from {
    transform: rotate(0deg) translateX(12px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(12px) rotate(-360deg);
  }
}

.animate-shooting-star-1 {
  animation: shooting-star-1 5s linear infinite;
  animation-delay: 2s;
}

.animate-shooting-star-2 {
  animation: shooting-star-2 7s linear infinite;
  animation-delay: 5s;
}

.animate-shooting-star-3 {
  animation: shooting-star-3 6s linear infinite;
  animation-delay: 3s;
}

.animate-comet {
  animation: comet 15s linear infinite;
}

.animate-orbit-slow {
  animation: orbit-slow 8s linear infinite;
}

/* Constellation connector lines */
.constellation li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 20px;
  width: 1px;
  height: 16px;
  background: linear-gradient(to bottom, rgba(0, 255, 127, 0.3), transparent);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ufo,
  .satellite-orbit {
    display: none;
  }

  .comet {
    display: none;
  }
}