/**
 * Custom Cursor Effects
 * Adds magical mouse trail and interactive cursor
 */

/* Hide default cursor on body */
body {
  cursor: none;
}

/* Restore default cursor on interactive elements */
a, button, input, textarea, select, [role="button"], .clickable {
  cursor: pointer !important;
}

/* Custom cursor dot */
.cursor-dot {
  width: 8px;
  height: 8px;
  background: #2563eb;
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode: difference;
  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

/* Custom cursor outline */
.cursor-outline {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(37, 99, 235, 0.5);
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  transition: all 0.2s ease-out;
  mix-blend-mode: difference;
}

/* Cursor hover state on interactive elements */
.cursor-dot.cursor-hover {
  transform: scale(1.5);
  background: #1d4ed8;
}

.cursor-outline.cursor-hover {
  width: 60px;
  height: 60px;
  border-color: rgba(37, 99, 235, 0.8);
  border-width: 3px;
}

/* Mouse trail particles */
.mouse-trail {
  position: fixed;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.8) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  animation: trail-fade 0.8s ease-out forwards;
}

@keyframes trail-fade {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

/* Glow effect on cursor */
.cursor-glow {
  position: fixed;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9997;
  mix-blend-mode: screen;
  transition: transform 0.3s ease-out;
}

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

  .cursor-dot,
  .cursor-outline,
  .cursor-glow,
  .mouse-trail {
    display: none !important;
  }
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce) {
  .cursor-dot,
  .cursor-outline {
    transition: none !important;
  }

  .mouse-trail,
  .cursor-glow {
    display: none !important;
  }
}