/* ════════════ Arad — Cursor brújula ════════════
   Puerto directo del prototipo "arad-territorio-interactivo" a JS plano.
   Reemplaza el cursor nativo (solo en pointer:fine) por un anillo con
   flecha que apunta hacia donde se mueve el mouse, y marca cada clic
   con un pulso — como marcar una coordenada en el territorio. */

@media (pointer:fine){
  body, a, button, [data-coordinate]{ cursor:none; }
}

.compass-cursor{
  position:fixed;
  width:46px;height:46px;
  left:-23px;top:-23px;
  z-index:9500;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s, width .2s, height .2s, left .2s, top .2s;
  filter:drop-shadow(0 0 2px #fff);
}
.compass-cursor.is-visible{opacity:1;}
.compass-ring{position:absolute;inset:0;border:1px solid var(--crimson,#a8112c);border-radius:50%;}
.compass-ring::before,
.compass-ring::after{content:'';position:absolute;background:var(--crimson,#a8112c);opacity:.65;}
.compass-ring::before{width:1px;height:54px;left:22px;top:-5px;}
.compass-ring::after{width:54px;height:1px;top:22px;left:-5px;}
.compass-arrow{
  position:absolute;width:12px;height:27px;left:17px;top:9px;
  transform-origin:50% 14px;
  transition:transform .08s linear;
}
.compass-arrow::before{content:'';position:absolute;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:18px solid var(--crimson,#a8112c);top:0;}
.compass-arrow::after{content:'';position:absolute;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid #fff;bottom:0;}
.compass-label{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  color:var(--crimson,#a8112c);
  font:700 7px 'Courier New', monospace;
  letter-spacing:.05em;
}
.compass-cursor.is-active{width:64px;height:64px;left:-32px;top:-32px;}
.compass-cursor.is-active .compass-ring{background:rgba(255,255,255,.35);}
.compass-cursor.is-active .compass-ring::before{height:72px;left:31px;}
.compass-cursor.is-active .compass-ring::after{width:72px;top:31px;}
.compass-cursor.is-active .compass-arrow{left:26px;top:18px;}

.coordinate-pulse{
  position:fixed;width:12px;height:12px;
  border:2px solid var(--crimson,#a8112c);
  border-radius:50%;
  z-index:9400;
  pointer-events:none;
  transform:translate(-50%,-50%);
  animation:coordinatePing .65s ease-out forwards;
}
@keyframes coordinatePing{ to{ width:90px; height:90px; opacity:0; } }

@media (pointer:coarse), (prefers-reduced-motion:reduce){
  .compass-cursor, .coordinate-pulse{ display:none; }
}