/* Liquid blob cursor. Single element, mix-blend-mode:difference inverts the
   content beneath it (shader, text, logo). No ring / no second cursor.
   Shape (border-radius) and squish are driven in JS so a contact ripple can
   deform the blob itself. */
@media (pointer: fine) {
  html, a, button, [role="button"], .lang-toggle, .contact, .scramble { cursor: none; }
}

#blob {
  position: fixed;
  top: 0; left: 0;
  width: 24px; height: 24px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;       /* inverse color beneath */
  transform: translate(-50%, -50%);
  will-change: transform, border-radius;
  transition: width .28s cubic-bezier(.16,1,.3,1), height .28s cubic-bezier(.16,1,.3,1);
}
/* enlarged while over text / logo / interactive */
#blob.hot { width: 50px; height: 50px; }

/* touch / no fine pointer -> native cursor, no blob */
@media (hover: none), (pointer: coarse) {
  #blob { display: none; }
}