/* ============================================================
   CURSOR — THE BLOCK
   ------------------------------------------------------------
   One solid thing. Not an instrument, not a system of parts —
   a single filled mark that the hand drags around the page.

   Everything it does, it does by being one object with weight:

     · IT LAGS, so it reads as a thing being pulled rather than
       a graphic pinned to the pointer.
     · IT LEANS INTO THE TRAVEL. The gap between the mark and the
       pointer already IS the velocity, so that one vector gives
       both the angle and how far to stretch. Fast movement smears
       it along its own path; stopping squares it up again.
     · OVER SOMETHING YOU CAN ACT ON IT SWELLS. A wordless target
       rounds it into a disc; a named one opens it into a pill with
       the word set inside. Same mark, resized.
     · PRESSING COMPRESSES IT, because that is what happens when
       you push a solid object.

   Three nested elements, one job each: the host carries the
   position, `.cu-lean` carries the rotation and the stretch, and
   `.cu-block` is the solid itself. Nothing else exists — no
   hairlines, no ticks, no coordinates.

   THE ONE TRICK WORTH KNOWING: `mix-blend-mode: difference` sits
   on the host, so the mark composites as a group and then inverts
   against whatever it is standing on — correct over paper, over
   ink and over photography without being told which. The word
   inside is set in BLACK on purpose: black on white within the
   group, so the group inversion prints it as a knockout either
   way round. Over paper you get a dark block with a pale word;
   over ink, a pale block with a dark word.

   `cursor: none` is applied under html.has-cursor, a class the
   script adds only once it is running. A blocked or failed script
   therefore leaves the system pointer in place rather than a page
   with no pointer at all.
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
  /* Universal rather than a list of selectors. The page stylesheets set
     `cursor: pointer` and `cursor: grab` on their own components, and any
     one of them re-summons the system arrow on top of the mark — so the
     rule has to out-reach every such declaration instead of trying to
     enumerate them. */
  html.has-cursor,
  html.has-cursor *,
  html.has-cursor *::before,
  html.has-cursor *::after { cursor: none; }
  /* A caret is information, not decoration — anything you can type
     into keeps the pointer that says so. */
  html.has-cursor input,
  html.has-cursor textarea,
  html.has-cursor select,
  html.has-cursor [contenteditable] { cursor: auto; }
}

/* -- 1. the host: position, and nothing but position -----------
   Fixed at the origin and moved by transform, so the mark's own
   coordinate space starts exactly at the pointer. Hidden until the
   hand first moves — otherwise it would sit in the middle of the
   screen on load, waiting. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 0;
  height: 0;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .28s linear;
  will-change: transform;
}
.cursor.is-live { opacity: 1; }

/* -- 2. the lean: rotation and stretch ------------------------
   A zero-size box whose origin is the pointer, which is also the
   centre of the solid — so rotating here rotates the mark about
   its own middle, and scaling stretches it along the direction it
   is travelling. */
.cu-lean {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* -- 3. the solid ---------------------------------------------
   The whole cursor. Width, height and radius are the only things
   that change between states, and they are written by cursor.js as
   custom properties so one transition covers every state change.
   Centred on the pointer by its own margins rather than by a
   transform, leaving the transform free for the lean. */
.cu-block {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cw, 15px);
  height: var(--ch, 15px);
  margin-top: calc(var(--ch, 15px) / -2);
  margin-left: calc(var(--cw, 15px) / -2);
  border-radius: var(--cr, 2px);
  background: #fff;
  transition: width .34s cubic-bezier(.22, 1, .36, 1),
              height .34s cubic-bezier(.22, 1, .36, 1),
              margin .34s cubic-bezier(.22, 1, .36, 1),
              border-radius .34s cubic-bezier(.22, 1, .36, 1),
              transform .18s ease-out;
}
/* Contact. A solid thing gives a little when you push it. */
.cursor.is-down .cu-block { transform: scale(.8); }

/* -- the word -------------------------------------------------
   Set inside the solid, never beside it: the mark carries its own
   label rather than trailing one. Black by design — see the note
   on the group inversion at the top of this file. */
.cu-word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--sans, 'Poppins', sans-serif);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #000;
  opacity: 0;
  transition: opacity .2s linear;
}
.cursor.is-word .cu-word { opacity: 1; transition-delay: .1s; }

/* Coarse pointers have a finger, not a mark. */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor,
  .cu-block,
  .cu-word { transition: none; }
}