/* ========================================
   CURSOR PERSONALIZADO ANIMADO
   ======================================== */

/* Ocultar cursor por defecto */
body {
  cursor: none;
}

/* Contenedor del cursor */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10000;
}

/* Punto del cursor */
.cursor-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #2ea8ff, #7c6fff);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, background 0.3s ease;
  box-shadow: 0 0 20px rgba(46, 168, 255, 0.8);
  z-index: 10001;
}

/* Contorno del cursor */
.cursor-outline {
  position: fixed;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(46, 168, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
  z-index: 10000;
  animation: cursorPulse 2s ease-in-out infinite;
}

@keyframes cursorPulse {
  0%, 100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Estados del cursor */
body.cursor-hover .cursor-dot {
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #7c6fff, #ff6bed);
  box-shadow: 0 0 30px rgba(124, 111, 255, 1);
}

body.cursor-hover .cursor-outline {
  width: 50px;
  height: 50px;
  border-color: rgba(124, 111, 255, 0.8);
  border-width: 3px;
}

body.cursor-click .cursor-dot {
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #ff6bed, #2ea8ff);
  animation: cursorClickDot 0.3s ease;
}

body.cursor-click .cursor-outline {
  animation: cursorClickOutline 0.3s ease;
}

@keyframes cursorClickDot {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(0.8);
  }
}

@keyframes cursorClickOutline {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
  }
}

/* Efecto de trail (rastro) */
.cursor-trail {
  position: fixed;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, rgba(46, 168, 255, 0.6), transparent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  animation: trailFade 0.5s ease-out forwards;
}

@keyframes trailFade {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

/* Cursor en elementos interactivos */
a, button, .btn, input, textarea, select, .social-link, .nav-link, .card, .project, .skill-chip {
  cursor: none !important;
}

/* Ocultar en móviles y tablets */
@media (max-width: 1024px) {
  body {
    cursor: auto;
  }
  
  .custom-cursor,
  .cursor-dot,
  .cursor-outline,
  .cursor-trail {
    display: none !important;
  }
}

/* Cursor en modo claro */
body.light .cursor-dot {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
}

body.light .cursor-outline {
  border-color: rgba(59, 130, 246, 0.5);
}

body.light.cursor-hover .cursor-dot {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  box-shadow: 0 0 30px rgba(139, 92, 246, 1);
}

body.light.cursor-hover .cursor-outline {
  border-color: rgba(139, 92, 246, 0.8);
}

/* Efecto de partículas al hacer click */
.cursor-particle {
  position: fixed;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(46, 168, 255, 1), transparent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  animation: particleExplode 0.8s ease-out forwards;
}

@keyframes particleExplode {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) scale(0);
  }
}

/* Cursor en texto seleccionable */
.hero-name .hero-letter,
p, h1, h2, h3, h4, h5, h6, span {
  cursor: none !important;
}

/* Animación de entrada del cursor */
.cursor-dot,
.cursor-outline {
  animation: cursorFadeIn 0.5s ease-out;
}

@keyframes cursorFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}