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

.cursor {
  width: 20px;
  height: 20px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.1s, border-color 0.2s;
  transform: translate(-50%, -50%);
}

.cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
}

/* ============================================
   FONDO ANIMADO
   ============================================ */

.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.stars {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 10% 20%, rgba(255,215,0,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 80%, rgba(0,245,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 40%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 10%, rgba(255,0,160,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 60%, rgba(255,215,0,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 20% 55%, #fff 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 90%, rgba(0,245,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 35%, rgba(255,0,160,0.5) 0%, transparent 100%);
}

.grid-floor {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55vh;
  background:
    linear-gradient(transparent 0%, rgba(139,0,255,0.08) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(0,245,255,0.06) 60px, rgba(0,245,255,0.06) 61px),
    repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(0,245,255,0.06) 60px, rgba(0,245,255,0.06) 61px);
  transform: perspective(600px) rotateX(55deg);
  transform-origin: bottom center;
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: orbFloat 8s ease-in-out infinite alternate;
}
.orb1 { width: 400px; height: 400px; background: rgba(139,0,255,0.25); top: -100px; left: -100px; animation-delay: 0s; }
.orb2 { width: 300px; height: 300px; background: rgba(0,245,255,0.15); top: 30%; right: -80px;  animation-delay: -3s; }
.orb3 { width: 250px; height: 250px; background: rgba(255,0,160,0.18); bottom: 20%; left: 20%;  animation-delay: -5s; }

@keyframes orbFloat {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-40px) scale(1.1); }
}

/* ============================================
   PARTÍCULAS
   ============================================ */

.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  animation: particleRise linear infinite;
  opacity: 0;
}

@keyframes particleRise {
  0%   { transform: translateY(100vh) scale(0);   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-10vh) scale(1.5); opacity: 0; }
}