.wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.parallaxGroup {
  position: absolute;
  inset: -12%;
  will-change: transform;
  transition: transform 0.35s ease-out;
}

.beamSweep {
  position: absolute;
  left: 50%;
  top: -40%;
  width: 220%;
  height: 220%;
  margin-left: -110%;
  margin-top: 0;
  background: conic-gradient(
    from 0deg at 50% 0%,
    transparent 0deg,
    rgb(244 114 182 / 0.09) 28deg,
    transparent 56deg,
    rgb(34 211 238 / 0.11) 92deg,
    transparent 118deg,
    rgb(250 204 21 / 0.07) 152deg,
    transparent 178deg,
    rgb(167 139 250 / 0.09) 210deg,
    transparent 245deg,
    rgb(52 211 153 / 0.06) 285deg,
    transparent 315deg,
    transparent 360deg
  );
  mix-blend-mode: screen;
  opacity: 0.75;
  animation: sweepRotate 22s linear infinite;
}

@keyframes sweepRotate {
  to {
    transform: rotate(360deg);
  }
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  mix-blend-mode: screen;
  pointer-events: none;
}

.blob1 {
  width: min(55vw, 520px);
  height: min(55vw, 520px);
  left: -8%;
  top: 8%;
  background: radial-gradient(circle, rgb(244 114 182 / 0.45) 0%, rgb(217 70 239 / 0.12) 45%, transparent 68%);
  animation: driftA 11s ease-in-out infinite;
}

.blob2 {
  width: min(48vw, 460px);
  height: min(48vw, 460px);
  right: -12%;
  top: 25%;
  background: radial-gradient(circle, rgb(34 211 238 / 0.42) 0%, rgb(14 165 233 / 0.1) 48%, transparent 70%);
  animation: driftB 13s ease-in-out infinite;
  animation-delay: -3s;
}

.blob3 {
  width: min(60vw, 580px);
  height: min(60vw, 580px);
  left: 18%;
  bottom: -18%;
  background: radial-gradient(circle, rgb(250 204 21 / 0.28) 0%, rgb(251 191 36 / 0.08) 50%, transparent 72%);
  animation: driftC 15s ease-in-out infinite;
  animation-delay: -5s;
}

.blob4 {
  width: min(42vw, 400px);
  height: min(42vw, 400px);
  right: 22%;
  bottom: 5%;
  background: radial-gradient(circle, rgb(167 139 250 / 0.38) 0%, rgb(139 92 246 / 0.1) 45%, transparent 68%);
  animation: driftD 12s ease-in-out infinite;
  animation-delay: -7s;
}

@keyframes driftA {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.55;
  }
  40% {
    transform: translate(6%, 10%) scale(1.12);
    opacity: 0.9;
  }
  70% {
    transform: translate(-4%, 5%) scale(0.94);
    opacity: 0.5;
  }
}

@keyframes driftB {
  0%,
  100% {
    transform: translate(0, 0) scale(1.05);
    opacity: 0.5;
  }
  35% {
    transform: translate(-8%, 6%) scale(1);
    opacity: 0.85;
  }
  65% {
    transform: translate(5%, -4%) scale(1.08);
    opacity: 0.55;
  }
}

@keyframes driftC {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.45;
  }
  45% {
    transform: translate(10%, -6%) scale(1.06);
    opacity: 0.8;
  }
  80% {
    transform: translate(-6%, 4%) scale(0.92);
    opacity: 0.5;
  }
}

@keyframes driftD {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(-10%, 8%) scale(1.15);
    opacity: 0.88;
  }
}

.shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgb(255 255 255 / 0.03) 42%,
    rgb(255 255 255 / 0.06) 50%,
    rgb(255 255 255 / 0.03) 58%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmerSlide 8s ease-in-out infinite;
  mix-blend-mode: overlay;
  opacity: 0.7;
}

@keyframes shimmerSlide {
  0%,
  100% {
    background-position: 130% 50%;
  }
  50% {
    background-position: -30% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .parallaxGroup {
    transition: none;
  }

  .beamSweep {
    animation: none;
    opacity: 0.4;
  }

  .blob1,
  .blob2,
  .blob3,
  .blob4 {
    animation: none;
    opacity: 0.35;
  }

  .shimmer {
    animation: none;
    opacity: 0.25;
  }
}
