/* Preset sky for Neon theme (magenta / cyan grid mist) */
html[data-theme="neon"] .cosmos {
  background:
    radial-gradient(ellipse 115% 75% at 50% 108%, rgba(255, 0, 180, 0.26) 0%, transparent 54%),
    radial-gradient(ellipse 85% 55% at 6% 18%, rgba(0, 245, 232, 0.14) 0%, transparent 46%),
    radial-gradient(ellipse 75% 50% at 94% 22%, rgba(180, 90, 255, 0.16) 0%, transparent 46%),
    linear-gradient(180deg, #020008 0%, #07021c 48%, #020010 100%);
}

html[data-theme="neon"] .cosmos::before {
  opacity: 0.62;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 46px,
      rgba(0, 245, 232, 0.055) 46px,
      rgba(0, 245, 232, 0.055) 47px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 46px,
      rgba(255, 0, 190, 0.045) 46px,
      rgba(255, 0, 190, 0.045) 47px
    ),
    radial-gradient(1px 1px at 12% 18%, rgba(0, 255, 240, 0.55), transparent),
    radial-gradient(1px 1px at 88% 12%, rgba(255, 60, 200, 0.45), transparent),
    radial-gradient(1.2px 1.2px at 42% 72%, rgba(200, 120, 255, 0.5), transparent),
    radial-gradient(1px 1px at 72% 58%, rgba(0, 245, 232, 0.4), transparent);
  background-size: 100% 100%;
  animation: rosin-neon-sky 8s ease-in-out infinite alternate;
}

html[data-theme="neon"] .cosmos::after {
  background:
    radial-gradient(ellipse 50% 28% at 72% 78%, rgba(255, 0, 180, 0.12) 0%, transparent 100%),
    radial-gradient(ellipse 40% 22% at 22% 58%, rgba(0, 245, 232, 0.08) 0%, transparent 100%);
}

html[data-cosmos-custom-bg="1"][data-theme="neon"] .cosmos::before {
  opacity: 0.22;
}

html[data-cosmos-custom-bg="1"][data-theme="neon"] .cosmos::after {
  opacity: 0.32;
}

@keyframes rosin-neon-sky {
  0% {
    opacity: 0.5;
    filter: hue-rotate(0deg);
  }
  100% {
    opacity: 0.72;
    filter: hue-rotate(18deg);
  }
}