body.neo-bg-enabled {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

.bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 80% at 50% -15%, rgba(255, 255, 255, 0.82), transparent 50%),
    linear-gradient(168deg, #edf7f3 0%, #dfecef 34%, #d8e5f0 68%, #e1e9f3 100%);
}

.bg-aurora-wrap {
  position: absolute;
  inset: -5%;
  opacity: 0.84;
  transform: translateZ(0);
}

.bg-aurora {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 150vmax;
  height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: neo-common-aurora-spin 32s linear infinite;
}

.bg-aurora::after {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: conic-gradient(
    from 200deg,
    rgba(45, 212, 191, 0.26),
    rgba(96, 165, 250, 0.24),
    rgba(192, 132, 252, 0.2),
    rgba(244, 114, 182, 0.16),
    rgba(34, 211, 238, 0.22),
    rgba(45, 212, 191, 0.26)
  );
  filter: blur(56px);
}

@keyframes neo-common-aurora-spin {
  to {
    transform: rotate(360deg);
  }
}

.bg-mesh {
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(closest-side at 12% 28%, rgba(255, 255, 255, 0.58), transparent 46%),
    radial-gradient(closest-side at 88% 18%, rgba(147, 197, 253, 0.18), transparent 44%),
    radial-gradient(closest-side at 92% 82%, rgba(125, 211, 252, 0.2), transparent 42%),
    radial-gradient(closest-side at 6% 85%, rgba(134, 239, 172, 0.16), transparent 45%),
    radial-gradient(closest-side at 48% 108%, rgba(253, 224, 200, 0.14), transparent 48%);
}

.bg-blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.bg-blob--1 {
  width: min(58vmin, 460px);
  height: min(58vmin, 460px);
  background: radial-gradient(circle, rgba(56, 189, 248, 0.38) 0%, transparent 68%);
  top: -14%;
  left: -10%;
  animation: neo-common-blob-1 16s ease-in-out infinite;
}

.bg-blob--2 {
  width: min(48vmin, 380px);
  height: min(48vmin, 380px);
  background: radial-gradient(circle, rgba(167, 139, 250, 0.32) 0%, transparent 70%);
  top: 18%;
  right: -12%;
  animation: neo-common-blob-2 19s ease-in-out infinite;
}

.bg-blob--3 {
  width: min(62vmin, 520px);
  height: min(62vmin, 520px);
  background: radial-gradient(circle, rgba(45, 212, 191, 0.28) 0%, transparent 65%);
  bottom: -22%;
  left: 8%;
  animation: neo-common-blob-3 22s ease-in-out infinite;
}

.bg-blob--4 {
  width: min(36vmin, 280px);
  height: min(36vmin, 280px);
  background: radial-gradient(circle, rgba(251, 207, 232, 0.35) 0%, transparent 72%);
  bottom: 12%;
  right: 4%;
  animation: neo-common-blob-4 14s ease-in-out infinite;
}

@keyframes neo-common-blob-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(14%, 18%) scale(1.08); }
}

@keyframes neo-common-blob-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-16%, 12%) scale(1.1); }
}

@keyframes neo-common-blob-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(12%, -14%) scale(1.06); }
}

@keyframes neo-common-blob-4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-14%, -16%) scale(1.14); }
}

.bg-grid-fade {
  position: absolute;
  inset: 0;
  opacity: 0.62;
  background-image:
    linear-gradient(rgba(71, 85, 105, 0.068) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 85, 105, 0.068) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 48%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 48%, #000 0%, transparent 72%);
}

.bg-grain {
  position: absolute;
  inset: 0;
  opacity: 0.56;
  background-image: radial-gradient(rgba(71, 85, 105, 0.078) 1px, transparent 1px);
  background-size: 18px 18px;
}

.bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 84% 74% at 50% 50%, transparent 0%, rgba(176, 190, 210, 0.62) 100%);
}

@media (max-width: 768px) {
  .bg-aurora {
    width: 180vmax;
    height: 180vmax;
    margin: -90vmax 0 0 -90vmax;
  }

  .bg-blob--1,
  .bg-blob--2,
  .bg-blob--3,
  .bg-blob--4 {
    opacity: 0.8;
  }
}