* { margin:0; padding:0; box-sizing:border-box; }
html,body {
  width:100%;
  height:100%;
  background:black;
  font-family:system-ui;
  overflow:hidden;
  color:white;
}
#stars {
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* LEFT HEADER */
.left-header {
  position: absolute;
  left: 50px;
  top: 50px;
  z-index: 3;
  max-width: 350px;
  text-align: left;
}
.title { font-size: 3rem; margin-bottom: 10px; }
.subtitle { font-size: 1.6rem; opacity: 0.9; margin-bottom: 15px; }
.site-description { font-size: 1.2rem; opacity: 0.8; line-height: 1.5; }

.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* SUN */
#sun {
  width:140px;
  height:140px;
  border-radius:50%;
  background: radial-gradient(circle at 40% 30%, #ffffe0 0%, #ffaa00 30%, #ff6600 60%, #cc3300 100%);
  box-shadow: 0 0 140px rgba(255,200,0,0.9);
  position:absolute;
  z-index:3;
}
#sun:hover { cursor:pointer; }
.sun-label {
  position:absolute;
  top:110%;
  left:50%;
  transform:translateX(-50%);
  opacity:0;
  transition:.3s;
  color:#ffeb3b;
}
#sun:hover .sun-label { opacity:1; }

/* PLANETS */
#planets {
  position:absolute;
  inset:0;
  z-index:2;
}
.orbit {
  position:absolute;
  top:50%;
  left:50%;
  border:1px dashed rgba(255,255,255,0.15);
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation:spin linear infinite;
}
@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
.orbit:hover { animation-play-state:paused; }

.planet {
  position:absolute;
  top:50%;
  left:100%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  box-shadow: inset -6px -6px 20px rgba(0,0,0,0.5), 0 0 40px rgba(255,255,255,0.4);
  animation: self-rotate 40s linear infinite;
}
@keyframes self-rotate { to { transform:translate(-50%,-50%) rotate(360deg); } }
.planet:hover {
  cursor:pointer;
  box-shadow: inset -6px -6px 20px rgba(0,0,0,0.5), 0 0 80px rgba(255,255,255,0.8);
}
.planet-label {
  position:absolute;
  bottom:-30px;
  width:100%;
  text-align:center;
  font-size:12px;
  opacity:0;
  transition:.3s;
  color:#bbdefb;
}
.orbit:hover .planet-label { opacity:1; }

/* REALISTIC PLANETS ON THE MAIN PAGE */
.mercury { background: radial-gradient(circle at 30% 40%, #e0e0e0 0%, #b0b0b0 30%, #808080 60%, #505050 100%); }
.venus { background: radial-gradient(circle, #ffecb3 0%, #ffb74d 40%, #ff8a65 80%); }
.earth {
  background:
    radial-gradient(circle at 20% 30%, #fff 0%, transparent 15%),
    radial-gradient(circle at 60% 70%, #fff 0%, transparent 12%),
    radial-gradient(circle, #1565c0 0%, #1976d2 40%, #2e7d32 70%, #8bc34a 85%);
  background-blend-mode: screen;
}
.mars { background: radial-gradient(circle at 50% 40%, #ff7043 0%, #d84315 40%, #8a2be2 70%, #ff5722 100%); }
.jupiter {
  background: repeating-linear-gradient(0deg, #d4a574 0%, #d4a574 8%, #c19a6b 8%, #c19a6b 16%, #b8860b 16%, #b8860b 24%);
  background-size: 100% 200%;
  animation: stripes 15s linear infinite, self-rotate 40s linear infinite;
}
@keyframes stripes { to { background-position: 0 100%; } }
.saturn { background: radial-gradient(circle, #f5deb3 0%, #deb887 40%, #cd853f 80%); position:relative; }
.saturn::before, .saturn::after {
  content:''; position:absolute; top:50%; left:-70%; width:240%; height:18%; border-radius:50%;
  border: 3px solid rgba(255,255,255,0.6); transform:translateY(-50%) rotate(28deg);
  box-shadow: 0 0 15px rgba(255,255,255,0.5);
}
.saturn::after { width:220%; height:12%; border-width:2px; opacity:0.8; }
.uranus { background: radial-gradient(circle, #b3e5fc 0%, #81d4fa 40%, #4fc3f7 80%); transform:translate(-50%,-50%) rotate(98deg); }
.uranus::after {
  content:''; position:absolute; top:50%; left:-50%; width:200%; height:10%; border-radius:50%;
  border:1px solid rgba(255,255,255,0.4); transform:translateY(-50%);
  opacity:0.6;
}
.neptune { background: radial-gradient(circle at 60% 50%, #e3f2fd 0%, #90caf9 30%, #1976d2 60%, #0d47a1 100%); }

/* PLANET PAGE — ARTICLE WITH PHOTO ON THE RIGHT */
.planet-page {
  position: relative;
  height: 100vh;
  overflow-y: auto;
  padding: 80px 40px 40px;
  z-index: 2;
}
.article-layout-reverse {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 80px;
  max-width: 1400px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.info-sections {
  flex: 1;
  min-width: 500px;
  max-width: 700px;
}
.planet-photo {
  width: 600px; /* even more for Saturn */
  height: 600px;
  border-radius: 50%;
  background-size: 120% auto; /* enlarges the image so that the rings fit */
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  box-shadow: none;
  flex-shrink: 0;
}

/* Additionally for Saturn — center the rings better */
.planet-photo[style*="saturn"] {
  background-position: center 20%; /* move down slightly so that the rings are centered */
}
.info-block {
  background: rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 40px;
  backdrop-filter: blur(5px);
}
.info-block h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}
.info-block ul {
  list-style: disc;
  padding-left: 30px;
}
.info-block li {
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 12px;
}

/* BACK BUTTON */
.footer {
  position: absolute;
  bottom: 40px;
  right: 50px;
  z-index: 3;
}
.footer-btn {
  padding: 12px 28px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 10px;
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  transition: all 0.3s;
}
.footer-btn:hover {
  background: rgba(255,255,255,0.25);
  transform: scale(1.05);
}
.back-btn {
  position: absolute;
  top: 30px;
  left: 30px;
  color: white;
  text-decoration: none;
  font-size: 1.4rem;
  z-index: 3;
}
.back-btn:hover { opacity: 0.7; }
.language-switcher {
  position: absolute;
  top: 50px;
  right: 50px;
  z-index: 3;
  display: flex;
  gap: 10px;
}
.language-switcher img {
  width: 30px;
  height: 20px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s;
}
.language-switcher img:hover {
  opacity: 1;
}