.target-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 120;
  opacity: 0;
  transition: opacity 180ms ease;
}

.target-cursor.is-visible {
  opacity: 1;
}

.target-cursor__ink-yinyang {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--tc-ink-size, 52px);
  height: var(--tc-ink-size, 52px);
  margin-top: calc(var(--tc-ink-size, 52px) * -0.5);
  margin-left: calc(var(--tc-ink-size, 52px) * -0.5);
  background: url("../assets/cursors/ink-yin-yang-cursor-v1-256.png?v=1") center / contain no-repeat;
  filter: drop-shadow(0 2px 5px rgba(18, 31, 31, 0.2));
  animation: target-cursor-ink-rotate var(--tc-swim-duration, 4.4s) linear infinite;
  transition: filter 180ms ease;
  will-change: transform;
}

.target-cursor__mode-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--tc-text-size, 56px);
  height: var(--tc-text-size, 56px);
  margin-top: calc(var(--tc-text-size, 56px) * -0.5);
  margin-left: calc(var(--tc-text-size, 56px) * -0.5);
  background: center / contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(18, 31, 31, 0.18));
  opacity: 0;
  transition: opacity 120ms ease, filter 180ms ease;
  will-change: transform, opacity;
}

.target-cursor__mode-icon--input { background-image: url("../assets/cursors/ink-text-input-cursor-v1-256.png?v=1"); }
.target-cursor__mode-icon--textarea { background-image: url("../assets/cursors/ink-textarea-cursor-v1-256.png?v=1"); }
.target-cursor__mode-icon--richtext { background-image: url("../assets/cursors/ink-richtext-cursor-v1-256.png?v=1"); }
.target-cursor__mode-icon--loading {
  width: var(--tc-loading-size, 54px);
  height: var(--tc-loading-size, 54px);
  margin-top: calc(var(--tc-loading-size, 54px) * -0.5);
  margin-left: calc(var(--tc-loading-size, 54px) * -0.5);
  background-image: url("../assets/cursors/ink-text-loading-cursor-v1-256.png?v=1");
}

.target-cursor[data-cursor-mode="input"] .target-cursor__ink-yinyang,
.target-cursor[data-cursor-mode="textarea"] .target-cursor__ink-yinyang,
.target-cursor[data-cursor-mode="richtext"] .target-cursor__ink-yinyang,
.target-cursor[data-cursor-mode="loading"] .target-cursor__ink-yinyang {
  opacity: 0;
}

.target-cursor[data-cursor-mode="input"] .target-cursor__mode-icon--input,
.target-cursor[data-cursor-mode="textarea"] .target-cursor__mode-icon--textarea,
.target-cursor[data-cursor-mode="richtext"] .target-cursor__mode-icon--richtext,
.target-cursor[data-cursor-mode="loading"] .target-cursor__mode-icon--loading {
  opacity: 1;
}

.target-cursor[data-cursor-mode="loading"] .target-cursor__mode-icon--loading {
  animation: target-cursor-loading-rotate 1.1s linear infinite;
}

.target-cursor.is-targeting .target-cursor__ink-yinyang {
  animation-duration: 1.35s;
  filter: drop-shadow(0 0 0 rgba(209, 172, 105, 0.78)) drop-shadow(0 3px 9px rgba(209, 172, 105, 0.42));
}

@keyframes target-cursor-ink-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes target-cursor-loading-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* Keep the native pointer hidden across every painted page element, including custom cursor:pointer rules. */
html.target-cursor-hide-default,
html.target-cursor-hide-default * {
  cursor: none !important;
}

/* The browser may otherwise display a grabbing cursor after pointer capture begins. */
html.target-cursor-hide-default.target-cursor-dragging,
html.target-cursor-hide-default.target-cursor-dragging * {
  cursor: none !important;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .target-cursor {
    display: none !important;
  }

  html.target-cursor-hide-default,
  html.target-cursor-hide-default * {
    cursor: auto !important;
  }
}