.page-with-plums {
  position: relative;
}

.site-shell.page-with-plums {
  position: relative;
}

.floating-plums {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.site-shell.page-with-plums > header,
.site-shell.page-with-plums > main {
  position: relative;
  z-index: 1;
}

.plum {
  --plum-size: 32px;
  --plum-duration: 20s;
  --plum-delay: 0s;
  --plum-opacity: 0.24;
  --plum-tilt: -9deg;
  --plum-drift-x: 24px;
  --plum-drift-y: 36px;

  position: absolute;
  left: var(--plum-x, 8%);
  top: var(--plum-y, 0);
  width: var(--plum-size);
  height: calc(var(--plum-size) * 1.05);
  opacity: var(--plum-opacity);
  transform: rotate(var(--plum-tilt));
  animation: plumFloat var(--plum-duration) ease-in-out var(--plum-delay) infinite;
  will-change: transform;
}

.plum::before {
  position: absolute;
  top: calc(var(--plum-size) * -0.12);
  right: calc(var(--plum-size) * 0.08);
  width: calc(var(--plum-size) * 0.34);
  height: calc(var(--plum-size) * 0.2);
  border-radius: 999px 999px 999px 0;
  content: "";
  background: linear-gradient(135deg, #75dc82, #2f8f45);
  transform: rotate(24deg);
}

.plum.is-balloon::before {
  display: none;
}

.plum.is-balloon .plum-body {
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.58), transparent 18%),
    linear-gradient(145deg, #c495ff, #7b3fc9 55%, #4a2088);
}

.plum-body {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 48% 52% 55% 45% / 58% 50% 50% 42%;
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.52), transparent 14%),
    linear-gradient(135deg, #b377ff, #6a2dbd 58%, #2f0f52);
  box-shadow:
    inset calc(var(--plum-size) * -0.22) calc(var(--plum-size) * -0.24) calc(var(--plum-size) * 0.38)
      rgba(22, 6, 42, 0.38),
    0 calc(var(--plum-size) * 0.28) calc(var(--plum-size) * 0.66) rgba(118, 48, 178, 0.22);
}

.plum.is-reverse {
  animation-name: plumFloatReverse;
}

@keyframes plumFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(var(--plum-tilt));
  }

  50% {
    transform: translate3d(var(--plum-drift-x), var(--plum-drift-y), 0)
      rotate(calc(var(--plum-tilt) + 6deg));
  }
}

@keyframes plumFloatReverse {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(var(--plum-tilt));
  }

  50% {
    transform: translate3d(calc(var(--plum-drift-x) * -1), calc(var(--plum-drift-y) * -0.7), 0)
      rotate(calc(var(--plum-tilt) - 5deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .plum {
    animation: none;
  }
}