/* ============================================================
   CURSOR — el círculo que reemplaza al puntero
   Es DECORATIVO. Nunca sustituye al anillo de foco de teclado.
   ============================================================ */

.cursor{
  position:fixed;inset-block-start:0;inset-inline-start:0;
  z-index:var(--z-cursor);
  pointer-events:none;              /* jamás intercepta un clic */
  width:14px;height:14px;
  border-radius:var(--r-pill);
  background:var(--ink);
  display:grid;place-items:center;
  opacity:0;
  /* translate lo mueve cada frame desde JS; scale y opacity se animan
     con CSS. Separarlos evita que JS pelee con la transición. */
  transition:width var(--dur-base) var(--ease-expressive),
             height var(--dur-base) var(--ease-expressive),
             background var(--dur-fast) var(--ease),
             opacity var(--dur-fast) var(--ease);
  will-change:translate;
}
.cursor.is-visible{opacity:1}

/* Sobre cualquier cosa clicable: crece y se vacía */
.cursor.is-hover{
  width:46px;height:46px;
  background:color-mix(in srgb, var(--ink) 16%, transparent);
  backdrop-filter:invert(1) grayscale(1);
}

/* Sobre una tarjeta de proyecto: crece a círculo grande con etiqueta */
.cursor.is-view{
  width:104px;height:104px;
  background:var(--ink);
  backdrop-filter:none;
}
.cursor__label{
  color:var(--paper);font-size:var(--step--1);font-weight:var(--w-medium);
  opacity:0;transform:scale(.7);
  transition:opacity var(--dur-fast) var(--ease),
             transform var(--dur-base) var(--ease-expressive);
}
.cursor.is-view .cursor__label{opacity:1;transform:scale(1)}

/* Al presionar, se encoge un poco */
.cursor.is-down{scale:.82}

/* Sobre fondos oscuros se invierte para seguir siendo visible */
.cursor.on-dark{background:var(--paper)}
.cursor.on-dark.is-view .cursor__label{color:var(--ink)}

/* ---------- Cuándo NO existe ----------
   Táctil: no hay puntero que reemplazar.
   Movimiento reducido: perseguir el mouse es justo lo que molesta.
   En ambos casos vuelve el cursor normal del sistema. */
@media (hover:hover) and (pointer:fine){
  html.js.has-cursor,
  html.js.has-cursor *{cursor:none}
  /* Excepción: los campos de texto conservan su cursor de texto,
     porque ahí sí comunica algo que el círculo no puede. */
  html.js.has-cursor :is(input,textarea,select){cursor:auto}
}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
  .cursor{display:none}
}