#core-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 18% 18%,
      color-mix(in srgb, var(--color-primary-soft) 55%, transparent),
      transparent 34rem
    ),
    radial-gradient(
      circle at 82% 10%,
      color-mix(in srgb, var(--color-secondary) 24%, transparent),
      transparent 30rem
    ),
    linear-gradient(
      145deg,
      var(--color-bg) 0%,
      var(--color-primary) 52%,
      var(--color-primary-deep) 100%
    );

  contain: strict;
}

#core-background::before,
#core-background::after,
.core-orb {
  position: absolute;
  display: block;

  width: var(--orb-size, 26rem);
  height: var(--orb-size, 26rem);

  border-radius: 999px;

  opacity: 0.9;

  filter: blur(var(--orb-blur, 34px));

  transform: translate3d(0, 0, 0);

  will-change: transform, opacity;
}

#core-background::before {
  content: "";

  --orb-size: 28rem;

  left: -8rem;
  top: 12%;

  background:
    color-mix(
      in srgb,
      var(--color-secondary-soft) 58%,
      transparent
    );

  animation:
    core-orb-drift-a 28s ease-in-out infinite alternate;
}

#core-background::after {
  content: "";

  --orb-size: 34rem;

  right: -12rem;
  bottom: 6%;

  background:
    color-mix(
      in srgb,
      var(--color-accent-strong) 34%,
      transparent
    );

  animation:
    core-orb-drift-b 34s ease-in-out infinite alternate;
}

.core-orb {
  position: absolute;

  border-radius: 999px;

  pointer-events: none;

  filter: blur(42px);

  transform: translate3d(0, 0, 0);

  will-change:
    transform,
    opacity;

  background:
    radial-gradient(
      circle at center,
      color-mix(
        in srgb,
        var(--color-secondary-soft) 72%,
        transparent
      ) 0%,

      color-mix(
        in srgb,
        var(--color-secondary) 42%,
        transparent
      ) 38%,

      transparent 100%
    );

  animation:
    core-orb-float ease-in-out infinite alternate;
}

@keyframes core-orb-float {
  from {
    transform:
      translate3d(0, 0, 0)
      scale(0.92);

    opacity: 0.12;
  }

  to {
    transform:
      translate3d(
        var(--drift-x),
        var(--drift-y),
        0
      )
      scale(1.18);

    opacity: 0.42;
  }
}

@keyframes core-orb-drift-a {
  from {
    opacity: 0.42;
    transform: translate3d(-2%, -3%, 0) scale(0.94);
  }

  to {
    opacity: 0.86;
    transform: translate3d(9%, 7%, 0) scale(1.08);
  }
}

@keyframes core-orb-drift-b {
  from {
    opacity: 0.35;
    transform: translate3d(4%, 3%, 0) scale(1);
  }

  to {
    opacity: 0.74;
    transform: translate3d(-8%, -9%, 0) scale(1.12);
  }
}

@keyframes core-orb-drift-c {
  from {
    opacity: 0.18;
    transform: translate3d(-6%, 4%, 0) scale(0.9);
  }

  to {
    opacity: 0.52;
    transform: translate3d(7%, -8%, 0) scale(1.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  #core-background::before,
  #core-background::after,
  .core-orb {
    animation: none;
  }
}

@media (max-width: 720px) {
  #core-background::before {
    --orb-size: 22rem;
  }

  #core-background::after {
    --orb-size: 26rem;
  }

  .core-orb {
    --orb-size: 18rem;
  }
}