/* Custom cursor implementation */
* {
  cursor: none !important;
}
  
.custom-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition:
    transform 0.15s ease,
    width 0.2s ease,
    height 0.2s ease;
}
  
.cursor-outer {
  display: none;
  border: 2px solid #333;
  background-color: transparent;
  width: 30px;
  height: 30px;
}
  
.cursor-inner {
  background-color: #333;
}
  
/* Dark mode cursor styling */
body.dark-mode .cursor-inner {
  background-color: #f8f9fa;
}
  
/* Cursor interaction states */
.custom-cursor.click {
  transform: translate(-50%, -50%) scale(0.8);
}
  
.custom-cursor.hover {
  width: 40px;
  height: 40px;
}
  
/* Ripple effect animation */
.ripple {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(52, 152, 219, 0.5);
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%) scale(0);
  animation: ripple 0.6s ease-out;
}
  
body.dark-mode .ripple {
  background-color: rgba(106, 48, 147, 0.5);
}
  
@keyframes ripple {
  to {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}
  
/* Touch device compatibility */
@media (hover: none) {
  .custom-cursor {
    display: none;
  }
    
  * {
    cursor: auto !important;
  }
}