/* ── Custom cursor (mouse / trackpad only; cursor.js adds .has-cursor) ──
   A small dot that inverts what's under it, grows over links, and turns into a
   labelled bubble over anything marked data-cursor="view". */
.has-cursor,
.has-cursor * { cursor: none !important; }

.cursor {
  position: fixed;
  left: 0; top: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  will-change: transform;
}
.cursor.is-visible { opacity: 1; }

.cursor-dot {
  --size: 16px;
  position: absolute;
  left: calc(var(--size) / -2);
  top: calc(var(--size) / -2);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #FAFAFA;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    width 260ms cubic-bezier(.2,.8,.2,1),
    height 260ms cubic-bezier(.2,.8,.2,1),
    left 260ms cubic-bezier(.2,.8,.2,1),
    top 260ms cubic-bezier(.2,.8,.2,1),
    background 200ms ease,
    transform 150ms ease;
}
/* the blend sits on the outer layer: its transform isolates anything inside it from the page */
.cursor { mix-blend-mode: exclusion; }
.cursor.is-view { mix-blend-mode: normal; }

.cursor.is-link .cursor-dot { --size: 32px; }
.cursor.is-pressed .cursor-dot { transform: scale(0.8); }

/* Over a case study the dot shrinks away and a pill in the project's colour takes over,
   sitting just below-right of the pointer. Colours come from data-cursor-color. */
.cursor.is-view .cursor-dot { transform: scale(0); }
.cursor-pill {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 14px 26px;
  border-radius: 999px;
  background: #4D1722;
  color: #FFFFFF;
  font-family: 'Fustat', system-ui, sans-serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.6);
  transform-origin: top left;
  transition:
    opacity 180ms ease,
    transform 260ms cubic-bezier(.2,.8,.2,1),
    background 200ms ease;
}
.cursor.is-view .cursor-pill { opacity: 1; transform: none; }
.cursor.is-view.is-pressed .cursor-pill { transform: scale(0.94); }