/* assets/css/cursor.css */

/* ===== Cursor táctico / Dron NOVOWIT ===== */

/* Variables específicas del cursor */
:root{
  --cursor-idle: var(--acc);     /* verde operativo */
  --cursor-lock: #ff3b3b;        /* rojo fijado */
}

/* Ocultar cursor nativo cuando este módulo está activo */
.no-cursor{
  cursor:none;
}

/* También quitar cursor nativo en elementos interactivos */
a,
button,
[role="button"],
input,
select,
textarea{
  cursor:none;
}

/* Contenedor del dron/cursor */
.recon-cursor{
  position:fixed;
  left:0;
  top:0;
  width:60px;
  height:60px;
  pointer-events:none;
  z-index:9999;
  /* Tamaño fijo siempre */
  transform:translate(-50%,-50%) scale(1);
  transition:transform .12s ease-out;
  filter:
    drop-shadow(0 0 6px rgba(0,255,194,.7))
    drop-shadow(0 0 18px rgba(0,255,194,.3));
  opacity:1;
}

.recon-cursor.hidden{
  opacity:0;
  transition:opacity .15s ease;
}

/* Estado de fijación de objetivo:
   - Antes hacíamos scale(1.25); ahora mantenemos scale(1)
   - Solo cambiamos la iluminación y color a rojo */
.recon-cursor.is-hover{
  transform:translate(-50%,-50%) scale(1);
  filter:
    drop-shadow(0 0 6px rgba(255,59,59,.8))
    drop-shadow(0 0 20px rgba(255,59,59,.4));
}

/* Estructura del dron */
.drone-frame{
  position:absolute;
  left:50%;
  top:50%;
  width:60px;
  height:60px;
  transform:translate(-50%,-50%);
}

/* Brazos */
.arm{
  position:absolute;
  width:22px;
  height:5px;
  background:rgba(0,0,0,.5);
  border:2px solid var(--cursor-idle);
  border-radius:4px;
  box-shadow:
    0 0 6px rgba(0,255,194,.7),
    0 0 18px rgba(0,255,194,.4);
}

/* Posición de cada brazo */
.arm-tl{
  left:8px;
  top:4px;
  transform:rotate(45deg);
  transform-origin:left center;
}
.arm-tr{
  right:8px;
  top:4px;
  transform:rotate(-45deg);
  transform-origin:right center;
}
.arm-bl{
  left:8px;
  bottom:4px;
  transform:rotate(-45deg);
  transform-origin:left center;
}
.arm-br{
  right:8px;
  bottom:4px;
  transform:rotate(45deg);
  transform-origin:right center;
}

/* Rotores */
.rotor{
  position:absolute;
  width:14px;
  height:14px;
  background:rgba(0,0,0,.45);
  border:2px solid var(--cursor-idle);
  border-radius:50%;
  box-shadow:
    0 0 6px rgba(0,255,194,.7),
    0 0 18px rgba(0,255,194,.4);
  animation:spin .8s linear infinite;
}

/* Rotores al final de cada brazo */
.arm-tl .rotor{left:-5px;top:-5px;}
.arm-tr .rotor{right:-5px;top:-5px;}
.arm-bl .rotor{left:-5px;bottom:-5px;}
.arm-br .rotor{right:-5px;bottom:-5px;}

/* Aspas */
.blades{
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:2px;
  background:var(--cursor-idle);
  box-shadow:0 0 6px rgba(0,255,194,.8);
  transform:translate(-50%,-50%) rotate(45deg);
}
.blades::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:2px;
  background:var(--cursor-idle);
  box-shadow:0 0 6px rgba(0,255,194,.8);
  transform:translate(-50%,-50%) rotate(90deg);
}

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

/* Estado hover (objetivo fijado en rojo):
   Cambiamos color/velocidad de rotores, pero NO tamaño */
.recon-cursor.is-hover .rotor{
  border-color:var(--cursor-lock);
  box-shadow:
    0 0 10px rgba(255,59,59,1),
    0 0 30px rgba(255,59,59,.5);
  animation-duration:.28s;
}

.recon-cursor.is-hover .blades,
.recon-cursor.is-hover .blades::after{
  background:var(--cursor-lock);
  box-shadow:0 0 8px rgba(255,59,59,1);
}

.recon-cursor.is-hover .arm{
  border-color:var(--cursor-lock);
  box-shadow:
    0 0 10px rgba(255,59,59,1),
    0 0 30px rgba(255,59,59,.6);
}

/* Módulo central HUD */
.core{
  position:absolute;
  left:50%;
  top:50%;
  width:20px;
  height:20px;
  background:rgba(0,0,0,.6);
  border:2px solid var(--cursor-idle);
  border-radius:4px;
  box-shadow:
    0 0 8px rgba(0,255,194,.9),
    0 0 24px rgba(0,255,194,.5);
  transform:translate(-50%,-50%);
}

.hud-ring{
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:18px;
  border:1px solid rgba(0,255,194,.5);
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:
    0 0 8px rgba(0,255,194,.5),
    0 0 24px rgba(0,255,194,.3);
  background:conic-gradient(
    from 0deg,
    rgba(0,255,194,.4) 0deg,
    rgba(0,255,194,0) 70deg
  );
  animation:sweep 2s linear infinite;
  mix-blend-mode:screen;
}

@keyframes sweep{
  to{transform:translate(-50%,-50%) rotate(360deg);}
}

.hud-dot{
  position:absolute;
  left:50%;
  top:50%;
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--cursor-idle);
  box-shadow:0 0 6px rgba(0,255,194,.9);
  transform:translate(-50%,-50%);
}

/* Estado hover del HUD: rojo */
.recon-cursor.is-hover .core{
  border-color:var(--cursor-lock);
  box-shadow:
    0 0 10px rgba(255,59,59,1),
    0 0 28px rgba(255,59,59,.6);
}

.recon-cursor.is-hover .hud-ring{
  border-color:rgba(255,59,59,.6);
  box-shadow:
    0 0 10px rgba(255,59,59,1),
    0 0 32px rgba(255,59,59,.6),
    0 0 60px rgba(255,59,59,.4);
  background:conic-gradient(
    from 0deg,
    rgba(255,59,59,.6) 0deg,
    rgba(255,59,59,0) 70deg
  );
  animation-duration:.5s;
}

.recon-cursor.is-hover .hud-dot{
  background:var(--cursor-lock);
  box-shadow:0 0 8px rgba(255,59,59,1);
}

/* Flash de disparo (click) */
.click-burst{
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:10px;
  border:2px solid #fff;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  pointer-events:none;
}

.click-burst.active{
  animation:burst .28s ease-out;
}

@keyframes burst{
  0%{
    transform:translate(-50%,-50%) scale(0.3);
    opacity:1;
    box-shadow:
      0 0 12px rgba(255,255,255,1),
      0 0 30px rgba(0,255,194,.9);
    border-color:#fff;
  }
  100%{
    transform:translate(-50%,-50%) scale(2.2);
    opacity:0;
    box-shadow:0 0 40px rgba(0,255,194,0);
    border-color:rgba(255,255,255,0);
  }
}

.recon-cursor.is-hover .click-burst.active{
  animation:burstLock .28s ease-out;
}

@keyframes burstLock{
  0%{
    transform:translate(-50%,-50%) scale(0.3);
    opacity:1;
    box-shadow:
      0 0 12px rgba(255,255,255,1),
      0 0 30px rgba(255,59,59,.9);
    border-color:#fff;
  }
  100%{
    transform:translate(-50%,-50%) scale(2.2);
    opacity:0;
    box-shadow:
      0 0 40px rgba(255,59,59,0);
    border-color:rgba(255,255,255,0);
  }
}

/* Láser desactivado por completo */
.laser-line{
  display:none !important;
}
.laser-line.lock{
  display:none !important;
}

/* En pantallas táctiles quitamos dron y restauramos cursor normal */
@media (pointer:coarse){
  .no-cursor{
    cursor:auto;
  }
  a,
  button,
  [role="button"],
  input,
  select,
  textarea{
    cursor:auto;
  }
  .recon-cursor,
  .laser-line{
    display:none;
  }
}