@media (pointer: fine) {
  body:not(.modal-open) {
    cursor: none !important;
  }
  body:not(.modal-open) a,
  body:not(.modal-open) button,
  body:not(.modal-open) .card,
  body:not(.modal-open) .profile-card {
    cursor: none !important;
  }
}
body.modal-open .custom-cursor {
  display: none !important;
}

/* --- Custom Cursor --- */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
  background-color: transparent;
  border: 2px solid var(--accent-secondary);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  transition:
    width 0.3s var(--transition-bounce),
    height 0.3s var(--transition-bounce),
    margin-left 0.3s var(--transition-bounce),
    margin-top 0.3s var(--transition-bounce),
    background-color 0.3s ease,
    border-radius 0.3s var(--transition-bounce),
    border-color 0.3s ease;
  will-change: transform;
  display: none;
}

@media (pointer: fine) {
  .custom-cursor {
    display: block;
  }
}

.custom-cursor.hovering {
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  background-color: var(--accent-primary);
  border-color: #000;
  border-radius: 0;
}