/* Uiverse midnight sky, adapted for a fixed premium site background. */
body {
  background-color: #02040a;
  background:
    radial-gradient(circle at 50% -10%, rgba(88, 213, 255, 0.12), transparent 0 42%),
    linear-gradient(145deg, #02040a 0%, #07111d 46%, #020409 100%);
}

body::before,
body::after {
  display: none;
}

.uiverse-midnight-sky,
.uiverse-midnight-sky * {
  box-sizing: border-box;
}

body > .uiverse-midnight-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 500px;
  overflow: hidden;
  background-color: #050505;
  pointer-events: none;
  isolation: isolate;
  contain: strict;
}

.uiverse-midnight-sky .sky-canvas {
  position: absolute;
  inset: -4%;
  background:
    radial-gradient(circle at calc(24% + (var(--bg-x, 0px) * 0.16)) calc(18% + (var(--bg-y, 0px) * 0.12)), rgba(88, 213, 255, 0.16), transparent 0 32%),
    radial-gradient(circle at calc(78% - (var(--bg-x, 0px) * 0.14)) calc(78% - (var(--bg-y, 0px) * 0.1)), rgba(255, 157, 87, 0.1), transparent 0 30%),
    linear-gradient(180deg, #020307 0%, #07101b 42%, #03060e 70%, #010205 100%);
  transform: translate3d(0, calc(var(--bg-scroll, 0) * -34px), 0);
}

.uiverse-midnight-sky .sky-canvas::before,
.uiverse-midnight-sky .sky-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.uiverse-midnight-sky .sky-canvas::before {
  z-index: 3;
  background:
    linear-gradient(rgba(88, 213, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 213, 255, 0.032) 1px, transparent 1px);
  background-size: 112px 112px;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.44) 28%, rgba(0, 0, 0, 0.7) 76%, transparent 100%);
  opacity: calc(0.22 + (var(--bg-scroll, 0) * 0.14));
  transform: perspective(900px) rotateX(58deg) translate3d(0, calc(18% - (var(--bg-scroll, 0) * 80px)), 0);
  animation: skyGridDrift 46s linear infinite;
}

.uiverse-midnight-sky .sky-canvas::after {
  z-index: 4;
  background:
    linear-gradient(115deg, transparent 0 30%, rgba(88, 213, 255, 0.075) 44%, transparent 58% 100%),
    linear-gradient(245deg, transparent 0 54%, rgba(255, 157, 87, 0.045) 66%, transparent 78% 100%),
    radial-gradient(circle at 50% 42%, transparent 0 44%, rgba(0, 0, 0, 0.44) 100%),
    linear-gradient(180deg, rgba(1, 3, 7, 0.02), rgba(1, 3, 7, 0.48));
  background-size: 160% 160%, 140% 140%, 100% 100%, 100% 100%;
  animation: auroraVeil 34s ease-in-out infinite alternate;
}

.uiverse-midnight-sky .stars {
  position: absolute;
  inset: 0;
  z-index: 8;
  background-repeat: repeat;
  pointer-events: none;
  will-change: opacity, background-position;
}

.uiverse-midnight-sky .stars-1 {
  background-image:
    radial-gradient(1px 1px at 10% 10%, rgba(255, 255, 255, 0.95), transparent),
    radial-gradient(1px 1px at 30% 20%, rgba(180, 232, 255, 0.9), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 70% 30%, rgba(255, 255, 255, 0.86), transparent),
    radial-gradient(1px 1px at 90% 10%, rgba(180, 232, 255, 0.84), transparent);
  background-size: 190px 190px;
  animation: midnightTwinkle 6s ease-in-out infinite, starLayerDrift 150s linear infinite;
}

.uiverse-midnight-sky .stars-2 {
  background-image:
    radial-gradient(1.5px 1.5px at 20% 40%, rgba(255, 255, 255, 0.95), transparent),
    radial-gradient(1.5px 1.5px at 60% 85%, rgba(180, 232, 255, 0.86), transparent),
    radial-gradient(1.5px 1.5px at 85% 65%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 42% 18%, rgba(255, 237, 202, 0.74), transparent);
  background-size: 300px 300px;
  opacity: 0.82;
  animation: midnightTwinkle 8s ease-in-out infinite 1s, starLayerDrift 210s linear infinite reverse;
}

.uiverse-midnight-sky .stars-3 {
  background-image:
    radial-gradient(2px 2px at 40% 70%, rgba(255, 255, 255, 0.94), transparent),
    radial-gradient(2px 2px at 10% 80%, rgba(180, 232, 255, 0.78), transparent),
    radial-gradient(2px 2px at 80% 40%, rgba(255, 237, 202, 0.78), transparent);
  background-size: 430px 430px;
  opacity: 0.64;
  animation: midnightTwinkle 10s ease-in-out infinite 2s, starLayerDrift 300s linear infinite;
}

.uiverse-midnight-sky .constellation-lines {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.16;
  background:
    linear-gradient(24deg, transparent 0 17%, rgba(142, 232, 255, 0.12) 17.2%, transparent 18.4% 100%),
    linear-gradient(146deg, transparent 0 38%, rgba(142, 232, 255, 0.09) 38.2%, transparent 39.2% 100%),
    linear-gradient(78deg, transparent 0 62%, rgba(255, 237, 202, 0.07) 62.2%, transparent 63% 100%);
  background-size: 420px 320px, 520px 420px, 640px 460px;
  mask-image: radial-gradient(circle at 50% 44%, rgba(0, 0, 0, 0.85), transparent 68%);
  transform: translate3d(calc(var(--bg-x, 0px) * 0.04), calc(var(--bg-y, 0px) * 0.04), 0);
  animation: constellationDrift 90s linear infinite;
}

.uiverse-midnight-sky .meteor {
  position: absolute;
  z-index: 12;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 12px 2px rgba(255, 255, 255, 0.42),
    0 0 30px rgba(88, 213, 255, 0.24);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.uiverse-midnight-sky .meteor::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: clamp(86px, 12vw, 180px);
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(88, 213, 255, 0.34), transparent);
  transform: translateY(-50%);
  transform-origin: right center;
}

.uiverse-midnight-sky .m1 {
  top: 11%;
  left: 112%;
  animation: midnightShoot 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.uiverse-midnight-sky .m2 {
  top: 31%;
  left: 114%;
  animation: midnightShoot 13s cubic-bezier(0.4, 0, 0.2, 1) infinite 4.2s;
}

.uiverse-midnight-sky .m3 {
  top: 54%;
  left: 110%;
  animation: midnightShoot 11s cubic-bezier(0.4, 0, 0.2, 1) infinite 2.4s;
}

.uiverse-midnight-sky .m4 {
  top: 20%;
  left: 116%;
  animation: midnightShootSoft 15s cubic-bezier(0.4, 0, 0.2, 1) infinite 7s;
}

.uiverse-midnight-sky .m5 {
  top: 72%;
  left: 108%;
  animation: midnightShootSoft 18s cubic-bezier(0.4, 0, 0.2, 1) infinite 10s;
}

.uiverse-midnight-sky .moon {
  position: absolute;
  top: clamp(82px, 14vh, 150px);
  right: clamp(34px, 10vw, 160px);
  z-index: 16;
  width: clamp(54px, 6.2vw, 86px);
  height: clamp(54px, 6.2vw, 86px);
  border-radius: 50%;
  background: transparent;
  box-shadow: 15px 15px 0 0 #fdfbd3;
  filter:
    drop-shadow(0 0 16px rgba(253, 251, 211, 0.36))
    drop-shadow(0 0 44px rgba(88, 213, 255, 0.1));
  opacity: 0.9;
  transform: translate3d(calc(var(--bg-x, 0px) * -0.08), calc(var(--bg-y, 0px) * -0.06), 0);
  animation: moonFloat 12s ease-in-out infinite;
}

.uiverse-midnight-sky .moon::after {
  content: "";
  position: absolute;
  inset: -34px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 251, 211, 0.12), transparent 68%);
  transform: translate(12px, 16px);
}

.uiverse-midnight-sky .moon::before {
  content: "";
  position: absolute;
  inset: -22px;
  border: 1px solid rgba(253, 251, 211, 0.16);
  border-radius: 50%;
  transform: translate(12px, 16px);
  animation: moonHalo 5.5s ease-in-out infinite;
}

body.is-scrolling .uiverse-midnight-sky .stars-1,
body.is-scrolling .uiverse-midnight-sky .stars-2,
body.is-scrolling .uiverse-midnight-sky .stars-3 {
  filter: none;
}

body.is-scrolling .uiverse-midnight-sky .particle,
body.is-scrolling .uiverse-midnight-sky .constellation-lines {
  animation-play-state: paused;
}

.uiverse-midnight-sky .particle-field {
  position: absolute;
  inset: 0;
  z-index: 13;
  pointer-events: none;
  overflow: hidden;
  transform: translate3d(
    calc(var(--bg-x, 0px) * 0.08),
    calc((var(--bg-y, 0px) * 0.06) - (var(--bg-scroll, 0) * 42px)),
    0
  );
}

.uiverse-midnight-sky .particle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--color);
  box-shadow: 0 0 10px var(--glow);
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.82);
  animation: particleRise var(--duration) ease-in-out infinite;
  animation-delay: var(--delay);
  will-change: transform, opacity;
}

.uiverse-midnight-sky .particle::after {
  display: none;
}

.uiverse-midnight-sky .p1 {
  --x: 8%;
  --y: 78%;
  --size: 3px;
  --duration: 9s;
  --delay: -1s;
  --color: rgba(142, 232, 255, 0.94);
  --glow: rgba(88, 213, 255, 0.58);
}

.uiverse-midnight-sky .p2 {
  --x: 17%;
  --y: 48%;
  --size: 2px;
  --duration: 11s;
  --delay: -4s;
  --color: rgba(255, 255, 255, 0.88);
  --glow: rgba(255, 255, 255, 0.42);
}

.uiverse-midnight-sky .p3 {
  --x: 26%;
  --y: 88%;
  --size: 4px;
  --duration: 13s;
  --delay: -7s;
  --color: rgba(255, 199, 145, 0.82);
  --glow: rgba(255, 157, 87, 0.46);
}

.uiverse-midnight-sky .p4 {
  --x: 36%;
  --y: 62%;
  --size: 2px;
  --duration: 10s;
  --delay: -2s;
  --color: rgba(142, 232, 255, 0.84);
  --glow: rgba(88, 213, 255, 0.48);
}

.uiverse-midnight-sky .p5 {
  --x: 45%;
  --y: 82%;
  --size: 3px;
  --duration: 12s;
  --delay: -6s;
  --color: rgba(255, 255, 255, 0.86);
  --glow: rgba(255, 255, 255, 0.4);
}

.uiverse-midnight-sky .p6 {
  --x: 54%;
  --y: 52%;
  --size: 2px;
  --duration: 8.5s;
  --delay: -3s;
  --color: rgba(142, 232, 255, 0.9);
  --glow: rgba(88, 213, 255, 0.54);
}

.uiverse-midnight-sky .p7 {
  --x: 62%;
  --y: 90%;
  --size: 4px;
  --duration: 14s;
  --delay: -8s;
  --color: rgba(255, 199, 145, 0.76);
  --glow: rgba(255, 157, 87, 0.42);
}

.uiverse-midnight-sky .p8 {
  --x: 70%;
  --y: 66%;
  --size: 2px;
  --duration: 10.5s;
  --delay: -5s;
  --color: rgba(255, 255, 255, 0.82);
  --glow: rgba(255, 255, 255, 0.36);
}

.uiverse-midnight-sky .p9 {
  --x: 79%;
  --y: 84%;
  --size: 3px;
  --duration: 12.5s;
  --delay: -9s;
  --color: rgba(142, 232, 255, 0.88);
  --glow: rgba(88, 213, 255, 0.5);
}

.uiverse-midnight-sky .p10 {
  --x: 88%;
  --y: 58%;
  --size: 2px;
  --duration: 9.5s;
  --delay: -4.5s;
  --color: rgba(255, 199, 145, 0.72);
  --glow: rgba(255, 157, 87, 0.36);
}

.uiverse-midnight-sky .p11 {
  --x: 93%;
  --y: 92%;
  --size: 3px;
  --duration: 13.5s;
  --delay: -10s;
  --color: rgba(142, 232, 255, 0.82);
  --glow: rgba(88, 213, 255, 0.46);
}

.uiverse-midnight-sky .p12 {
  --x: 12%;
  --y: 25%;
  --size: 2px;
  --duration: 11.5s;
  --delay: -6.5s;
  --color: rgba(255, 255, 255, 0.78);
  --glow: rgba(255, 255, 255, 0.32);
}

.uiverse-midnight-sky .p13 {
  --x: 22%;
  --y: 68%;
  --size: 2px;
  --duration: 9.8s;
  --delay: -8.5s;
  --color: rgba(142, 232, 255, 0.86);
  --glow: rgba(88, 213, 255, 0.5);
}

.uiverse-midnight-sky .p14 {
  --x: 32%;
  --y: 34%;
  --size: 3px;
  --duration: 12.8s;
  --delay: -2.8s;
  --color: rgba(255, 255, 255, 0.8);
  --glow: rgba(255, 255, 255, 0.34);
}

.uiverse-midnight-sky .p15 {
  --x: 41%;
  --y: 94%;
  --size: 2px;
  --duration: 10.8s;
  --delay: -9.2s;
  --color: rgba(255, 199, 145, 0.76);
  --glow: rgba(255, 157, 87, 0.38);
}

.uiverse-midnight-sky .p16 {
  --x: 50%;
  --y: 26%;
  --size: 2px;
  --duration: 13.8s;
  --delay: -5.8s;
  --color: rgba(142, 232, 255, 0.78);
  --glow: rgba(88, 213, 255, 0.42);
}

.uiverse-midnight-sky .p17 {
  --x: 67%;
  --y: 38%;
  --size: 3px;
  --duration: 9.2s;
  --delay: -1.8s;
  --color: rgba(255, 255, 255, 0.84);
  --glow: rgba(255, 255, 255, 0.36);
}

.uiverse-midnight-sky .p18 {
  --x: 75%;
  --y: 76%;
  --size: 2px;
  --duration: 12.2s;
  --delay: -7.6s;
  --color: rgba(142, 232, 255, 0.82);
  --glow: rgba(88, 213, 255, 0.46);
}

.uiverse-midnight-sky .p19 {
  --x: 84%;
  --y: 28%;
  --size: 3px;
  --duration: 14.8s;
  --delay: -11s;
  --color: rgba(255, 199, 145, 0.72);
  --glow: rgba(255, 157, 87, 0.34);
}

.uiverse-midnight-sky .p20 {
  --x: 96%;
  --y: 72%;
  --size: 2px;
  --duration: 10.2s;
  --delay: -4.8s;
  --color: rgba(255, 255, 255, 0.76);
  --glow: rgba(255, 255, 255, 0.3);
}

@keyframes midnightTwinkle {
  0%,
  100% {
    opacity: 0.88;
  }
  50% {
    opacity: 0.32;
  }
}

@keyframes starLayerDrift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -420px 320px;
  }
}

@keyframes auroraVeil {
  0% {
    background-position: 0% 50%, 100% 50%, 0 0, 0 0;
    opacity: 0.86;
  }
  100% {
    background-position: 100% 50%, 0% 50%, 0 0, 0 0;
    opacity: 1;
  }
}

@keyframes particleRise {
  0% {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(0.75);
  }
  18% {
    opacity: 0.82;
  }
  54% {
    opacity: 0.58;
    transform: translate3d(14px, -68px, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(-18px, -150px, 0) scale(0.7);
  }
}

@keyframes midnightShoot {
  0%,
  70% {
    transform: translate3d(0, 0, 0) rotate(-35deg);
    opacity: 0;
  }
  73% {
    opacity: 1;
  }
  82% {
    opacity: 0;
  }
  100% {
    transform: translate3d(-1500px, 1000px, 0) rotate(-35deg);
    opacity: 0;
  }
}

@keyframes midnightShootSoft {
  0%,
  76% {
    transform: translate3d(0, 0, 0) rotate(-35deg) scale(0.78);
    opacity: 0;
  }
  80% {
    opacity: 0.72;
  }
  88% {
    opacity: 0;
  }
  100% {
    transform: translate3d(-1250px, 840px, 0) rotate(-35deg) scale(0.78);
    opacity: 0;
  }
}

@keyframes moonFloat {
  0%,
  100% {
    opacity: 0.82;
    filter:
      drop-shadow(0 0 14px rgba(253, 251, 211, 0.3))
      drop-shadow(0 0 34px rgba(88, 213, 255, 0.08));
  }
  50% {
    opacity: 0.96;
    filter:
      drop-shadow(0 0 18px rgba(253, 251, 211, 0.42))
      drop-shadow(0 0 48px rgba(88, 213, 255, 0.12));
  }
}

@keyframes moonHalo {
  0%,
  100% {
    opacity: 0.28;
    transform: translate(12px, 16px) scale(0.92);
  }
  50% {
    opacity: 0.62;
    transform: translate(12px, 16px) scale(1.08);
  }
}

@keyframes constellationDrift {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 420px 160px, -520px 220px, 640px -180px;
  }
}

@keyframes skyGridDrift {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 112px 112px, 112px 112px;
  }
}

@media (max-width: 720px) {
  .uiverse-midnight-sky .constellation-lines,
  .uiverse-midnight-sky .p13,
  .uiverse-midnight-sky .p14,
  .uiverse-midnight-sky .p15,
  .uiverse-midnight-sky .p16,
  .uiverse-midnight-sky .p17,
  .uiverse-midnight-sky .p18,
  .uiverse-midnight-sky .p19,
  .uiverse-midnight-sky .p20,
  .uiverse-midnight-sky .m4,
  .uiverse-midnight-sky .m5 {
    display: none;
  }

  .uiverse-midnight-sky .meteor::after {
    width: 92px;
  }

  .uiverse-midnight-sky .moon {
    top: 98px;
    right: 30px;
    opacity: 0.76;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uiverse-midnight-sky,
  .uiverse-midnight-sky * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}