/* 3D Solar System Animation for About Page */
.solar-system-container {
  position: relative;
  width: 100%;
  height: 600px;
  background: radial-gradient(ellipse at center, #0F1419 0%, #020A13 100%);
  border-radius: 20px;
  overflow: hidden;
  margin: 40px 0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* Animated Star Background */
.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: twinkle 3s infinite alternate;
}

.star:nth-child(1) { top: 20%; left: 80%; width: 2px; height: 2px; animation-delay: 0s; }
.star:nth-child(2) { top: 80%; left: 20%; width: 1px; height: 1px; animation-delay: 1s; }
.star:nth-child(3) { top: 40%; left: 70%; width: 3px; height: 3px; animation-delay: 2s; }
.star:nth-child(4) { top: 70%; left: 40%; width: 1px; height: 1px; animation-delay: 0.5s; }
.star:nth-child(5) { top: 10%; left: 30%; width: 2px; height: 2px; animation-delay: 1.5s; }
.star:nth-child(6) { top: 90%; left: 60%; width: 1px; height: 1px; animation-delay: 2.5s; }
.star:nth-child(7) { top: 60%; left: 10%; width: 2px; height: 2px; animation-delay: 0.8s; }
.star:nth-child(8) { top: 30%; left: 90%; width: 1px; height: 1px; animation-delay: 1.8s; }
.star:nth-child(9) { top: 50%; left: 50%; width: 1px; height: 1px; animation-delay: 0.3s; }
.star:nth-child(10) { top: 15%; left: 60%; width: 2px; height: 2px; animation-delay: 2.2s; }

@keyframes twinkle {
  0% { opacity: 0.3; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.2); }
}

/* Solar System */
.solar-system {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
}

/* Sun */
.sun {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, #FFF700 0%, #FF8C00 100%);
  border-radius: 50%;
  box-shadow: 
    0 0 20px #FFF700,
    0 0 40px #FF8C00,
    0 0 60px #FF6600;
  animation: sunPulse 4s ease-in-out infinite;
  z-index: 10;
}

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

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

.orbit-mercury { width: 100px; height: 100px; }
.orbit-venus { width: 140px; height: 140px; }
.orbit-earth { width: 180px; height: 180px; }
.orbit-mars { width: 220px; height: 220px; }
.orbit-jupiter { width: 300px; height: 300px; }
.orbit-saturn { width: 360px; height: 360px; }

/* Planets */
.planet {
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.planet:hover {
  transform: scale(1.5);
  filter: brightness(1.3);
}

.mercury {
  width: 8px;
  height: 8px;
  background: #8C7853;
  animation: orbit-mercury 10s linear infinite;
  top: 0;
  left: 50%;
  margin-left: -4px;
  margin-top: -4px;
}

.venus {
  width: 12px;
  height: 12px;
  background: #FFC649;
  animation: orbit-venus 15s linear infinite;
  top: 0;
  left: 50%;
  margin-left: -6px;
  margin-top: -6px;
}

.earth {
  width: 14px;
  height: 14px;
  background: linear-gradient(45deg, #6B93D6 0%, #4E7AC7 50%, #87CEEB 100%);
  animation: orbit-earth 20s linear infinite;
  top: 0;
  left: 50%;
  margin-left: -7px;
  margin-top: -7px;
  position: relative;
}

.earth::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: #C0C0C0;
  border-radius: 50%;
  top: -8px;
  left: 50%;
  margin-left: -2px;
  animation: moon-orbit 2s linear infinite;
}

.mars {
  width: 10px;
  height: 10px;
  background: #CD5C5C;
  animation: orbit-mars 30s linear infinite;
  top: 0;
  left: 50%;
  margin-left: -5px;
  margin-top: -5px;
}

.jupiter {
  width: 24px;
  height: 24px;
  background: linear-gradient(45deg, #D8CA9D 0%, #FAD5A5 50%, #C8860D 100%);
  animation: orbit-jupiter 50s linear infinite;
  top: 0;
  left: 50%;
  margin-left: -12px;
  margin-top: -12px;
}

.saturn {
  width: 20px;
  height: 20px;
  background: linear-gradient(45deg, #FAD5A5 0%, #F4E4BC 50%, #D2691E 100%);
  animation: orbit-saturn 70s linear infinite;
  top: 0;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  position: relative;
}

.saturn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(218, 165, 32, 0.6);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

/* Planet orbit animations */
@keyframes orbit-mercury {
  from { transform: rotate(0deg) translateX(50px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(50px) rotate(-360deg); }
}

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

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

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

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

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

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

/* Planet info tooltip */
.planet-info {
  position: absolute;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 10px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  border: 1px solid #FFD700;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.planet-info.show {
  opacity: 1;
}

/* Zodiac ring */
.zodiac-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 460px;
  height: 460px;
  border: 2px solid rgba(255, 215, 0, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: zodiac-rotate 120s linear infinite;
}

.zodiac-sign {
  position: absolute;
  font-size: 20px;
  color: #FFD700;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

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

/* Responsive design */
@media (max-width: 768px) {
  .solar-system-container {
    height: 400px;
  }
  
  .solar-system {
    width: 300px;
    height: 300px;
  }
  
  .orbit-mercury { width: 60px; height: 60px; }
  .orbit-venus { width: 84px; height: 84px; }
  .orbit-earth { width: 108px; height: 108px; }
  .orbit-mars { width: 132px; height: 132px; }
  .orbit-jupiter { width: 180px; height: 180px; }
  .orbit-saturn { width: 216px; height: 216px; }
  
  .zodiac-ring {
    width: 276px;
    height: 276px;
  }
  
  .mercury { animation: orbit-mercury-mobile 10s linear infinite; }
  .venus { animation: orbit-venus-mobile 15s linear infinite; }
  .earth { animation: orbit-earth-mobile 20s linear infinite; }
  .mars { animation: orbit-mars-mobile 30s linear infinite; }
  .jupiter { animation: orbit-jupiter-mobile 50s linear infinite; }
  .saturn { animation: orbit-saturn-mobile 70s linear infinite; }
}

@keyframes orbit-mercury-mobile {
  from { transform: rotate(0deg) translateX(30px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}

@keyframes orbit-venus-mobile {
  from { transform: rotate(0deg) translateX(42px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(42px) rotate(-360deg); }
}

@keyframes orbit-earth-mobile {
  from { transform: rotate(0deg) translateX(54px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(54px) rotate(-360deg); }
}

@keyframes orbit-mars-mobile {
  from { transform: rotate(0deg) translateX(66px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(66px) rotate(-360deg); }
}

@keyframes orbit-jupiter-mobile {
  from { transform: rotate(0deg) translateX(90px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(90px) rotate(-360deg); }
}

@keyframes orbit-saturn-mobile {
  from { transform: rotate(0deg) translateX(108px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(108px) rotate(-360deg); }
}

/* Animation controls */
.animation-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 20;
}

.control-btn {
  background: rgba(255, 215, 0, 0.2);
  border: 1px solid #FFD700;
  color: #FFD700;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 12px;
}

.control-btn:hover {
  background: rgba(255, 215, 0, 0.4);
  transform: translateY(-2px);
}

.control-btn.active {
  background: #FFD700;
  color: black;
}