body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  will-change: transform;
}

body::before {
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  background: rgba(var(--color-accent-rgb), 0.12);
  top: -15%;
  left: -10%;
  animation: floatBlob1 14s ease-in-out infinite alternate;
}

body::after {
  width: 60vw;
  height: 60vw;
  max-width: 700px;
  max-height: 700px;
  background: rgba(var(--color-accent-alt-rgb), 0.07);
  bottom: -10%;
  right: -10%;
  animation: floatBlob2 12s ease-in-out infinite alternate;
}

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