/* ============================================================
   EL CURSOR · un punto en vez de la flecha, en todo el máster

   Va aquí y no en cada página por la misma razón que el grano: si
   cada tira lleva su copia, a la tercera ya no es el mismo cursor.

   SOLO EN PUNTERO FINO. @media (hover:hover) and (pointer:fine)
   descarta touch: ahí no hay flecha que sustituir, y forzar
   cursor:none dejaría al lector sin nada que tocar. Ver cursor.js.

   MIX-BLEND-MODE:DIFFERENCE Y NO UN CAMBIO DE COLOR POR JS. Blanco
   en difference invierte lo que tiene debajo sin que haya que
   preguntarle a cada píxel si es foto, fondo o rótulo: sobre negro
   se ve blanco, sobre una imagen clara se oscurece, sobre color se
   invierte — automático, sin listeners de hover por elemento. Es lo
   que pedía Valeria («transparente o invierte los colores encima de
   una imagen») pero sin el coste de vigilar cada imagen del máster
   una por una.

   ------------------------------------------------------------
   EL PUNTO SE QUEDA, Y BAJA DE 26 A 18 *(24 ago)*
   ------------------------------------------------------------

   Se probaron cruz de registro, mirilla y aro contra el punto, con
   una tecla, sobre el velo y sobre una tira. Gana el punto: es la
   forma que menos dice y la que mejor aguanta encima de fotografía
   con detalle, donde 1px en difference se queda fino y parpadea.

   Y baja a 18 por el hero. El campo negro dejó de ser una placa y
   es una retícula de cifras de 9px, así que un disco de 26 competía
   con el material en su propio idioma: había dejado de ser la marca
   del lector para ser la partícula más gorda de la pantalla. A 18
   son dos celdas del velo — se lee como marca y no como glifo.

   ------------------------------------------------------------
   Y CRECE SOLO DONDE SE PUEDE ENTRAR, NO SOBRE LA FOTOGRAFÍA
   ------------------------------------------------------------

   Antes crecía sobre `img, video, a`. En una web que es fotografía
   de arriba abajo, eso quiere decir que estaba crecido casi todo el
   rato — y un estado que es verdad el 80 % del tiempo no informa de
   nada. Peor: prometía algo. Sobre una celda de tira no hay nada
   que clicar, y el cursor decía que sí.

   Ahora crece SOLO en lo navegable: About, Contact, y los proyectos
   del final del scroll. Con eso el gesto pasa a significar una cosa
   concreta —aquí se entra— y es el único sitio de la página donde
   el cursor habla. Ver la nota de `SOBRE` en cursor.js.
============================================================ */
@media (hover:hover) and (pointer:fine){
  html{cursor:none}

  .punto{
    --d:18px;                 /* elegido mirándolo · 26 · 24 · 22 · 20 · 18 */
    position:fixed; top:0; left:0; z-index:40; pointer-events:none;
    width:var(--d); height:var(--d);
    margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
    border-radius:50%; background:#fff;
    mix-blend-mode:difference;
    transform:translate(var(--cx,-100px), var(--cy,-100px));
    transition:opacity .2s ease, width .15s ease, height .15s ease,
               margin .15s ease;
    opacity:0;
  }
  .punto.activo{opacity:1}

  /*  38 y no 24: ahora que solo pasa sobre lo navegable, el salto es
      un acontecimiento y no un temblor. Contra un punto de 18 son
      más del doble, y se lee de lejos.                            */
  .punto.entrar{ --d:38px; }
}