/* cursor.css — WMWH brand pointer + trailing diamond motif.
   Native cursor hidden where the custom cursor is active; restored for touch
   and reduced-motion users. Extracted from inline <style> in index.html so it
   can be reused across pages. */

html.has-custom-cursor,
html.has-custom-cursor body,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor [role="button"],
html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor label,
html.has-custom-cursor .btn,
html.has-custom-cursor .diag-btn,
html.has-custom-cursor .diag-btn-o { cursor: none; }

#cursor-arrow,
#cursor-diamond {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  opacity: 0;
  will-change: transform, opacity;
}

/* Arrow: tip at (0,0) so transform x/y = pointer position exactly. */
#cursor-arrow {
  width: 22px;
  height: 22px;
  transform: translate(-100px, -100px);
  filter: drop-shadow(0 1px 2px rgba(5, 5, 5, 0.18));
}
#cursor-arrow svg { display: block; width: 100%; height: 100%; }

/* Diamond: trails behind, centered on transform origin. */
#cursor-diamond {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  transform: translate(-100px, -100px) rotate(45deg);
  color: var(--color-accent);
  transition: color 0.18s var(--ease-feedback);
}
#cursor-diamond::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid currentColor;
  background: transparent;
}

/* Inverted on dark regions (sections + nav) — cream fill so it reads on dark. */
html.cursor-on-dark #cursor-diamond { color: var(--color-text-inverse); }
html.cursor-on-dark #cursor-arrow svg .arrow-fill   { fill:   var(--color-text-inverse); }
html.cursor-on-dark #cursor-arrow svg .arrow-stroke { stroke: var(--color-accent); }
html.cursor-on-dark #cursor-arrow { filter: drop-shadow(0 0 2px rgba(245, 245, 240, 0.35)); }

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  html.has-custom-cursor,
  html.has-custom-cursor body,
  html.has-custom-cursor a,
  html.has-custom-cursor button,
  html.has-custom-cursor .btn,
  html.has-custom-cursor .diag-btn,
  html.has-custom-cursor .diag-btn-o { cursor: auto; }
  #cursor-arrow,
  #cursor-diamond { display: none; }
}