#cursor {
  position: absolute;
  background-color: var(--cursor-color, #fff); /* پیش‌فرض رنگ مشکی */
  height: 10px;
  width: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  transition: background-color 0.3s ease, transform 0.5s ease; /* تغییر تدریجی رنگ و سایز */
}

#cursor.hovered {
  background-color: #0ff; /* رنگ مشکی در حالت هاور */
}

#cursor-border {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: transparent;
  border: 1px solid var(--cursor-border-color, #000); /* رنگ پیش‌فرض مرز مشکی */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: border-color 0.8s ease, transform 0.5s ease; /* تغییر تدریجی مرز و سایز */
  pointer-events: none;
  z-index: 9999;
}

#cursor-border.hovered {
  transform: translate(-50%, -50%) scale(1.8);
  border-color: #0ff; /* رنگ مرز در حالت هاور */
  box-shadow: 0 3px 20px rgba(0, 255, 255, 0.456);
}

@media (max-width: 1024px) {
  #cursor,
  #cursor-border {
    display: none !important;
  }
}