#virtual-cursor {
  pointer-events: none;
  z-index: 99999;
  position: fixed;
  /* default out of bounds slightly */
  top: 50%;
  left: 50%;
  transition: top 0.7s cubic-bezier(0.25, 1, 0.5, 1),
              left 0.7s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.3s ease;
  opacity: 0;
}

#cursor-icon {
  transition: transform 0.1s ease;
  transform-origin: top left;
  filter: drop-shadow(0px 3px 5px rgba(0,0,0,0.5));
}

.cursor-clicking #cursor-icon {
  transform: scale(0.85);
}

.demo-ripple {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(52, 211, 153, 0.5); /* Emerald 400 */
  transform: scale(0);
  opacity: 1;
  pointer-events: none;
}

.cursor-clicking .demo-ripple {
  animation: rippleEffect 0.5s ease-out forwards;
}

@keyframes rippleEffect {
  0% { transform: scale(0); opacity: 1; }
  50% { transform: scale(4); opacity: .5; }
  100% { transform: scale(8); opacity: 0; }
}

.demo-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(1);
}