/* ══════════════════════════════════════
   Twinkling Stars + Milky Way Background
   ══════════════════════════════════════ */

.stars-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Milky Way — animated nebula gradient */
.milky-way {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  opacity: 0.4;
  animation: milkyDrift 60s linear infinite;
  background:
    radial-gradient(ellipse 600px 200px at 20% 30%, rgba(88, 28, 135, 0.35), transparent),
    radial-gradient(ellipse 500px 180px at 70% 60%, rgba(30, 64, 175, 0.3), transparent),
    radial-gradient(ellipse 400px 150px at 45% 80%, rgba(6, 95, 70, 0.2), transparent),
    radial-gradient(ellipse 350px 120px at 80% 20%, rgba(157, 23, 77, 0.2), transparent);
}

@keyframes milkyDrift {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-5%, -3%) rotate(2deg); }
  50% { transform: translate(-8%, -5%) rotate(0deg); }
  75% { transform: translate(-3%, -2%) rotate(-2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Light theme milky way — softer, blue-purple */
[data-theme="light"] .milky-way {
  opacity: 0.25;
  background:
    radial-gradient(ellipse 600px 200px at 20% 30%, rgba(99, 102, 241, 0.25), transparent),
    radial-gradient(ellipse 500px 180px at 70% 60%, rgba(59, 130, 246, 0.2), transparent),
    radial-gradient(ellipse 400px 150px at 45% 80%, rgba(14, 165, 233, 0.15), transparent),
    radial-gradient(ellipse 350px 120px at 80% 20%, rgba(168, 85, 247, 0.15), transparent);
}
@media (prefers-color-scheme: light) {
  .milky-way {
    opacity: 0.25;
    background:
      radial-gradient(ellipse 600px 200px at 20% 30%, rgba(99, 102, 241, 0.25), transparent),
      radial-gradient(ellipse 500px 180px at 70% 60%, rgba(59, 130, 246, 0.2), transparent),
      radial-gradient(ellipse 400px 150px at 45% 80%, rgba(14, 165, 233, 0.15), transparent),
      radial-gradient(ellipse 350px 120px at 80% 20%, rgba(168, 85, 247, 0.15), transparent);
  }
}

/* Stars */
.star {
  position: absolute;
  border-radius: 50%;
  animation: twinkle 4s ease-in-out infinite;
}

/* Color classes */
.star--gold { background: #FBBF24; box-shadow: 0 0 4px #FBBF24; }
.star--blue { background: #60A5FA; box-shadow: 0 0 4px #60A5FA; }
.star--red { background: #FB7185; box-shadow: 0 0 3px #FB7185; }
.star--purple { background: #A78BFA; box-shadow: 0 0 4px #A78BFA; }
.star--cyan { background: #22D3EE; box-shadow: 0 0 3px #22D3EE; }
.star--white { background: #E2E8F0; box-shadow: 0 0 2px #E2E8F0; }

@keyframes twinkle {
  0%, 100% { opacity: 0.1; transform: scale(0.7); }
  50% { opacity: 0.75; transform: scale(1.15); }
}

/* Light theme: adjust star colors for visibility on blue-ish bg */
[data-theme="light"] .star--white { background: #6366F1; box-shadow: 0 0 3px #6366F1; }
[data-theme="light"] .star--gold { background: #D97706; box-shadow: 0 0 3px #D97706; }
[data-theme="light"] .star--blue { background: #2563EB; box-shadow: 0 0 3px #2563EB; }
[data-theme="light"] .star--red { background: #E11D48; box-shadow: 0 0 3px #E11D48; }
[data-theme="light"] .star--purple { background: #7C3AED; box-shadow: 0 0 3px #7C3AED; }
[data-theme="light"] .star--cyan { background: #0891B2; box-shadow: 0 0 3px #0891B2; }

@media (prefers-color-scheme: light) {
  .star--white { background: #6366F1; box-shadow: 0 0 3px #6366F1; }
  .star--gold { background: #D97706; box-shadow: 0 0 3px #D97706; }
  .star--blue { background: #2563EB; box-shadow: 0 0 3px #2563EB; }
  .star--red { background: #E11D48; box-shadow: 0 0 3px #E11D48; }
  .star--purple { background: #7C3AED; box-shadow: 0 0 3px #7C3AED; }
  .star--cyan { background: #0891B2; box-shadow: 0 0 3px #0891B2; }
}

/* Ensure app content stays above stars */
.app-shell,
.app-main,
.screen,
#tab-bar {
  position: relative;
  z-index: var(--z-base, 1);
}

/* Make landing and login screens transparent to show stars */
#screen-landing,
#screen-landing .landing-page,
#screen-login,
#screen-login .scroll-content {
  background: transparent !important;
}