/* Custom Cyber Cursor Styles */
body {
  cursor: none !important;
}

.custom-cursor {
  position: fixed;
  width: 30px;
  height: 30px;
  border: 2px solid #8BC34A;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
  transform: translate(-50%, -50%);
  opacity: 1;
  box-shadow: 0 0 20px rgba(139, 195, 74, 0.5);
}

.custom-cursor-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  background-color: #8BC34A;
  border-radius: 50%;
  pointer-events: none;
  z-index: 100000;
  transition: width 0.1s ease, height 0.1s ease, background-color 0.1s ease;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 15px rgba(139, 195, 74, 0.9), 0 0 30px rgba(139, 195, 74, 0.6);
}

/* Cursor hover states */
a:hover ~ .custom-cursor,
button:hover ~ .custom-cursor,
.btn-cyber:hover ~ .custom-cursor {
  width: 50px;
  height: 50px;
  border-color: #a855f7;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
}

a:hover ~ .custom-cursor-dot,
button:hover ~ .custom-cursor-dot,
.btn-cyber:hover ~ .custom-cursor-dot {
  width: 10px;
  height: 10px;
  background-color: #a855f7;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.9), 0 0 30px rgba(168, 85, 247, 0.6);
}

/* Hide cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
  body {
    cursor: auto;
  }

  .custom-cursor,
  .custom-cursor-dot {
    display: none;
  }
}