/* Cursor Styles */
.cursor-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--color-primary-130);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease-out;
}

.cursor-outline {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid var(--color-primary-110);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999998;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-out;
}

.cursor-glow {
  position: fixed;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999997;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease-out;
}

/* Cursor states */
.cursor-hover .cursor-dot {
  transform: translate(-50%, -50%) scale(1.5);
  background: #a8edea;
}

.cursor-hover .cursor-outline {
  transform: translate(-50%, -50%) scale(1.8);
  border-color: #a8edea;
}

.cursor-hover .cursor-glow {
  transform: translate(-50%, -50%) scale(1.3);
  background: radial-gradient(circle, rgba(168, 237, 234, 0.2) 0%, transparent 70%);
}

.cursor-click .cursor-dot {
  transform: translate(-50%, -50%) scale(0.8);
}

.cursor-click .cursor-outline {
  transform: translate(-50%, -50%) scale(0.9);
}

.cursor-click .cursor-glow {
  transform: translate(-50%, -50%) scale(0.8);
}

/* Particle effect */
.particle {
  position: fixed;
  width: 4px;
  height: 4px;
  background: rgba(168, 237, 234, 0.8);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999996;
  animation: particle-animation 1.5s ease-out forwards;
}

@keyframes particle-animation {
  0% {
      opacity: 1;
      transform: scale(1) translateY(0);
  }
  100% {
      opacity: 0;
      transform: scale(0) translateY(-30px);
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .cursor-dot,
  .cursor-outline,
  .cursor-glow {
      display: none;
  }
  
  body {
      cursor: auto;
  }
}