/* Custom cursor: a small black square that becomes a "View case study" label over a project card.
   Only for mouse/trackpad; touch devices keep their normal behaviour. */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor * { cursor: none !important; }
  html.has-cursor input, html.has-cursor textarea { cursor: text !important; }
  .cursor {
    display: flex; align-items: center; gap: 8px;
    position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;
    width: 14px; height: 14px; padding: 0; overflow: hidden; white-space: nowrap;
    background: #000; color: #fff;
    font: 500 11px/1 "Archivo", system-ui, sans-serif; letter-spacing: .02em; text-transform: uppercase;
    transform: translate3d(var(--x, -100px), var(--y, -100px), 0) translate(-50%, -50%);
    transition: width .25s ease, height .25s ease, padding .25s ease, opacity .2s ease;
    will-change: transform;
  }
  .cursor__label { opacity: 0; transition: opacity .15s ease; }
  .cursor__label svg { width: 9px; height: 9px; vertical-align: 0; margin-left: 5px; }
  .cursor.is-card {
    width: var(--cw, 200px); height: 30px; padding: 0 12px;
    transform: translate3d(var(--x), var(--y), 0) translate(12px, 12px);
  }
  .cursor.is-card .cursor__label { opacity: 1; transition-delay: .1s; }
  .cursor.is-hidden { opacity: 0; }
}