/* Custom Styles for SolarisBlog Vanilla */

/* Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

body {
  background-color: #02040a;
  background-image: radial-gradient(circle at 50% 50%, #16213e 0%, transparent 70%);
  color: #f1f5f9;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

/* Star Background */
.star-background {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  pointer-events: none;
  overflow: hidden;
}

/* Glass effect for liquid panels */
.glass-liquid {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px border rgba(255, 255, 255, 0.1);
  border-radius: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 10px 40px -10px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.glass-liquid::before {
  content: '';
  position: absolute;
  inset: -100%;
  opacity: 0.25;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.25) 0%, transparent 60%);
  animation: liquid-move 12s infinite alternate ease-in-out;
}

@keyframes liquid-move {
  from { transform: translate(-8%, -8%) rotate(0deg); }
  to { transform: translate(8%, 8%) rotate(12deg); }
}

/* Markdown Styling inside Dossier/Modals */
.markdown-body h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 1.75rem;
  margin-bottom: 1rem;
  color: #60a5fa;
  font-style: italic;
}

.markdown-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: #93c5fd;
  font-style: italic;
}

.markdown-body h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  color: #93c5fd;
}

.markdown-body p {
  margin-bottom: 1rem;
  line-height: 1.7;
  color: #cbd5e1;
}

.markdown-body ul {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
  list-style-type: disc;
  color: #cbd5e1;
}

.markdown-body li {
  margin-bottom: 0.5rem;
}

.markdown-body strong {
  color: #fca5a5;
  font-weight: 600;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Planet Glow Effects */
.planet-glow-mercury { box-shadow: 0 0 50px rgba(156, 163, 175, 0.35); }
.planet-glow-venus { box-shadow: 0 0 60px rgba(251, 191, 36, 0.3); }
.planet-glow-earth { box-shadow: 0 0 70px rgba(59, 130, 246, 0.35); }
.planet-glow-moon { box-shadow: 0 0 45px rgba(209, 213, 219, 0.35); }
.planet-glow-mars { box-shadow: 0 0 60px rgba(239, 68, 68, 0.35); }
.planet-glow-jupiter { box-shadow: 0 0 85px rgba(245, 158, 11, 0.25); }
.planet-glow-europa { box-shadow: 0 0 50px rgba(125, 211, 252, 0.35); }
.planet-glow-ganymede { box-shadow: 0 0 50px rgba(165, 180, 252, 0.25); }
.planet-glow-saturn { box-shadow: 0 0 80px rgba(217, 119, 6, 0.25); }
.planet-glow-titan { box-shadow: 0 0 60px rgba(245, 158, 11, 0.35); }
.planet-glow-uranus { box-shadow: 0 0 60px rgba(103, 232, 249, 0.3); }
.planet-glow-neptune { box-shadow: 0 0 70px rgba(37, 99, 235, 0.35); }
.planet-glow-kuiper { box-shadow: 0 0 60px rgba(139, 92, 246, 0.15); }
.planet-glow-oort { box-shadow: 0 0 85px rgba(255, 255, 255, 0.08); }

/* Orbital Spins */
@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.orbit-spin {
  animation: orbit-spin var(--orbit-duration, 10s) linear infinite;
}

@keyframes orbit-spin-reverse {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.orbit-spin-reverse {
  animation: orbit-spin-reverse var(--orbit-duration, 10s) linear infinite;
}