/* ============================================================
   MAREA RESIDENCES — CURSOR DE MARCA  (cursor-marea.css)
   ============================================================
   Un solo cursor para todo el proyecto: index.html, demo/masterplan.html y
   demo/plantas-marea/index.html cargan este archivo y cursor-marea.js.
   Antes vivía en styles.css y solo lo tenía el index; el masterplan
   enseñaba el puntero del sistema (flecha, manita, "grab" en el visor de
   láminas) y por eso el cursor "cambiaba" al pasar de una página a otra.

   El puntero nativo se oculta SOLO cuando cursor-marea.js pone la clase
   .cursor-marea en <html>, y el JS solo la pone con un ratón de verdad
   (hover:hover + pointer:fine). Si el JS no carga, o es una pantalla
   táctil, se ve el puntero normal: la página nunca se queda sin cursor.
   ============================================================ */

/* !important y especificidad (0,1,1): gana a los cursor:pointer / grab que
   cada página declara por su cuenta y a los cursor en línea que pone el JS
   (el "grab" del zoom del masterplan). Así el puntero no cambia nunca. */
html.cursor-marea, html.cursor-marea * { cursor: none !important; }

/* Salidas de emergencia: vuelve el puntero nativo.
   · forzar-tactil: el visor móvil simula gestos desde escritorio (mobile.js).
   · cursor-nativo: algo se puso en pantalla completa y no admite hijos
     (un <video>, un <canvas>), así que el anillo no puede entrar con él. */
html.cursor-marea.forzar-tactil, html.cursor-marea.forzar-tactil *,
html.cursor-marea.cursor-nativo, html.cursor-marea.cursor-nativo * { cursor: auto !important; }

/* mix-blend-mode:difference contra un cursor blanco se autoinvierte según
   lo que haya debajo: sobre el fondo crema claro del sitio da un resultado
   casi negro (se ve como "tinta"), sobre secciones oscuras (el hero, el mar
   del masterplan) da blanco puro -- sin JS que muestree el color de fondo,
   el navegador ya resuelve el contraste en cada frame. */
.cursor-ring, .cursor-dot {
  display: none;
  position: fixed; top: 0; left: 0;
  /* El máximo: el masterplan tiene capas (visor de unidad, brochure, modal
     de precio) por encima del 9999 que usaba el index. */
  z-index: 2147483647;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
html.cursor-marea .cursor-ring, html.cursor-marea .cursor-dot { display: block; }

.cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid #fff;
  transition: transform 0.18s cubic-bezier(.25,.8,.25,1),
              opacity 0.2s, width 0.2s, height 0.2s, border-color 0.2s;
}
.cursor-dot {
  width: 5px; height: 5px;
  background: #fff;
  transition: transform 0.06s linear, opacity 0.2s;
}

/* Sobre algo que se puede pulsar. En hover queremos el acento real (no
   invertido por el fondo) -- el anillo ya creció y tiene relleno propio, se
   distingue solo. El masterplan y el visor de planos no definen --accent,
   de ahí el respaldo con el navy de marca. */
html.cursor-hover .cursor-ring {
  width: 54px; height: 54px;
  border-color: var(--accent, #1B3B5F);
  background: oklch(0.45 0.10 250 / 0.08);
  mix-blend-mode: normal;
}

/* El puntero salió de la ventana o está sobre un <iframe> (el Google Maps
   del index): ahí no llega el mousemove y el anillo se quedaría congelado en
   el borde. Se esconde hasta que el puntero vuelva. */
html.cursor-fuera .cursor-ring, html.cursor-fuera .cursor-dot { opacity: 0; }
