/* Static progressive fallback for mouse pointers; touch never replaces a cursor. */
@media (hover: hover) and (pointer: fine) {
  html:has(.dragonfly-cursor),
  html:has(.dragonfly-cursor) :is(:disabled, [aria-disabled='true']):not(:where([data-native-cursor], [data-native-cursor] *)) {
    cursor: url('/assets/cursor/dragonfly.png') 28 21, auto;
  }
}

.dragonfly-cursor { pointer-events: none; user-select: none; }
.dragonfly-cursor [hidden] { display: none; }
.dragonfly-cursor__follower {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  will-change: transform;
}
.dragonfly-cursor__art {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  left: -28px;
  top: -21px;
  transform-origin: 28px 21px;
}
.dragonfly-cursor__art img {
  position: absolute;
  inset: 0;
  width: 56px;
  height: 56px;
}
/* Wings hinge at the thorax; the click hotspot is between the eyes. */
.dragonfly-cursor__wing { transform-origin: 28px 24px; transition: transform 140ms ease-out; }
.dragonfly-cursor__wing--left { --wing-turn: -5deg; }
.dragonfly-cursor__wing--right { --wing-turn: 5deg; }

/* The indicator always marks the exact pointer: dot, click ring, open/closed grip. */
.dragonfly-cursor__hotspot {
  position: fixed;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  margin: -7px;
  z-index: 1001;
}
.dragonfly-cursor__hotspot::before {
  content: '';
  box-sizing: border-box;
  width: 2px;
  height: 2px;
  border: 1px solid #494840;
  border-radius: 50%;
  background: #494840;
  box-shadow: 0 0 0 1px #faf9f6b3;
  transition: width 120ms ease-out, height 120ms ease-out, border-radius 120ms ease-out, background 120ms ease-out;
}
.dragonfly-cursor[data-state='perch'] .dragonfly-cursor__hotspot::before {
  width: 8px;
  height: 8px;
  background: transparent;
}
.dragonfly-cursor[data-state='perch'] .dragonfly-cursor__wing { transform: scaleX(0.8); }
.dragonfly-cursor[data-state='grab'] .dragonfly-cursor__hotspot::before {
  width: 12px;
  height: 12px;
  border-style: dashed;
  border-radius: 4px;
  background: transparent;
}
.dragonfly-cursor[data-state='grab'] .dragonfly-cursor__wing {
  transform: scaleX(0.65) rotate(var(--wing-turn));
}
.dragonfly-cursor[data-state='grabbing'] .dragonfly-cursor__hotspot::before,
.dragonfly-cursor[data-state='perch'][data-pressed='true'] .dragonfly-cursor__hotspot::before {
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: #494840;
}
.dragonfly-cursor[data-state='grabbing'] .dragonfly-cursor__wing {
  transform: scaleX(0.38) rotate(var(--wing-turn));
}

@keyframes dragonfly-wingbeat {
  from { transform: scaleX(1) rotate(0deg); }
  to { transform: scaleX(0.48) rotate(var(--wing-turn)); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.dragonfly-cursor-active { cursor: none; }
  .dragonfly-cursor-surface, .dragonfly-cursor-surface * { cursor: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
  .dragonfly-cursor:is([data-state='flight'], [data-state='perch']) .dragonfly-cursor__follower[data-moving='true'] .dragonfly-cursor__wing {
    animation: dragonfly-wingbeat 65ms ease-in-out infinite alternate;
  }
}

/* Zero specificity lets page-level control styles take precedence. */
:where(html:has(.dragonfly-cursor)) :where([role='button'], [role='link']) { cursor: pointer; }
:where(html:has(.dragonfly-cursor)) :where([contenteditable]:not([contenteditable='false'])) { cursor: text; }
:where(html:has(.dragonfly-cursor)) :where([data-native-cursor]) { cursor: auto; }

@media (prefers-reduced-motion: reduce) {
  .dragonfly-cursor { display: none; }
}