@media (hover: hover) and (pointer: fine) {
  body, a, button, .project-card {
    cursor: none !important;
  }
  .custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease-out, color 0.2s;
    color: var(--ink);
  }
  .custom-cursor.hover {
    transform: translate(-50%, -50%) scale(1.5) rotate(90deg);
    color: var(--accent);
  }
  .custom-cursor img {
    width: 100%;
    height: 100%;
    display: block;
  }
}

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