/* ==========================================================================
   WIZKET — cursor.css
   Liquid magnetic cursor. Fine pointers only (mouse / trackpad); touch
   devices never see it. All geometry (size, radius, position, stretch) is
   driven by js/cursor.js — this file only holds the look.

   Look:   white blob, mix-blend-mode: exclusion  → it inverts whatever is
           under it, so it reads on dark, light and image backgrounds with no
           per-theme colours. Ring states use var(--text) (normal blend).
   Orange: intentionally absent. The cursor is neutral; orange stays rare.
   ========================================================================== */

:root { --wz-cursor-contrast: 1.5; }

.wz-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;               /* above nav (100/200) and the music button (900) */
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border: 0 solid var(--text);
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: exclusion;
  -webkit-backdrop-filter: contrast(var(--wz-cursor-contrast));
  backdrop-filter: contrast(var(--wz-cursor-contrast));
  pointer-events: none;
  opacity: 0;
  will-change: transform, width, height;
  transition:
    opacity 0.3s var(--ease-out, ease),
    background-color 0.3s var(--ease-out, ease),
    border-width 0.3s var(--ease-out, ease);
}
.wz-cursor.is-on { opacity: 1; }
.wz-cursor.is-hidden { opacity: 0; }

/* Ring — drag zones (sphere, card stack, globe, sheet, desk cards) and orange CTAs.
   Normal blend + outline so it never turns the orange CTA fill into a cyan blob. */
.wz-cursor.is-ring {
  background: transparent;
  border-width: 1.5px;
  mix-blend-mode: normal;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Morph — the blob wraps a button/link like liquid but does NOT invert it:
   a soft tint of the text colour, normal blend, so the button keeps its own colours. */
.wz-cursor.is-morph {
  background: color-mix(in srgb, var(--text) 9%, transparent);
  border-width: 1px;
  border-color: color-mix(in srgb, var(--text) 22%, transparent);
  mix-blend-mode: normal;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* tiny centre dot keeps the exact aim point inside a big ring */
.wz-cursor::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--text);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.3s var(--ease-out, ease), transform 0.4s var(--ease-out, ease);
}
.wz-cursor.is-ring.is-grab::after { opacity: 1; transform: scale(1); }

/* hide the native cursor only once the custom one is actually running
   (class is added on the first real mouse movement, so no-JS / touch keep theirs) */
html.wz-cursor-on,
html.wz-cursor-on * { cursor: none !important; }

/* real text entry keeps the native I-beam; the blob hides over it */
html.wz-cursor-on input,
html.wz-cursor-on textarea,
html.wz-cursor-on select,
html.wz-cursor-on [contenteditable="true"],
html.wz-cursor-on [data-cursor="native"],
html.wz-cursor-on [data-cursor="native"] * { cursor: auto !important; }
html.wz-cursor-on input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.wz-cursor-on textarea,
html.wz-cursor-on [contenteditable="true"] { cursor: text !important; }

@media (hover: none), (pointer: coarse), (forced-colors: active), print {
  .wz-cursor { display: none !important; }
}