/**
 * Sits just under the grain (9999) so the reticle picks up the same texture
 * as everything else — a perfectly clean overlay on a grained page reads as
 * a browser artifact rather than part of the image.
 */
.Cursor__cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  width: 0;
  height: 0;
  pointer-events: none;
}

.Cursor__reticle {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  /* The -50% keeps the box centred on the pointer; scale rides on top of it,
     so both live in one transform and neither can clobber the other. */
  transform: translate(-50%, -50%) scale(1);
  transition: transform var(--dur-fast) var(--ease);
}

/* Contracts on a focusable target — the same move a lens makes when it locks. */
.Cursor__cursor.Cursor__focused .Cursor__reticle {
  transform: translate(-50%, -50%) scale(0.714);
}

.Cursor__pulse {
  position: absolute;
  inset: 0;
}

.Cursor__cursor.Cursor__pulsing .Cursor__pulse {
  animation: reticle-pulse var(--dur-fast) var(--ease) 1;
}

@keyframes reticle-pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.82);
  }
  100% {
    transform: scale(1);
  }
}

.Cursor__corner {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid var(--accent);
}

.Cursor__tl {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}

.Cursor__tr {
  top: 0;
  right: 0;
  border-left: 0;
  border-bottom: 0;
}

.Cursor__bl {
  bottom: 0;
  left: 0;
  border-right: 0;
  border-top: 0;
}

.Cursor__br {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
}

.Cursor__label {
  position: absolute;
  top: 20px;
  left: 0;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--accent);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.Cursor__cursor.Cursor__focused .Cursor__label {
  opacity: 1;
}