/*
Source - https://stackoverflow.com/a/78349169
Posted by Mr. Polywhirl
Retrieved 2026-06-02, License - CC BY-SA 4.0
*/

.click-circle {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  pointer-events: none; /* Ensure the circle doesn't interfere with clicks */
  
  /* CHANGED LINES */
  transform-origin: center;
  border: 2px solid #FFFFFF;        /* Creates the outline */
  box-sizing: border-box;            /* Keeps the layout size exactly 150px */
}

.click-animation {
  animation: click-effect 0.33s ease-out forwards;
  /* Decreased animation duration and added "forwards" to keep the final state */
}

@keyframes click-effect {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}