/* ==========================================================================
   No Fault Design — pointer

   Two layers: an exact dot and a trailing ring. The ring grows over anything
   interactive and can carry a short label. Shown only for a real mouse; the
   script does not run otherwise, so nothing here applies on touch.
   ========================================================================== */

.nf-cursor {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  /* The layer must never affect layout or scrolling. */
  contain: strict;
}
.nf-cursor.is-visible { opacity: 1; }

.nf-cursor__dot,
.nf-cursor__ring {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 999px;
  will-change: transform;
}

/* The dot tracks the pointer exactly. */
.nf-cursor__dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #ff4d3d;
  transition: width 0.28s cubic-bezier(0.44, 0, 0.56, 1),
              height 0.28s cubic-bezier(0.44, 0, 0.56, 1),
              margin 0.28s cubic-bezier(0.44, 0, 0.56, 1),
              opacity 0.2s ease;
}

/* The ring trails it, and is what grows on hover. */
.nf-cursor__ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(23, 23, 23, 0.32);
  display: grid;
  place-items: center;
  transition: width 0.36s cubic-bezier(0.44, 0, 0.56, 1),
              height 0.36s cubic-bezier(0.44, 0, 0.56, 1),
              margin 0.36s cubic-bezier(0.44, 0, 0.56, 1),
              background-color 0.3s ease,
              border-color 0.3s ease;
}

/* Over something interactive: the ring fills with brand colour and the dot
   disappears into it. */
.nf-cursor.is-active .nf-cursor__ring {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  background: #ff4d3d;
  border-color: #ff4d3d;
}
.nf-cursor.is-active .nf-cursor__dot { opacity: 0; }

/* With a label the ring opens up to hold it. */
.nf-cursor.has-label .nf-cursor__ring {
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
}

.nf-cursor__label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #fff;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.44, 0, 0.56, 1);
  white-space: nowrap;
}
.nf-cursor.has-label .nf-cursor__label { opacity: 1; transform: none; }

/* Press. */
.nf-cursor.is-down .nf-cursor__ring {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
}
.nf-cursor.is-down.is-active .nf-cursor__ring {
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
}

/* Over a text field the native caret is more useful than the ring. */
.nf-cursor.is-text { opacity: 0; }

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