/* Custom cursor: a dot that sits on the pointer and a circle that trails it.
   cursor.js writes `translate` (position); this file owns
   look and state. Each shape is offset by half its size, so its own centre is
   the point `translate` moves, and `scale` grows it around that centre.
   (Do not move position into `transform`: `scale` is applied outside it, so
   scaling would push the shape away from the pointer.)
   The element only exists for fine pointers (a mouse or trackpad). */

html.has-cursor,
html.has-cursor * {
  cursor: none !important;
}

.cursor {
  position: fixed;
  inset: 0;
  z-index: 300;
  color: var(--dark-crimson);
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.cursor[hidden] {
  display: none;
}

.cursor.is-hidden {
  opacity: 0;
}

.cursor svg,
.cursor span {
  position: fixed;
  pointer-events: none;
  will-change: translate, scale;
}

.cursor svg {
  top: -1rem;
  left: -1rem;
  width: 2rem;
  height: 2rem;
  overflow: visible;
  transition: scale 0.12s var(--ease-out);
}

.cursor circle {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  /* The fill must land with the click, so it is near-instant. */
  transition:
    fill 0.06s linear,
    stroke var(--duration-fast) var(--ease-out);
}

.cursor span {
  top: -0.1875rem;
  left: -0.1875rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
  transition:
    scale var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

/* Over a link or button, and while clicking, the outline grows by the same
   small amount. Hover tints it lightly; a click tints it more (below). */
.cursor:is(.is-hovering, .is-pressing) svg {
  scale: 1.2;
}

.cursor.is-hovering circle {
  fill: color-mix(in srgb, currentColor 18%, transparent);
}

.cursor.is-hovering span {
  scale: 0.65;
}

/* Over a dark or crimson surface, where a dark crimson cursor would disappear. */
.cursor.is-on-dark {
  color: var(--off-white);
}

/* A click fills the outline. */
.cursor.is-pressing circle {
  fill: color-mix(in srgb, currentColor 28%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .cursor,
  .cursor svg,
  .cursor span,
  .cursor circle {
    transition: none;
  }
}