/* AbraOne cosmos background — keep in sync with abraone-sub-link/css/cosmos.css */

#cosmos-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.cosmos-layer {
  position: absolute;
  inset: -20%;
  will-change: transform;
}

/* Deep space base gradient */
.cosmos-deep {
  inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 50% 100%, #0f0a18 0%, transparent 55%),
    radial-gradient(ellipse 80% 50% at 80% 20%, #0a1020 0%, transparent 45%),
    linear-gradient(180deg, #050508 0%, #0a0a0c 40%, #08060f 100%);
}

/* Nebula — brand orange + indigo */
.cosmos-nebula {
  opacity: 0.85;
  background:
    radial-gradient(ellipse 55% 45% at 15% 25%, rgba(249, 115, 22, 0.14) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 70%, rgba(99, 102, 241, 0.12) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 60% 15%, rgba(168, 85, 247, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 35% 30% at 30% 80%, rgba(249, 115, 22, 0.06) 0%, transparent 55%);
  filter: blur(1px);
}

/* Fine star dust — dense micro field */
.cosmos-dust {
  opacity: 0.4;
  background-image:
    radial-gradient(0.5px 0.5px at 74% 61%, rgba(255, 255, 255, 0.15), transparent),
    radial-gradient(0.5px 0.5px at 67% 20%, rgba(255, 255, 255, 0.09), transparent),
    radial-gradient(0.5px 0.5px at 65% 10%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(0.5px 0.5px at 8% 76%, rgba(255, 255, 255, 0.09), transparent),
    radial-gradient(0.5px 0.5px at 30% 51%, rgba(255, 255, 255, 0.1), transparent),
    radial-gradient(0.5px 0.5px at 72% 31%, rgba(255, 255, 255, 0.16), transparent),
    radial-gradient(0.5px 0.5px at 5% 79%, rgba(255, 255, 255, 0.09), transparent),
    radial-gradient(0.5px 0.5px at 84% 74%, rgba(255, 255, 255, 0.16), transparent),
    radial-gradient(0.5px 0.5px at 40% 33%, rgba(255, 255, 255, 0.11), transparent),
    radial-gradient(0.5px 0.5px at 91% 40%, rgba(255, 255, 255, 0.11), transparent),
    radial-gradient(0.5px 0.5px at 50% 16%, rgba(255, 255, 255, 0.17), transparent),
    radial-gradient(0.5px 0.5px at 38% 58%, rgba(255, 255, 255, 0.12), transparent),
    radial-gradient(0.5px 0.5px at 96% 9%, rgba(255, 255, 255, 0.08), transparent),
    radial-gradient(0.5px 0.5px at 79% 72%, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(0.5px 0.5px at 9% 68%, rgba(255, 255, 255, 0.11), transparent),
    radial-gradient(0.5px 0.5px at 33% 16%, rgba(255, 255, 255, 0.21), transparent),
    radial-gradient(0.5px 0.5px at 8% 31%, rgba(255, 255, 255, 0.13), transparent),
    radial-gradient(0.5px 0.5px at 20% 56%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(0.5px 0.5px at 90% 38%, rgba(255, 255, 255, 0.17), transparent),
    radial-gradient(0.5px 0.5px at 83% 67%, rgba(255, 255, 255, 0.08), transparent),
    radial-gradient(0.5px 0.5px at 70% 38%, rgba(255, 255, 255, 0.21), transparent),
    radial-gradient(0.5px 0.5px at 13% 17%, rgba(255, 255, 255, 0.12), transparent),
    radial-gradient(0.5px 0.5px at 13% 95%, rgba(255, 255, 255, 0.16), transparent),
    radial-gradient(0.5px 0.5px at 34% 36%, rgba(255, 255, 255, 0.16), transparent),
    radial-gradient(0.5px 0.5px at 91% 43%, rgba(255, 255, 255, 0.11), transparent),
    radial-gradient(0.5px 0.5px at 81% 33%, rgba(255, 255, 255, 0.15), transparent),
    radial-gradient(0.5px 0.5px at 32% 6%, rgba(255, 255, 255, 0.09), transparent),
    radial-gradient(0.5px 0.5px at 54% 35%, rgba(255, 255, 255, 0.09), transparent),
    radial-gradient(0.5px 0.5px at 42% 98%, rgba(255, 255, 255, 0.1), transparent),
    radial-gradient(0.5px 0.5px at 33% 20%, rgba(255, 255, 255, 0.18), transparent),
    radial-gradient(0.5px 0.5px at 70% 90%, rgba(255, 255, 255, 0.14), transparent),
    radial-gradient(0.5px 0.5px at 1% 14%, rgba(255, 255, 255, 0.09), transparent),
    radial-gradient(0.5px 0.5px at 88% 19%, rgba(255, 255, 255, 0.16), transparent),
    radial-gradient(0.5px 0.5px at 47% 74%, rgba(255, 255, 255, 0.16), transparent),
    radial-gradient(0.5px 0.5px at 55% 16%, rgba(255, 255, 255, 0.09), transparent),
    radial-gradient(0.5px 0.5px at 46% 5%, rgba(255, 255, 255, 0.21), transparent),
    radial-gradient(0.5px 0.5px at 26% 87%, rgba(255, 255, 255, 0.11), transparent),
    radial-gradient(0.5px 0.5px at 13% 45%, rgba(255, 255, 255, 0.19), transparent),
    radial-gradient(0.5px 0.5px at 52% 79%, rgba(255, 255, 255, 0.18), transparent),
    radial-gradient(0.5px 0.5px at 30% 20%, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(0.5px 0.5px at 22% 52%, rgba(255, 255, 255, 0.08), transparent),
    radial-gradient(0.5px 0.5px at 94% 42%, rgba(255, 255, 255, 0.19), transparent),
    radial-gradient(0.5px 0.5px at 52% 85%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(0.5px 0.5px at 31% 34%, rgba(255, 255, 255, 0.1), transparent),
    radial-gradient(0.5px 0.5px at 89% 13%, rgba(255, 255, 255, 0.13), transparent),
    radial-gradient(0.5px 0.5px at 4% 60%, rgba(255, 255, 255, 0.11), transparent),
    radial-gradient(0.5px 0.5px at 58% 44%, rgba(255, 255, 255, 0.12), transparent),
    radial-gradient(0.5px 0.5px at 29% 28%, rgba(255, 255, 255, 0.08), transparent),
    radial-gradient(0.5px 0.5px at 24% 51%, rgba(255, 255, 255, 0.13), transparent),
    radial-gradient(0.5px 0.5px at 8% 98%, rgba(255, 255, 255, 0.12), transparent),
    radial-gradient(0.5px 0.5px at 82% 65%, rgba(255, 255, 255, 0.14), transparent),
    radial-gradient(0.5px 0.5px at 68% 42%, rgba(255, 255, 255, 0.21), transparent),
    radial-gradient(0.5px 0.5px at 14% 33%, rgba(255, 255, 255, 0.1), transparent),
    radial-gradient(0.5px 0.5px at 33% 4%, rgba(255, 255, 255, 0.1), transparent),
    radial-gradient(0.5px 0.5px at 55% 44%, rgba(255, 255, 255, 0.18), transparent);
  background-size: 200px 200px;
  background-repeat: repeat;
}

/* Far stars — tiled dense field */
.cosmos-stars-far {
  background-image:
    radial-gradient(0.5px 0.5px at 83% 16%, rgba(255, 210, 170, 0.23), transparent),
    radial-gradient(1px 1px at 19% 96%, rgba(255, 210, 170, 0.37), transparent),
    radial-gradient(0.5px 0.5px at 13% 77%, rgba(255, 255, 255, 0.16), transparent),
    radial-gradient(1px 1px at 31% 66%, rgba(255, 255, 255, 0.32), transparent),
    radial-gradient(0.5px 0.5px at 55% 30%, rgba(255, 255, 255, 0.23), transparent),
    radial-gradient(0.5px 0.5px at 22% 91%, rgba(255, 255, 255, 0.23), transparent),
    radial-gradient(1px 1px at 45% 15%, rgba(255, 210, 170, 0.18), transparent),
    radial-gradient(1px 1px at 79% 35%, rgba(255, 255, 255, 0.37), transparent),
    radial-gradient(1px 1px at 17% 50%, rgba(255, 210, 170, 0.24), transparent),
    radial-gradient(0.5px 0.5px at 48% 75%, rgba(255, 255, 255, 0.17), transparent),
    radial-gradient(1px 1px at 39% 12%, rgba(255, 255, 255, 0.41), transparent),
    radial-gradient(1px 1px at 37% 60%, rgba(255, 255, 255, 0.26), transparent),
    radial-gradient(0.5px 0.5px at 47% 28%, rgba(255, 255, 255, 0.36), transparent),
    radial-gradient(0.5px 0.5px at 79% 83%, rgba(255, 210, 170, 0.37), transparent),
    radial-gradient(1px 1px at 61% 50%, rgba(255, 255, 255, 0.43), transparent),
    radial-gradient(0.5px 0.5px at 30% 89%, rgba(255, 255, 255, 0.38), transparent),
    radial-gradient(0.5px 0.5px at 31% 6%, rgba(255, 255, 255, 0.27), transparent),
    radial-gradient(1px 1px at 29% 74%, rgba(255, 255, 255, 0.24), transparent),
    radial-gradient(0.5px 0.5px at 52% 84%, rgba(255, 255, 255, 0.23), transparent),
    radial-gradient(1px 1px at 97% 73%, rgba(255, 255, 255, 0.37), transparent),
    radial-gradient(0.5px 0.5px at 76% 53%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(0.5px 0.5px at 67% 65%, rgba(255, 210, 170, 0.16), transparent),
    radial-gradient(1px 1px at 21% 82%, rgba(255, 210, 170, 0.35), transparent),
    radial-gradient(1px 1px at 10% 51%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(0.5px 0.5px at 34% 72%, rgba(255, 255, 255, 0.15), transparent),
    radial-gradient(1px 1px at 89% 70%, rgba(255, 255, 255, 0.38), transparent),
    radial-gradient(1px 1px at 16% 39%, rgba(255, 255, 255, 0.29), transparent),
    radial-gradient(1px 1px at 66% 24%, rgba(255, 255, 255, 0.18), transparent),
    radial-gradient(0.5px 0.5px at 83% 66%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1px 1px at 71% 69%, rgba(255, 255, 255, 0.33), transparent),
    radial-gradient(1px 1px at 4% 16%, rgba(255, 255, 255, 0.41), transparent),
    radial-gradient(0.5px 0.5px at 32% 9%, rgba(255, 255, 255, 0.32), transparent),
    radial-gradient(1px 1px at 12% 95%, rgba(255, 255, 255, 0.17), transparent),
    radial-gradient(0.5px 0.5px at 18% 18%, rgba(255, 255, 255, 0.43), transparent),
    radial-gradient(0.5px 0.5px at 35% 69%, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(1px 1px at 71% 98%, rgba(255, 255, 255, 0.21), transparent),
    radial-gradient(1px 1px at 53% 87%, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(0.5px 0.5px at 59% 17%, rgba(255, 255, 255, 0.17), transparent);
  background-size: 320px 320px;
  background-repeat: repeat;
}

/* Near stars — softer glow, sparser tile */
.cosmos-stars-near {
  background-image:
    radial-gradient(4px 4px at 80% 75%, rgba(255, 255, 255, 0.41) 0%, rgba(255, 255, 255, 0.06) 45%, transparent 70%),
    radial-gradient(4px 4px at 12% 34%, rgba(255, 220, 180, 0.56) 0%, rgba(255, 255, 255, 0.08) 45%, transparent 70%),
    radial-gradient(3.5px 3.5px at 35% 40%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.06) 45%, transparent 70%),
    radial-gradient(3px 3px at 78% 78%, rgba(255, 220, 180, 0.55) 0%, rgba(255, 255, 255, 0.08) 45%, transparent 70%),
    radial-gradient(3px 3px at 17% 89%, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.07) 45%, transparent 70%),
    radial-gradient(4px 4px at 11% 91%, rgba(255, 255, 255, 0.51) 0%, rgba(255, 255, 255, 0.08) 45%, transparent 70%),
    radial-gradient(3px 3px at 48% 18%, rgba(255, 220, 180, 0.4) 0%, rgba(255, 255, 255, 0.06) 45%, transparent 70%),
    radial-gradient(4px 4px at 28% 40%, rgba(255, 255, 255, 0.57) 0%, rgba(255, 255, 255, 0.09) 45%, transparent 70%),
    radial-gradient(5px 5px at 75% 17%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.13) 45%, transparent 70%),
    radial-gradient(3px 3px at 35% 26%, rgba(255, 255, 255, 0.47) 0%, rgba(255, 255, 255, 0.07) 45%, transparent 70%),
    radial-gradient(3.5px 3.5px at 26% 53%, rgba(255, 255, 255, 0.67) 0%, rgba(255, 255, 255, 0.1) 45%, transparent 70%),
    radial-gradient(3.5px 3.5px at 94% 76%, rgba(255, 255, 255, 0.47) 0%, rgba(255, 255, 255, 0.07) 45%, transparent 70%),
    radial-gradient(3px 3px at 12% 79%, rgba(255, 220, 180, 0.37) 0%, rgba(255, 255, 255, 0.06) 45%, transparent 70%);
  background-size: 480px 480px;
  background-repeat: repeat;
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .cosmos-dust,
  .cosmos-nebula,
  .cosmos-stars-far,
  .cosmos-stars-near {
    will-change: transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cosmos-layer {
    will-change: auto;
  }
}