/* Hide native cursor on pointer devices */
@media (hover: hover) and (pointer: fine) {
  body:not(.native-cursor) {
    cursor: none;
  }

  body:not(.native-cursor) a,
  body:not(.native-cursor) button,
  body:not(.native-cursor) [data-magnetic],
  body:not(.native-cursor) [data-cursor] {
    cursor: none;
  }
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  mix-blend-mode: normal;
}

.cursor__dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-orange);
  transform: translate(-50%, -50%);
  transition: opacity 150ms, transform 150ms;
  will-change: transform;
}

.cursor__ring {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--color-orange);
  transform: translate(-50%, -50%);
  opacity: 0.6;
  will-change: transform;
  transition: width 250ms var(--ease-out),
              height 250ms var(--ease-out),
              opacity 250ms var(--ease-out),
              border-radius 250ms var(--ease-out),
              border-width 250ms var(--ease-out);
}

/* Hover state */
.cursor--hover .cursor__dot {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

.cursor--hover .cursor__ring {
  width: 60px;
  height: 60px;
  opacity: 0.8;
  border-color: var(--color-orange);
}

/* Text cursor state */
.cursor--text .cursor__ring {
  width: 4px;
  height: 32px;
  border-radius: 2px;
  border-width: 2px;
}

/* Hide cursor when off screen */
.cursor--hidden .cursor__dot,
.cursor--hidden .cursor__ring {
  opacity: 0;
}

/* Disable on touch / reduced motion */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
}