/* The homepage's hover cursor (js/cursor/cursor.js): over Cyrus, his pill and the works, a small
   ink dot at the pointer and a paper caption in the Caslon italic pinned beside it, saying what a
   click does. */

.has-cursor [data-cursor] { cursor: none !important; }

.cur { position: fixed; z-index: 90; left: 0; top: 0; pointer-events: none; }
.cur-dot {
  position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ink);
  scale: 0; transition: scale 0.3s cubic-bezier(0.2, 1.3, 0.35, 1);
}
.cur-tag {
  position: absolute; left: 14px; top: 12px; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 9px 16px 11px 17px; border-radius: 999px; background: var(--paper); color: var(--ink);
  font: italic 400 22px/1 var(--serif); letter-spacing: -0.02em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 16px 32px -14px rgba(0, 0, 0, 0.35);
  transform-origin: 0 0; opacity: 0; scale: 0.86; translate: -6px -4px;
  transition: opacity 0.2s ease, scale 0.45s cubic-bezier(0.2, 1.3, 0.35, 1), translate 0.45s cubic-bezier(0.2, 1.3, 0.35, 1);
}
.cur.is-on .cur-dot { scale: 1; }
.cur.is-on .cur-tag { opacity: 1; scale: 1; translate: none; }
.cur-words { display: grid; gap: 4px; }
.cur-subtitle { font: 400 12px/1.2 var(--sans); letter-spacing: 0; text-align: center; }
.cur.is-on.is-down .cur-dot { scale: 0.6; }
.cur-arrow { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cur-wave { height: 14px; }