/* Orbiting star background adapted from the supplied reference. */
html,
body { background: #020817 !important; }

.ambient-bg {
  background:
    radial-gradient(circle at 78% 4%, rgba(47, 140, 255, .3), transparent 34%),
    radial-gradient(circle at 12% 62%, rgba(7, 59, 154, .32), transparent 38%),
    linear-gradient(160deg, #031535, #020817 58%, #04112a) !important;
  animation: none !important;
}

.ambient-bg::before,
.ambient-bg::after,
.ambient-grid,
.ambient-noise { display: none !important; }

.star-field {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}

.ambient-bg > .star-field {
  position: absolute;
  z-index: 1;
}

.star {
  position: absolute;
  display: block;
  border-radius: 100%;
  background-color: #fff;
  box-shadow: 0 0 4px #fff, 0 0 11px rgba(255, 255, 255, .88);
  animation-name: var(--star-animation, move_right) !important;
  animation-duration: var(--star-duration, 10s) !important;
  animation-delay: var(--star-delay, 0s) !important;
  animation-play-state: running !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  filter: brightness(1.3);
  will-change: transform, opacity;
}

.star.star-gold {
  background-color: #fff;
  box-shadow: 0 0 6px #fff, 0 0 17px rgba(158, 210, 255, .95);
}

@keyframes move_right {
  from { transform: rotate(0deg) translateX(14px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(14px) rotate(-360deg); }
}

@keyframes move_left {
  from { transform: rotate(0deg) translateX(14px) rotate(0deg); }
  to { transform: rotate(-360deg) translateX(14px) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .star { animation: none !important; }
}