.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 50% -8%, rgba(255, 111, 181, 0.2), transparent 65%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 55%);
}

.bg__blob {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent 72%);
  animation: drift 40s ease-in-out infinite alternate;
  will-change: transform;
}
.bg__blob--1 {
  --c: rgba(255, 111, 181, 0.32);
  top: -30vmax;
  left: -20vmax;
}
.bg__blob--2 {
  --c: rgba(192, 132, 252, 0.22);
  right: -28vmax;
  top: 5vmax;
  animation-duration: 48s;
  animation-delay: -12s;
}
.bg__blob--3 {
  --c: rgba(255, 166, 213, 0.18);
  left: 0;
  bottom: -38vmax;
  animation-duration: 56s;
  animation-delay: -24s;
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(7vmax, 5vmax, 0) scale(1.15);
  }
}

.bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 190, 226, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 190, 226, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 18%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 75% 55% at 50% 18%, #000 10%, transparent 72%);
}

.bg__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bg__noise {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

.decor {
  position: absolute;
  inset: 0;
}
.decor__item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  opacity: var(--o, 0.3);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  filter: drop-shadow(0 8px 20px rgba(255, 111, 181, 0.35)) blur(var(--blur, 0px));
  animation: bob var(--dur, 9s) ease-in-out var(--delay, 0s) infinite alternate;
  will-change: transform;
}
.decor__item svg,
.decor__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@keyframes bob {
  from {
    transform: translate(-50%, -50%) rotate(var(--r, 0deg)) translateY(0);
  }
  to {
    transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) + 7deg)) translateY(-16px);
  }
}

.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    rgba(255, 111, 181, 0.16),
    rgba(192, 132, 252, 0.06) 45%,
    transparent 72%
  );
  opacity: 0;
  transition: opacity 0.7s var(--ease);
  will-change: transform;
}
.cursor-glow.is-active {
  opacity: 1;
}
@media (hover: none) {
  .cursor-glow {
    display: none;
  }
}