/* HELLSTREET Custom Cursor */
/* Cursor in project colors - Cyan/Teal accent (#01FFD1) */

* {
  cursor: none !important;
}

body {
  cursor: none !important;
}

/* Main cursor dot */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #01FFD1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  will-change: transform;
  mix-blend-mode: difference;
  box-shadow: 0 0 10px rgba(1, 255, 209, 0.5),
              inset 0 0 10px rgba(1, 255, 209, 0.3);
}

/* Inner cursor dot */
.custom-cursor::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: #01FFD1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 5px rgba(1, 255, 209, 0.8);
}

/* Cursor trail effect */
.custom-cursor-trail {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: rgba(1, 255, 209, 0.3);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999998;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
}

/* Hover state - expands on interactive elements */
.custom-cursor.hovered {
  width: 35px;
  height: 35px;
  background-color: rgba(1, 255, 209, 0.1);
  border-color: #01FFD1;
  box-shadow: 0 0 20px rgba(1, 255, 209, 0.8),
              inset 0 0 15px rgba(1, 255, 209, 0.5);
}

/* Click state */
.custom-cursor.clicked {
  width: 15px;
  height: 15px;
  background-color: rgba(1, 255, 209, 0.5);
}

/* Hide cursor on mobile/touch devices */
@media (hover: none) and (pointer: coarse) {
  * {
    cursor: auto !important;
  }
  
  body {
    cursor: auto !important;
  }
  
  .custom-cursor,
  .custom-cursor-trail {
    display: none !important;
  }
}

/* Hide cursor when selecting text */
::selection {
  background: #01FFD1;
  color: #000;
}