/**
 * KEEP-Up night sky — stars, nebulas, scroll shadows (no planet WebGL).
 *
 * SOURCE OF TRUTH for static stacks (Shop / Hub). Keep in sync with the
 * `.keepup-sky*` block in keepup-app/src/styles/design-system.css.
 * Requires purple RGB tokens (--keepup-purple-*-rgb) from tokens.css.
 */

@property --sky-scroll {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --sky-turn {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

.keepup-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
  isolation: isolate;
}

.keepup-sky__layer {
  position: absolute;
  inset: 0;
}

.keepup-sky__far,
.keepup-sky__mid,
.keepup-sky__near {
  inset: -18vmax;
  transform-origin: center;
  background-repeat: repeat;
  background-position: 0 0;
}

.keepup-sky__nebula {
  inset: -10vh -8vw;
  background:
    radial-gradient(ellipse 58% 42% at 8% 12%,
      rgba(var(--keepup-purple-3-rgb), 0.42) 0%,
      rgba(var(--keepup-purple-4-rgb), 0.18) 40%,
      transparent 74%),
    radial-gradient(ellipse 50% 38% at 94% 10%,
      rgba(var(--keepup-purple-2-rgb), 0.26) 0%,
      rgba(102, 255, 136, 0.09) 38%,
      transparent 72%),
    radial-gradient(ellipse 46% 34% at 82% 88%,
      rgba(var(--keepup-purple-3-rgb), 0.3) 0%,
      transparent 70%),
    radial-gradient(ellipse 40% 30% at 14% 84%,
      rgba(16, 185, 129, 0.1) 0%,
      rgba(var(--keepup-purple-4-rgb), 0.16) 44%,
      transparent 74%);
}

.keepup-sky__nebula--drift {
  inset: -12vh -8vw;
  opacity: 0.85;
  background:
    radial-gradient(ellipse 72% 26% at 46% 38%,
      rgba(var(--keepup-purple-3-rgb), 0.22) 0%,
      transparent 72%),
    radial-gradient(ellipse 34% 52% at 64% 60%,
      rgba(var(--keepup-purple-2-rgb), 0.16) 0%,
      transparent 70%);
  transform: rotate(calc(var(--sky-turn, 0deg) * 0.32));
  transform-origin: 50% 45%;
}

.keepup-sky__far {
  --eg-star-opacity: 0.9;
  opacity: var(--eg-star-opacity);
  transform: rotate(var(--sky-turn, 0deg)) translate3d(
    calc(var(--sky-scroll, 0) * 0.02px),
    calc(var(--sky-scroll, 0) * 0.1px),
    0
  );
  background-image:
    radial-gradient(circle at 18px 42px, rgba(255, 255, 255, 0.78) 0 0.7px, transparent 1.1px),
    radial-gradient(circle at 96px 140px, rgba(230, 213, 232, 0.58) 0 0.55px, transparent 0.95px),
    radial-gradient(circle at 180px 22px, rgba(210, 228, 255, 0.5) 0 0.5px, transparent 0.9px),
    radial-gradient(circle at 250px 210px, rgba(194, 149, 197, 0.52) 0 0.6px, transparent 1px),
    radial-gradient(circle at 320px 88px, rgba(255, 248, 230, 0.62) 0 0.75px, transparent 1.15px),
    radial-gradient(circle at 400px 300px, rgba(230, 213, 232, 0.42) 0 0.45px, transparent 0.85px),
    radial-gradient(circle at 60px 360px, rgba(255, 255, 255, 0.48) 0 0.55px, transparent 0.95px),
    radial-gradient(circle at 210px 430px, rgba(196, 255, 214, 0.36) 0 0.5px, transparent 0.9px),
    radial-gradient(circle at 460px 160px, rgba(255, 255, 255, 0.56) 0 0.7px, transparent 1.1px),
    radial-gradient(circle at 140px 490px, rgba(194, 149, 197, 0.4) 0 0.45px, transparent 0.85px),
    radial-gradient(circle at 70px 90px, rgba(255, 255, 255, 0.66) 0 0.7px, transparent 1.1px),
    radial-gradient(circle at 240px 260px, rgba(230, 213, 232, 0.44) 0 0.5px, transparent 0.9px);
  background-size: 560px 620px;
}

.keepup-sky__mid {
  --eg-star-opacity: 0.92;
  opacity: var(--eg-star-opacity);
  transform: rotate(var(--sky-turn, 0deg)) translate3d(
    calc(var(--sky-scroll, 0) * -0.03px),
    calc(var(--sky-scroll, 0) * 0.18px),
    0
  );
  background-image:
    radial-gradient(circle at 70px 90px, rgba(255, 255, 255, 0.95) 0 0.9px, transparent 1.35px),
    radial-gradient(6px 0.4px at 70px 90px, rgba(255, 255, 255, 0.4), transparent 70%),
    radial-gradient(0.4px 6px at 70px 90px, rgba(255, 255, 255, 0.34), transparent 70%),
    radial-gradient(circle at 210px 48px, rgba(230, 213, 232, 0.82) 0 0.7px, transparent 1.15px),
    radial-gradient(circle at 340px 170px, rgba(196, 255, 214, 0.5) 0 0.6px, transparent 1px),
    radial-gradient(circle at 120px 280px, rgba(194, 149, 197, 0.8) 0 0.8px, transparent 1.25px),
    radial-gradient(circle at 500px 140px, rgba(255, 248, 230, 0.9) 0 0.95px, transparent 1.4px),
    radial-gradient(7px 0.35px at 500px 140px, rgba(255, 248, 230, 0.36), transparent 70%),
    radial-gradient(0.35px 7px at 500px 140px, rgba(255, 248, 230, 0.3), transparent 70%);
  background-size: 920px 860px;
}

.keepup-sky__near {
  --eg-star-opacity: 0.95;
  opacity: var(--eg-star-opacity);
  transform: rotate(var(--sky-turn, 0deg)) translate3d(
    calc(var(--sky-scroll, 0) * 0.04px),
    calc(var(--sky-scroll, 0) * 0.26px),
    0
  );
  background-image:
    radial-gradient(circle at 90px 60px, rgba(255, 255, 255, 0.98) 0 1px, transparent 1.45px),
    radial-gradient(8px 0.4px at 90px 60px, rgba(255, 255, 255, 0.44), transparent 70%),
    radial-gradient(0.4px 8px at 90px 60px, rgba(255, 255, 255, 0.38), transparent 70%),
    radial-gradient(circle at 320px 240px, rgba(230, 213, 232, 0.86) 0 0.75px, transparent 1.2px),
    radial-gradient(circle at 520px 120px, rgba(194, 149, 197, 0.8) 0 0.85px, transparent 1.3px),
    radial-gradient(circle at 180px 400px, rgba(255, 255, 255, 0.92) 0 0.7px, transparent 1.15px),
    radial-gradient(circle at 60px 500px, rgba(255, 248, 230, 0.88) 0 0.9px, transparent 1.35px),
    radial-gradient(7px 0.35px at 60px 500px, rgba(255, 248, 230, 0.34), transparent 70%),
    radial-gradient(0.35px 7px at 60px 500px, rgba(255, 248, 230, 0.3), transparent 70%);
  background-size: 1480px 1360px;
}

@media (max-width: 768px), (pointer: coarse) {
  .keepup-sky__nebula--drift,
  .keepup-sky__mid {
    display: none;
  }

  .keepup-sky__far,
  .keepup-sky__near {
    inset: -12vmax;
  }
}

@keyframes keepup-sky-scroll {
  from { --sky-scroll: 0; }
  to { --sky-scroll: 2800; }
}

@supports (animation-timeline: scroll()) {
  .keepup-sky:not(.keepup-sky--js) {
    animation: keepup-sky-scroll linear both;
    animation-timeline: scroll(root);
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  .keepup-sky {
    --sky-scroll: 0 !important;
  }

  .keepup-sky,
  .keepup-sky:not(.keepup-sky--js) {
    animation: none !important;
  }

  .keepup-sky__nebula,
  .keepup-sky__nebula--drift {
    transform: none !important;
  }

  .keepup-sky__far,
  .keepup-sky__mid,
  .keepup-sky__near {
    animation: none !important;
    transform: none !important;
  }
}

@media print {
  .keepup-sky {
    display: none !important;
  }
}