.site-bg-aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 16%, rgba(132, 0, 156, 0.58), transparent 34%),
    radial-gradient(circle at 42% 48%, rgba(60, 22, 128, 0.72), transparent 48%),
    radial-gradient(circle at 70% 76%, rgba(22, 52, 116, 0.52), transparent 38%),
    linear-gradient(135deg, #05000b 0%, #12001e 36%, #070011 72%, #010006 100%);
}

.site-bg-aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.2) 54%, rgba(0, 0, 0, 0.78) 100%);
}

.aurora-stage {
  position: absolute;
  inset: -7%;
  filter: blur(31px) saturate(1.75);
  transform-origin: center center;
  animation: auroraStage 10s ease-in-out infinite;
}

.aurora-orb {
  position: absolute;
  display: block;
  border-radius: 999px;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.aurora-purple-bg {
  width: 68vw;
  height: 44vw;
  left: 12%;
  top: 18%;
  background: radial-gradient(ellipse, rgba(116, 24, 184, 0.46), rgba(66, 18, 138, 0.28) 48%, transparent 76%);
  animation: purpleMove 10s ease-in-out infinite;
}

/* strong cyan/blue blob visible on left in early frames */
.aurora-cyan-primary {
  width: 30vw;
  height: 25vw;
  left: 22%;
  top: 25%;
  background: radial-gradient(circle, rgba(82, 197, 255, 1) 0%, rgba(39, 92, 255, 0.82) 42%, transparent 74%);
  animation: cyanPrimaryMove 10s ease-in-out infinite;
}

/* cyan that slides under/right of magenta in middle frames */
.aurora-cyan-secondary {
  width: 34vw;
  height: 24vw;
  left: 42%;
  top: 48%;
  background: radial-gradient(circle, rgba(73, 198, 255, 0.82) 0%, rgba(45, 101, 255, 0.58) 44%, transparent 78%);
  animation: cyanSecondaryMove 10s ease-in-out infinite;
}

/* dim bottom-right blue glow from the frames */
.aurora-blue-bottom {
  width: 24vw;
  height: 20vw;
  left: 58%;
  top: 66%;
  background: radial-gradient(circle, rgba(88, 159, 255, 0.42) 0%, rgba(42, 76, 186, 0.28) 50%, transparent 78%);
  animation: blueBottomMove 10s ease-in-out infinite;
}

/* main pink/magenta blob, medium sized */
.aurora-magenta-main {
  width: 37vw;
  height: 29vw;
  left: 34%;
  top: 31%;
  background: radial-gradient(circle, rgba(255, 43, 230, 0.96) 0%, rgba(255, 0, 196, 0.72) 42%, rgba(154, 28, 222, 0.28) 64%, transparent 76%);
  animation: magentaMainMove 10s ease-in-out infinite;
}

/* softer magenta extension, not too large */
.aurora-magenta-soft {
  width: 29vw;
  height: 21vw;
  left: 29%;
  top: 45%;
  background: radial-gradient(ellipse, rgba(255, 32, 213, 0.62) 0%, rgba(211, 0, 190, 0.36) 48%, transparent 78%);
  animation: magentaSoftMove 10s ease-in-out infinite;
}

.crp-page,
.container-fluid,
footer,
header,
main {
  position: relative;
  z-index: 1;
}

@keyframes auroraStage {
  0% {
    transform: scale(1.04) rotate(0deg);
  }
  22% {
    transform: scale(1.06) rotate(8deg);
  }
  45% {
    transform: scale(1.05) rotate(24deg);
  }
  68% {
    transform: scale(1.07) rotate(13deg);
  }
  100% {
    transform: scale(1.04) rotate(0deg);
  }
}

@keyframes purpleMove {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.72;
  }
  50% {
    transform: translate3d(4vw, 2vh, 0) scale(1.1);
    opacity: 0.86;
  }
}

@keyframes cyanPrimaryMove {
  0% {
    transform: translate3d(-3vw, -1vh, 0) scale(1.08);
    opacity: 0.95;
  }
  20% {
    transform: translate3d(0vw, 0vh, 0) scale(1.02);
    opacity: 0.9;
  }
  40% {
    transform: translate3d(16vw, 12vh, 0) scale(0.88);
    opacity: 0.58;
  }
  62% {
    transform: translate3d(29vw, 18vh, 0) scale(0.82);
    opacity: 0.46;
  }
  82% {
    transform: translate3d(7vw, 20vh, 0) scale(0.92);
    opacity: 0.62;
  }
  100% {
    transform: translate3d(-3vw, -1vh, 0) scale(1.08);
    opacity: 0.95;
  }
}

@keyframes cyanSecondaryMove {
  0% {
    transform: translate3d(-10vw, 1vh, 0) scale(0.86);
    opacity: 0.48;
  }
  25% {
    transform: translate3d(2vw, 5vh, 0) scale(0.95);
    opacity: 0.64;
  }
  50% {
    transform: translate3d(1vw, 2vh, 0) scale(1.14);
    opacity: 0.88;
  }
  72% {
    transform: translate3d(-13vw, -1vh, 0) scale(1.05);
    opacity: 0.76;
  }
  100% {
    transform: translate3d(-10vw, 1vh, 0) scale(0.86);
    opacity: 0.48;
  }
}

@keyframes blueBottomMove {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.34;
  }
  50% {
    transform: translate3d(-8vw, -4vh, 0) scale(1.18);
    opacity: 0.5;
  }
}

@keyframes magentaMainMove {
  0% {
    transform: translate3d(1vw, 2vh, 0) scale(0.95) rotate(-28deg);
    opacity: 0.86;
  }
  20% {
    transform: translate3d(2vw, 1vh, 0) scale(0.98) rotate(-16deg);
    opacity: 0.9;
  }
  40% {
    transform: translate3d(-4vw, -4vh, 0) scale(0.94) rotate(8deg);
    opacity: 0.86;
  }
  60% {
    transform: translate3d(-8vw, 4vh, 0) scale(1.04) rotate(24deg);
    opacity: 0.88;
  }
  80% {
    transform: translate3d(-12vw, 7vh, 0) scale(0.98) rotate(4deg);
    opacity: 0.84;
  }
  100% {
    transform: translate3d(1vw, 2vh, 0) scale(0.95) rotate(-28deg);
    opacity: 0.86;
  }
}

@keyframes magentaSoftMove {
  0% {
    transform: translate3d(0, 0, 0) scale(0.94) rotate(-24deg);
    opacity: 0.56;
  }
  25% {
    transform: translate3d(7vw, -2vh, 0) scale(0.96) rotate(-4deg);
    opacity: 0.58;
  }
  50% {
    transform: translate3d(13vw, 5vh, 0) scale(0.9) rotate(18deg);
    opacity: 0.48;
  }
  75% {
    transform: translate3d(-8vw, 2vh, 0) scale(1.02) rotate(-12deg);
    opacity: 0.54;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(0.94) rotate(-24deg);
    opacity: 0.56;
  }
}

@media (max-width: 768px) {
  .aurora-stage {
    inset: -24%;
    filter: blur(28px) saturate(1.7);
  }

  .aurora-cyan-primary,
  .aurora-cyan-secondary,
  .aurora-magenta-main {
    width: 60vw;
    height: 48vw;
  }

  .aurora-magenta-soft {
    width: 54vw;
    height: 38vw;
  }

  .aurora-purple-bg {
    width: 110vw;
    height: 78vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-stage,
  .aurora-orb {
    animation: none !important;
  }
}