.custom-cursor {
  position: fixed;
  width: 12px;
  height: 12px;
  pointer-events: none;
  mix-blend-mode: difference;
  transform: translate(0, 0);
  transition: transform 0.1s ease-out, opacity 0.3s ease;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 100;
}

.custom-cursor-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  .sprite-wrapper {
    width: min-content;
    height: min-content;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.circle svg {
  transition: transform 0.1s ease-out;
  transform: scale(0);
}

.star svg {
  width: 12px;
  height: 12px;
}

@media (hover: none), (pointer: coarse) {
  .custom-cursor {
    display: none !important;
  }
}