/*
Theme Name: Solestial Codex
Author: Zefy
Description: Minimal glowing theme for the Solestial Codex.
Version: 1.0
*/

/* === BASE RESET === */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', sans-serif;
  background: #0b0d10;
  color: #e0e6f0;
  line-height: 1.6;
  text-align: center;
}

/* === GLOW BACKGROUND === */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle at 30% 40%, rgba(122,211,255,0.2), transparent 50%),
              radial-gradient(circle at 70% 60%, rgba(255,231,118,0.15), transparent 50%);
  filter: blur(80px);
  animation: nebulaDrift 30s ease-in-out infinite alternate;
  z-index: -3;
}
@keyframes nebulaDrift {
  0% { transform: scale(1) translate(0,0); }
  50% { transform: scale(1.1) translate(20px,-10px); }
  100% { transform: scale(1) translate(-10px,10px); }
}

/* Aurora Gradient */
body::after {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(120deg, rgba(122,211,255,0.1), rgba(255,231,118,0.1), rgba(122,211,255,0.1));
  background-size: 400% 400%;
  animation: auroraDrift 60s ease infinite;
  z-index: -2;
  pointer-events: none;
}

/* Energy Sparks */
html::after {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle, rgba(255,231,118,0.15) 1px, transparent 2px) repeat;
  background-size: 120px 120px;
  animation: sparkFlicker 10s ease-in-out infinite alternate;
  z-index: -1;
  pointer-events: none;
}
@keyframes auroraDrift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes sparkFlicker {
  0% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.05); }
  100% { opacity: 0.2; transform: scale(1); }
}

/* === HEADINGS === */
h1, h2, h3 { font-family: 'Cinzel', serif; }
h1 { font-size: 3em; color: #ffe776; }
h2 { font-size: 2em; color: #ffe776; margin-bottom: 10px; }
h3 { font-size: 1.5em; color: #7ad3ff; margin-top: 20px; }

/* === HERO SECTION === */
.hero { padding: 40px 20px 30px; max-width: 700px; margin: 20px auto 30px; text-align: center; }
.hero .tagline { font-size: 1.3em; color: #7ad3ff; margin-bottom: 10px; }
.hero .intro { font-size: 1em; opacity: 0.85; max-width: 600px; margin: auto; }

/* === NAVIGATION === */
.site-header {
  background: rgba(10,12,14,0.4);
  border-bottom: 1px solid rgba(255,231,118,0.08);
  padding: 10px 0;
  position: sticky; top: 0; z-index: 1000;
}
.site-header .container { max-width: 1100px; margin: auto; display: flex; flex-direction: column; align-items: center; }
.site-title a { font-family: 'Cinzel', serif; font-size: 1.5em; color: #ffe776; text-decoration: none; }
.main-nav, .main-nav .menu-primary-menu-container { display: flex; justify-content: center; width: 100%; }
.nav-menu { list-style: none; display: flex; justify-content: center; gap: 25px; margin: 10px 0 0; padding: 0; }
.nav-menu li { position: relative; }
.nav-menu li a { color: #7ad3ff; font-weight: 500; text-decoration: none; transition: color 0.3s, text-shadow 0.3s; }
.nav-menu li a:hover { color: #ffe776; text-shadow: 0 0 8px rgba(255,231,118,0.7); }
.nav-menu li a::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 0%; height: 2px; background: #ffe776; box-shadow: 0 0 4px rgba(255,231,118,0.7); transform: translateX(-50%); transition: width 0.3s ease; }
.nav-menu li a:hover::after { width: 60%; }

/* Dropdown */
.nav-menu li ul { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: rgba(11,13,16,0.85); padding: 10px 0; border-radius: 6px; min-width: 200px; box-shadow: 0 0 10px rgba(122,211,255,0.15); }
.nav-menu li:hover > ul { display: block; }
.nav-menu li ul li a { display: block; padding: 8px 15px; color: #7ad3ff; }
.nav-menu li ul li a:hover { color: #ffe776; background: rgba(255,231,118,0.05); }

/* === DARKER FROSTED GLASS PANELS === */
.content, .codex-section {
  background: rgba(11,13,16,0.35) !important;  /* slightly darker */
  -webkit-backdrop-filter: blur(3px);          /* reduced blur */
  backdrop-filter: blur(3px);
  border: 1px solid rgba(122,211,255,0.12);    /* softer border */
  box-shadow: 0 0 15px rgba(122,211,255,0.04); /* softer glow */
  border-radius: 12px;
  text-align: left;
}

/* === CODEX GRID === */
.codex-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; max-width: 1000px; margin: 40px auto 80px; padding: 0 20px; }
.codex-card { background: rgba(11,13,16,0.5); border: 1px solid rgba(122,211,255,0.2); border-radius: 12px; padding: 20px; color: #e0e6f0; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 0 10px rgba(122,211,255,0.1); }
.codex-card h3 { color: #ffe776; }
.codex-card p { opacity: 0.85; font-size: 0.95em; }
.codex-card:hover { border-color: rgba(255,231,118,0.4); box-shadow: 0 0 15px rgba(255,231,118,0.25); }

/* === BUTTONS === */
.glow-btn, .big-codex-btn { animation: glowPulse 3s ease-in-out infinite alternate; }
.big-codex-btn { display: inline-block; margin-top: 25px; padding: 15px 40px; font-size: 1.3em; font-weight: 600; color: #7ad3ff; background: rgba(11,13,16,0.6); border: 2px solid rgba(122,211,255,0.4); border-radius: 10px; box-shadow: 0 0 15px rgba(122,211,255,0.2); transition: all 0.3s ease; text-decoration: none; }
.big-codex-btn:hover { color: #ffe776; border-color: rgba(255,231,118,0.5); box-shadow: 0 0 20px rgba(255,231,118,0.3); transform: scale(1.05); }
@keyframes glowPulse { 0% { box-shadow: 0 0 8px rgba(122,211,255,0.1); } 100% { box-shadow: 0 0 14px rgba(255,231,118,0.3); } }

/* === ANIMATIONS === */
.hero, .codex-section, .codex-card { opacity: 0; transform: translateY(10px); animation: fadeInUp 0.6s ease forwards; }
.codex-card { animation-delay: 0.2s; }
.codex-section { animation-delay: 0.3s; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* === FOOTER === */
.site-footer { margin-top: 40px; padding: 15px 10px; background: rgba(10,12,14,0.4); border-top: 1px solid rgba(255,231,118,0.1); text-align: center; }
.footer-copy { font-size: 0.9em; color: #7ad3ff; animation: footerGlow 3s ease-in-out infinite alternate; text-shadow: 0 0 4px rgba(122,211,255,0.4); }
@keyframes footerGlow { 0% { text-shadow: 0 0 4px rgba(122,211,255,0.4), 0 0 8px rgba(122,211,255,0.2); } 100% { text-shadow: 0 0 6px rgba(255,231,118,0.5), 0 0 12px rgba(255,231,118,0.3); } }

/* === MOBILE === */
@media (max-width: 768px) {
  .nav-menu { flex-direction: column; gap: 10px; }
  .codex-card { width: 100%; max-width: 90%; margin: auto; }
  .big-codex-btn { width: 90%; font-size: 1.2em; }
}
/* === FINAL CORRECTED BACKGROUND STACK === */

/* Keep dark mode base always visible */
body {
  background: #0b0d10 !important;
  position: relative;
  z-index: 0;
}

/* Nebula: subtle, under everything else */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle at 30% 40%, rgba(122,211,255,0.18), transparent 50%),
              radial-gradient(circle at 70% 60%, rgba(255,231,118,0.12), transparent 50%);
  filter: blur(80px);
  animation: nebulaDrift 30s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
}

/* Aurora: toned down so it doesn't whitewash */
body::after {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(120deg,
              rgba(122,211,255,0.05),
              rgba(255,231,118,0.06),
              rgba(122,211,255,0.05));
  background-size: 400% 400%;
  animation: auroraDrift 60s ease infinite;
  z-index: 2;
  pointer-events: none;
}

/* Sparks: faint, above aurora */
html::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(circle, rgba(255,231,118,0.08) 1px, transparent 2px) repeat;
  background-size: 120px 120px;
  animation: sparkFlicker 10s ease-in-out infinite alternate;
  z-index: 3;
  pointer-events: none;
}

/* Content remains on top */
header, .content, .codex-section, footer, .hero, .codex-card {
  position: relative;
  z-index: 10;
}
/* === RESTORE ORIGINAL PANELS (WORKING STATE) === */
.content, .codex-section {
  background: rgba(11,13,16,0.25) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(122,211,255,0.15);
  box-shadow: 0 0 20px rgba(122,211,255,0.05);
  border-radius: 12px;
  text-align: left;
  position: relative;
  z-index: 10;
}
/* === RESTORE PANEL SIZE + KEEP FROST === */
.content, .codex-section {
  max-width: 800px;                /* restore proper width */
  margin: 30px auto;               /* center the panel */
  padding: 25px 30px;
  background: rgba(11,13,16,0.25) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  border: 1px solid rgba(122,211,255,0.15);
  box-shadow: 0 0 20px rgba(122,211,255,0.05);
  text-align: left;
  position: relative;              /* keep it above background layers */
  z-index: 10;
}
/* === DARKER FROSTED PANELS (FINAL) === */
.content, .codex-section {
  max-width: 800px;
  margin: 30px auto;
  padding: 25px 30px;
  background: rgba(11,13,16,0.4) !important;   /* darker */
  -webkit-backdrop-filter: blur(4px);          /* slightly reduced blur */
  backdrop-filter: blur(4px);
  border-radius: 12px;
  border: 1px solid rgba(122,211,255,0.12);
  box-shadow: 0 0 15px rgba(122,211,255,0.04);
  text-align: left;
  position: relative;
  z-index: 10;
}
/* === PULSING DARK NEBULA === */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.3)),
    radial-gradient(circle at 30% 40%, rgba(30,100,140,0.12), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(90,75,25,0.08), transparent 50%);
  filter: blur(80px);
  animation: nebulaDrift 30s ease-in-out infinite alternate,
             darkPulse 10s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
}

/* === Pulse Animation for Black Overlay === */
@keyframes darkPulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.8; }  /* slightly lighter mid-pulse */
  100% { opacity: 1; }
}
/* === SPARSE RANDOM TWINKLING SPARKS === */
.spark-layer {
  position: fixed;
  top: 0; left: 0;
  width: 1px; height: 1px;   /* tiny element, spark origins */
  background: transparent;
  box-shadow:
    200px 300px rgba(255,231,118,0.4),
    800px 500px rgba(255,231,118,0.3),
    1200px 900px rgba(255,231,118,0.35),
    1600px 200px rgba(255,231,118,0.4),
    400px 1000px rgba(255,231,118,0.3),
    1400px 700px rgba(255,231,118,0.35);
  animation: sparkLayerTwinkle 8s ease-in-out infinite alternate;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(255,231,118,0.4));
}

/* Slight variation for depth */
.spark-layer::before {
  content: "";
  position: absolute;
  width: 1px; height: 1px;
  box-shadow:
    600px 400px rgba(255,231,118,0.25),
    1000px 800px rgba(255,231,118,0.3),
    1800px 500px rgba(255,231,118,0.35),
    300px 700px rgba(255,231,118,0.25),
    1500px 300px rgba(255,231,118,0.3);
  animation: sparkLayerTwinkle 12s ease-in-out infinite alternate;
}

/* Twinkle effect */
@keyframes sparkLayerTwinkle {
  0% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
  100% { opacity: 0.3; transform: scale(1); }
}
/* === DYNAMIC RANDOM ENERGY PARTICLE FIELD === */
.particle-field {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 4;
}

/* Spark style */
.particle {
  position: absolute;
  width: 2px; height: 2px;
  background: rgba(255,231,118,0.4);
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(255,231,118,0.5);
  animation: particleTwinkle 6s ease-in-out infinite alternate,
             particleDrift 60s linear infinite;
}

/* Twinkle effect */
@keyframes particleTwinkle {
  0%   { opacity: 0.3; transform: scale(1); }
  50%  { opacity: 0.8; transform: scale(1.3); }
  100% { opacity: 0.3; transform: scale(1); }
}

/* Slow drifting movement */
@keyframes particleDrift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(20px, -10px); }
  100% { transform: translate(0, 0); }
}
/* === COMPACT HEADER & NAV MENU === */
.site-header {
  padding: 3px 0;          /* drastically reduced height */
}

.site-header .site-title a {
  font-size: 0.8em;          /* was 1.5em */
  letter-spacing: 0.5px;  /* slight spacing for readability */
}

.nav-menu {
  gap: 0px;               /* was 25px */
  font-size: 0.85em;       /* smaller menu text */
  margin: 2px 0 0;
}
/* === OPAQUE DROPDOWN MENU === */
.nav-menu li ul {
  background: #0b0d10; /* solid dark */
  border: 1px solid rgba(122,211,255,0.2);
  box-shadow: 0 0 12px rgba(122,211,255,0.1);
}
/* === PREMIUM GLOWING SITE TITLE === */
.site-title {
  position: relative;
  display: inline-block;
  padding: 5px 10px;
}

/* Animated Gradient Text */
.site-title a {
  font-family: 'Cinzel', serif;
  font-size: 1em; /* Adjust smaller/larger as needed */
  font-weight: 700;
  background: linear-gradient(90deg, #ffe776, #7ad3ff, #ffe776);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: titleGlow 6s linear infinite;
  text-shadow: 0 0 6px rgba(255,231,118,0.2);
}

@keyframes titleGlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Faint Halo Behind Text */
.site-title::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 180%; height: 180%;
  background: radial-gradient(circle, rgba(255,231,118,0.08), transparent 70%);
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  animation: haloPulse 8s ease-in-out infinite;
}

@keyframes haloPulse {
  0%   { opacity: 0.15; transform: translate(-50%, -50%) scale(1); }
  50%  { opacity: 0.3; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0.15; transform: translate(-50%, -50%) scale(1); }
}

/* === ULTRA-SMOOTH HOVER BOOST === */
.site-title:hover a {
  animation: titleGlowSmooth 5s ease-in-out infinite;
  text-shadow: 0 0 6px rgba(255,231,118,0.25), 0 0 12px rgba(122,211,255,0.15);
}

@keyframes titleGlowSmooth {
  0%   { background-position: 0% 50%; filter: brightness(1); }
  30%  { background-position: 30% 50%; filter: brightness(1.15); }
  60%  { background-position: 60% 50%; filter: brightness(1.3); }
  85%  { background-position: 85% 50%; filter: brightness(1.1); }
  100% { background-position: 100% 50%; filter: brightness(1.05); }
}


.site-title:hover::before {
  opacity: 0.35;
  transform: translate(-50%, -50%) scale(1.12);
  transition: all 0.4s ease-in-out;
}

.site-title:hover::after {
  opacity: 0.8;
  width: 85%;
  box-shadow: 0 0 12px rgba(255,231,118,0.4);
  transition: all 0.3s ease-in-out;
}

/* === PREMIUM STICKY HEADER === */
.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  background: rgba(10,12,14,0.3);               /* glassy default */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,231,118,0.05);
  transition: background 0.4s ease, box-shadow 0.4s ease;
  z-index: 9999;                                /* ensure it stays on top */
}

/* Hover: Slight energy boost */
.site-header:hover {
  background: rgba(10,12,14,0.4);
  box-shadow: 0 0 10px rgba(122,211,255,0.08);
}
.site-header:hover::after {
  opacity: 0.7;
}

/* Scroll: Darkens slightly for depth */
body.scrolled .site-header {
  background: rgba(10,12,14,0.6);
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
}
/* === FINAL SHRINKING HEADER (REAL HEIGHT + BALANCED PADDING + BOUNCE) === */
.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  background: rgba(10,12,14,0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,231,118,0.05);
  z-index: 1000;
  transition: background 0.4s ease, height 0.4s cubic-bezier(0.25, 1.3, 0.5, 1);
  height: 104px;                 /* default full size */
  overflow: hidden;              /* prevent any overflow during bounce */
}

/* Inner wrapper (for scaling) */
.site-header .header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.25, 1.3, 0.5, 1);
}

/* === SCROLLED STATE === */
body.scrolled .site-header {
  height: 60px;                  /* actual shrink */
  background: rgba(10,12,14,0.5);
}
body.scrolled .site-header .header-inner {
  transform: scaleY(0.92);
  animation: bounceInY 0.4s cubic-bezier(0.25, 1.3, 0.5, 1) forwards;
}

/* === RETURN TO TOP === */
body:not(.scrolled) .site-header .header-inner {
  transform: scaleY(1);
  animation: bounceOutY 0.4s cubic-bezier(0.25, 1.3, 0.5, 1) forwards;
}

/* Bounce Keyframes */
@keyframes bounceInY {
  0%   { transform: scaleY(1); }
  50%  { transform: scaleY(0.88); }
  70%  { transform: scaleY(0.94); }
  100% { transform: scaleY(0.92); }
}
@keyframes bounceOutY {
  0%   { transform: scaleY(0.92); }
  50%  { transform: scaleY(1.05); }
  100% { transform: scaleY(1); }
}

/* Title Scaling */
.site-header .site-title a {
  font-size: 1.2em;
  transition: font-size 0.4s cubic-bezier(0.25, 1.3, 0.5, 1);
}
body.scrolled .site-header .site-title a {
  font-size: 0.9em;
}
/* === ORB NAVIGATION WRAPPER === */
#orb-wrapper {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 200px;
  height: 200px;
  z-index: 3000;
  transition: all 0.4s ease;
  transform: translate(0,0);
}

/* Move entire cluster to center when active */
#orb-wrapper.active {
  bottom: 50%;
  right: 50%;
  transform: translate(50%,50%);
}

/* === ORB NAV CONTAINER === */
#orb-nav {
  position: relative;
  width: 200px;
  height: 200px;
}

/* === BACKGROUND OVERLAY === */
#orb-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 2500;
}
#orb-overlay.active { opacity: 1; pointer-events: auto; }

/* === MAIN ORB (CLEAN OUTLINE) === */
#orb-main {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(1);
  z-index: 3001;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* Default outline */
#orb-main::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 50%;
  box-shadow: none !important;
  transition: box-shadow 0.3s ease;
}

/* Halo hidden by default */
#orb-main::after {
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  border-radius: 50%;
  background: none !important;
  opacity: 0 !important;
  animation: none !important;
  transition: opacity 0.3s ease;
  z-index: -1;
}

/* Icon inside */
#orb-main img {
  width: 50%;
  height: 50%;
  z-index: 2;
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.3));
}

/* Hover: grow only */
#orb-main:hover {
  transform: translate(-50%,-50%) scale(1.15);}

/* Active: glow + halo enabled */
#orb-wrapper.active #orb-main::before {
  box-shadow: 0 0 14px rgba(255,255,255,0.6),
              0 0 30px rgba(180,220,255,0.3) !important;
}
#orb-wrapper.active #orb-main::after {
  background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%) !important;
  opacity: 1 !important;
  animation: haloPulseWhite 5s ease-in-out infinite !important;
}

/* Halo pulse only when active */
@keyframes haloPulseWhite {
  0%,100% { transform: scale(1); opacity: 0.2; }
  50%     { transform: scale(1.1); opacity: 0.4; }
}

/* === SATELLITE ORBS === */
#orb-nav .satellite {
  --x: -50%;
  --y: -50%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(0);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 15px rgba(255,255,255,0.15);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#orb-wrapper.active .satellite { opacity: 1; }

/* Satellite icons */
#orb-nav .satellite img {
  width: 60%;
  height: 60%;
  margin: 20%;
  display: block;
  object-fit: contain;
}

/* Satellite glow colors */
.codex      { background: rgba(255,231,118,0.12); box-shadow: 0 0 10px rgba(255,231,118,0.3); }
.core       { background: rgba(255,150,80,0.12);  box-shadow: 0 0 10px rgba(255,150,80,0.3); }
.biology    { background: rgba(120,220,255,0.12); box-shadow: 0 0 10px rgba(120,220,255,0.3); }
.culture    { background: rgba(80,255,200,0.12);  box-shadow: 0 0 10px rgba(80,255,200,0.3); }
.art        { background: rgba(200,120,255,0.12); box-shadow: 0 0 10px rgba(200,120,255,0.3); }
.subspecies { background: rgba(255,100,180,0.12); box-shadow: 0 0 10px rgba(255,100,180,0.3); }
.about      { background: rgba(255,255,255,0.1);  box-shadow: 0 0 10px rgba(255,255,255,0.3); }

/* === SATELLITE BOUNCE === */
@keyframes satelliteBounce {
  0%   { transform: translate(var(--x), var(--y)) scale(1); }
  40%  { transform: translate(var(--x), var(--y)) scale(1.15); }
  70%  { transform: translate(var(--x), var(--y)) scale(0.95); }
  100% { transform: translate(var(--x), var(--y)) scale(1); }
}

/* === ORB LABELS === */
.orb-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  font-size: 0.75em;
  color: #fff;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0 6px rgba(255,255,255,0.3);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#orb-wrapper.active .satellite:hover .orb-label {
  opacity: 1;
  transform: translateX(-50%) translateY(14px);
}
/* Label glow per orb */
.satellite.core .orb-label       { color: #ffb97a; text-shadow: 0 0 8px rgba(255,150,80,0.6); }
.satellite.biology .orb-label    { color: #7ad3ff; text-shadow: 0 0 8px rgba(120,220,255,0.6); }
.satellite.culture .orb-label    { color: #7affd9; text-shadow: 0 0 8px rgba(80,255,200,0.6); }
.satellite.art .orb-label        { color: #d49aff; text-shadow: 0 0 8px rgba(200,120,255,0.6); }
.satellite.subspecies .orb-label { color: #ff8fc2; text-shadow: 0 0 8px rgba(255,100,180,0.6); }
.satellite.about .orb-label      { color: #e0e0e0; text-shadow: 0 0 8px rgba(255,255,255,0.6); }

/* Keep satellite transforms controlled by JS */
#orb-nav .satellite {
  --x: -50%;
  --y: -50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(0); /* JS still sets final placement */
  opacity: 0;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(255,255,255,0.15);
  pointer-events: auto;
  transition: opacity 0.3s ease;
}

/* Inner wrapper scales on hover */
.satellite-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.3s ease;
}

/* Hover: grow + glow */
#orb-wrapper.active .satellite:hover .satellite-inner {
  transform: scale(1.2);
  box-shadow: 0 0 15px currentColor, 0 0 25px currentColor;
}

/* Keep color mapping */
.satellite.core       { color: #ffb97a; }
.satellite.biology    { color: #7ad3ff; }
.satellite.culture    { color: #7affd9; }
.satellite.art        { color: #d49aff; }
.satellite.subspecies { color: #ff8fc2; }
.satellite.about      { color: #e0e0e0; }

/* Inner wrapper scales independently from JS */
.satellite-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(1);
  transition: transform 0.25s ease, box-shadow 0.3s ease;
}

/* Force grow + glow on hover */
#orb-wrapper.active .satellite:hover .satellite-inner {
  transform: scale(1.2) !important;  /* force scaling */
  box-shadow: 0 0 15px currentColor, 0 0 25px currentColor;
}
/* Inner wrapper now grows via filter instead of transform */
.satellite-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: none;
  transition: filter 0.25s ease, box-shadow 0.3s ease;
}

/* Hover: simulate grow with scale filter + glow */
#orb-wrapper.active .satellite:hover .satellite-inner {
  filter: drop-shadow(0 0 8px currentColor) brightness(1.1) scale(1.2);
  box-shadow: 0 0 15px currentColor, 0 0 25px currentColor;
}
/* === BACKDROP CIRCLE (EXPANDED STATE) === */
/* === BACKDROP CIRCLE (EXPANDED STATE) === */
#orb-backdrop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6); /* increased to 60% opacity */
  box-shadow: 0 0 25px rgba(255,255,255,0.25); /* slightly brighter glow */
  transform: translate(-50%,-50%) scale(0.8);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 0; /* stays behind satellites */
}

/* Show backdrop only when expanded */
#orb-wrapper.active #orb-backdrop {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}


/* Show backdrop only when expanded */
#orb-wrapper.active #orb-backdrop {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}