/* Custom Cursor */

#cursor {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.cursor-ring {
  position: absolute;
  width: 2rem;
  height: 2rem;
  border: 2px solid oklch(0.96 0.005 240);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition:
    border-color 0.3s ease-in-out,
    background 0.3s ease-in-out,
    opacity 0.3s ease-in-out;
  will-change: transform;
}

.cursor-dot {
  position: absolute;
  width: 0.25rem;
  height: 0.25rem;
  background: oklch(0.96 0.005 240);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease-in-out;
  will-change: transform;
}

@media (hover: none) and (pointer: coarse) {
  #cursor {
    display: none;
  }
}