/* Custom cursor */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  border-radius: 50%;
  will-change: transform;
  transform: translate3d(-100px, -100px, 0);
  mix-blend-mode: difference;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  background: #fff;
  transition: width var(--dur-base) var(--ease-out-expo),
              height var(--dur-base) var(--ease-out-expo),
              background var(--dur-base) var(--ease-out-expo);
}

.cursor-ring {
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(255,255,255,0.6);
  transition: width var(--dur-base) var(--ease-out-expo),
              height var(--dur-base) var(--ease-out-expo),
              border-color var(--dur-base) var(--ease-out-expo),
              background var(--dur-base) var(--ease-out-expo),
              opacity var(--dur-base) var(--ease-out-expo);
  margin-left: -19px;
  margin-top: -19px;
}

.cursor-dot { margin-left: -3px; margin-top: -3px; }

body.cursor-hover .cursor-ring {
  width: 70px;
  height: 70px;
  margin-left: -35px;
  margin-top: -35px;
  border-color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.08);
}
body.cursor-hover .cursor-dot { width: 0; height: 0; }

body.cursor-text .cursor-ring {
  width: 6px; height: 6px;
  margin-left: -3px; margin-top: -3px;
}
body.cursor-text .cursor-dot { width: 20px; height: 2px; border-radius: 1px; margin-left: -10px; margin-top: -1px; }

@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* Hide default cursor on desktop, restore for inputs */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  input, textarea, select { cursor: text; }
}