@keyframes blob-breathe {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  35% {
    transform: scale(1.04) rotate(var(--rotate-mid));
  }
  65% {
    transform: scale(0.97) rotate(var(--rotate-end));
  }
}

.spot {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition:
    opacity 0.3s ease-in-out,
    transform 0.5s ease-in-out;
  opacity: 1;
}

.spot-container {
  position: absolute;
  translate: -50% -50%;
  scale: var(--size);
  width: clamp(10rem, 12vw, 16rem);
  height: clamp(10rem, 12vw, 16rem);
  transition: opacity 0.3s ease-in-out;
}

.intersect {
  opacity: 15%;
}