body {
    background: radial-gradient(circle, rgb(112, 207, 199), #b3dffe);
    margin: 0;
    height: 100vh;
    display: grid;
    place-items: center;
    z-index: -2;
}


.stack {
    position: absolute;
    width: 500px;
    height:500px;
}

/* 
.plum {
  position: absolute;
  inset: 0;
  border-radius: 80%;
} */


.plumSvg {
  position: absolute;
  inset: 0;
  width: 500px;
  height: 500px;
  transition: transform 180ms ease;
  transform-origin: center;
}

.plumSvg.active:hover {
  transform: scale(1.005);
}

.layer { pointer-events: none; }     /* locked by default */
.layer.active {
  pointer-events: auto;              /* only active layer clickable */
  cursor: pointer;
}

@keyframes biteWiggle {
  0%   { transform: translate(0px, 0px) rotate(0deg) scale(1); }
  25%  { transform: translate(-2px, 1px) rotate(-1.2deg) scale(1.01); }
  50%  { transform: translate(2px, -1px) rotate(1deg) scale(1.01); }
  75%  { transform: translate(-1px, 0px) rotate(-0.6deg) scale(1); }
  100% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
}

.wiggle {
  animation: biteWiggle 180ms ease-out;
}


/* container for bite holes */
.bites {
  position: absolute;
  inset: 0;
  filter: url(#goo);
  pointer-events: none;
}

.bite {
  position: absolute;
  width: 70px;
  height: 70px;
  background: black;       /* this becomes a "hole mask" */
  border-radius: 50%;
  transform: translate(-50%, -50%);
}