/* ==========================================================================
   cyber-cursor.css
   Puntero personalizado estilo cyberpunk. Inspirado en mouse.png (punto verde
   con halo) pero mas cool: nucleo brillante + anillo conico animado que rota,
   reacciona al hover sobre links/botones/inputs.
   Standalone overlay — NO se genera desde SASS. Cargar en index.html.
   Movimiento y estados los maneja cyber-cursor.js.
   ========================================================================== */

:root {
  --cc-green: var(--cy-green, #2bf58f);
  --cc-cyan: var(--cy-cyan, #19d9ff);
  --cc-pink: var(--cy-pink, #ff2e88);
}

/* Solo en dispositivos con puntero fino (mouse/trackpad) ocultamos el nativo */
@media (pointer: fine) {
  html.cc-on,
  html.cc-on * {
    cursor: none !important;
  }
}

.cc-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  pointer-events: none;
  will-change: transform;
  mix-blend-mode: screen;
}

/* ----------------------------------------------------------- Nucleo -- */
.cc-dot {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--cc-green);
  box-shadow:
    0 0 6px var(--cc-green),
    0 0 14px rgba(43, 245, 143, 0.7);
  transition: background 0.18s ease, box-shadow 0.18s ease,
    width 0.18s ease, height 0.18s ease, margin 0.18s ease;
}

/* ------------------------------------------------------------ Anillo -- */
.cc-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  opacity: 0.9;
  transition: width 0.2s ease, height 0.2s ease, margin 0.2s ease,
    opacity 0.2s ease, filter 0.2s ease;
  filter: drop-shadow(0 0 4px rgba(25, 217, 255, 0.5));
}

/* el anillo que rota vive en el ::before para no pelear con el transform
   de posicion que aplica el JS sobre .cc-ring */
.cc-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* gradiente conico cyberpunk recortado en forma de anillo */
  background: conic-gradient(
    from 0deg,
    var(--cc-cyan),
    var(--cc-pink),
    var(--cc-green),
    var(--cc-cyan)
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 3px),
    #000 calc(100% - 3px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 3px),
    #000 calc(100% - 3px)
  );
  animation: cc-spin 2.4s linear infinite;
}

@keyframes cc-spin {
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------- Estado: hover link -- */
html.cc-hover .cc-ring {
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(255, 46, 136, 0.7));
}

html.cc-hover .cc-ring::before {
  animation-duration: 1.1s;
}

html.cc-hover .cc-dot {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--cc-pink);
  box-shadow:
    0 0 6px var(--cc-pink),
    0 0 16px rgba(255, 46, 136, 0.8);
}

/* --------------------------------------------------- Estado: click -- */
html.cc-down .cc-ring {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
}

/* --------------------------------------------------- Reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .cc-ring::before { animation: none; }
}