/* Fine pointers only. Touch devices have no hover, so a ring would just be a
   stray dot parked wherever the last tap landed. */
@media (hover: hover) and (pointer: fine) {

  .lwh-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .22s ease;
    will-change: transform;
  }

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

  .lwh-cursor-ring {
    display: block;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 1.5px solid #36C759;
    border-radius: 50%;
    background-color: transparent;
    transition: transform .22s cubic-bezier(.22,1,.36,1),
                background-color .22s ease;
  }

  .lwh-cursor.is-active .lwh-cursor-ring {
    transform: scale(2.1);
    background-color: rgba(54,199,89,.14);
  }

  .lwh-cursor.is-down .lwh-cursor-ring { transform: scale(1.5); }
  .lwh-cursor.is-active.is-down .lwh-cursor-ring { transform: scale(1.75); }

  /* Applied by the script itself, so a JS failure never leaves someone
     with no pointer at all. */
  html.lwh-cursor-on,
  html.lwh-cursor-on a,
  html.lwh-cursor-on button,
  html.lwh-cursor-on [role="button"],
  html.lwh-cursor-on label { cursor: none; }

  /* Text fields keep their I-beam. Losing it makes them harder to use. */
  html.lwh-cursor-on input,
  html.lwh-cursor-on textarea,
  html.lwh-cursor-on select,
  html.lwh-cursor-on [contenteditable] { cursor: auto; }
}

/* Reduced motion removes the easing, not the state change: the ring still has
   to tell you when you are over something clickable. */
@media (prefers-reduced-motion: reduce) {
  .lwh-cursor, .lwh-cursor-ring { transition: none; }
}