/* ============================================================
   Custom cursor — only on fine pointers (added by cursor.js).
   Position driven by CSS vars (--wwd-cx/cy pointer, --wwd-rx/ry lagged).
   mix-blend-mode keeps it visible on dark + cream surfaces.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {

  html.wwd-cursor-on,
  html.wwd-cursor-on a,
  html.wwd-cursor-on button,
  html.wwd-cursor-on [role="button"],
  html.wwd-cursor-on label,
  html.wwd-cursor-on summary,
  html.wwd-cursor-on .wwd-burger { cursor: none; }

  /* Keep the native I-beam in fields */
  html.wwd-cursor-on input,
  html.wwd-cursor-on textarea,
  html.wwd-cursor-on select,
  html.wwd-cursor-on [contenteditable] { cursor: auto; }

  .wwd-cursor { --wwd-cx: -100px; --wwd-cy: -100px; --wwd-rx: -100px; --wwd-ry: -100px; position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; }

  .wwd-cursor__dot, .wwd-cursor__ring, .wwd-cursor__label {
    position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none;
  }

  .wwd-cursor__dot {
    width: 7px; height: 7px; background: #fff; mix-blend-mode: difference;
    transform: translate(var(--wwd-cx), var(--wwd-cy)) translate(-50%, -50%);
    transition: opacity .2s var(--wwd-ease), width .2s var(--wwd-ease), height .2s var(--wwd-ease);
  }
  .wwd-cursor__ring {
    width: 40px; height: 40px; border: 1.5px solid #fff; border-radius: 999px; mix-blend-mode: difference;
    transform: translate(var(--wwd-rx), var(--wwd-ry)) translate(-50%, -50%);
    transition: width .28s var(--wwd-ease), height .28s var(--wwd-ease), border-radius .28s var(--wwd-ease), opacity .25s var(--wwd-ease);
  }
  .wwd-cursor__label {
    display: flex; align-items: center; gap: 5px; width: auto; min-width: 34px; height: 34px; padding: 0 13px;
    justify-content: center; border-radius: 999px; white-space: nowrap;
    background: var(--wwd-green-bright); color: var(--wwd-ink);
    box-shadow: 0 4px 16px rgba(0,0,0,.28);
    font-family: var(--wwd-font-head); font-weight: 600; font-size: .82rem;
    transform: translate(var(--wwd-rx), var(--wwd-ry)) translate(-50%, -50%);
    opacity: 0; transition: opacity .22s var(--wwd-ease), transform .15s var(--wwd-ease);
  }
  .wwd-cursor__label svg { width: 15px; height: 15px; }
  /* "View" word only on content cards; other links get the arrow alone */
  .wwd-cursor__txt { display: none; }
  .wwd-cursor.is-view .wwd-cursor__txt { display: inline; }

  /* States — ANY interactive element shows the green pill; the white ring + dot
     hide so there's no white-outline cursor on links anywhere. */
  .wwd-cursor.is-hover .wwd-cursor__label,
  .wwd-cursor.is-view .wwd-cursor__label { opacity: 1; }
  .wwd-cursor.is-down .wwd-cursor__label { transform: translate(var(--wwd-rx), var(--wwd-ry)) translate(-50%, -50%) scale(.9); }

  .wwd-cursor.is-hover .wwd-cursor__ring,
  .wwd-cursor.is-hover .wwd-cursor__dot,
  .wwd-cursor.is-view .wwd-cursor__ring,
  .wwd-cursor.is-view .wwd-cursor__dot,
  .wwd-cursor.is-text .wwd-cursor__ring,
  .wwd-cursor.is-text .wwd-cursor__dot,
  .wwd-cursor.is-hidden .wwd-cursor__dot,
  .wwd-cursor.is-hidden .wwd-cursor__ring,
  .wwd-cursor.is-hidden .wwd-cursor__label { opacity: 0; }
}