/* Native cursors remain the fallback until a mouse actually moves. */
.brawnd-cursor {
  --cursor-ink: #967052;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483647;
  width: 0;
  height: 0;
  pointer-events: none;
  visibility: hidden;
}

.brawnd-cursor::before {
  content: '';
  position: absolute;
  top: -32px;
  left: -32px;
  width: 64px;
  height: 64px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid currentColor;
  color: var(--cursor-ink);
  opacity: .32;
  transition: color 120ms ease-out;
}

.brawnd-cursor::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cursor-ink);
  transform: translate(var(--cursor-dot-x, 0px), var(--cursor-dot-y, 0px));
  transition: opacity 80ms ease-out, background-color 120ms ease-out;
}

.brawnd-cursor.is-on-dark {
  --cursor-ink: #f1eee7;
}

.brawnd-cursor.is-on-dark::before { opacity: .5; }

.brawnd-cursor.is-interactive::after {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) and (forced-colors: none) {
  html.brawnd-cursor-active,
  html.brawnd-cursor-active * {
    cursor: none !important;
  }

  html.brawnd-cursor-active .brawnd-cursor {
    visibility: visible;
  }

  /* Keep the real platform hand at the exact click point inside the ring. */
  html.brawnd-cursor-active.brawnd-cursor-pointer,
  html.brawnd-cursor-active.brawnd-cursor-pointer * {
    cursor: pointer !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brawnd-cursor::before,
  .brawnd-cursor::after { transition: none; }
}