/* ── CUSTOM CURSOR (shared across all pages) ── */
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: opacity .2s ease, background-color .2s ease, width .25s ease, height .25s ease, border-radius .25s ease, border-width .2s ease;
  will-change: transform;
}

.cursor-ring.is-active { opacity: 1; }
.cursor-ring.is-hovering { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.cursor-ring.is-suppressed { opacity: 0 !important; }

.cursor-ring.is-text-field {
  width: 2px;
  height: 22px;
  border-radius: 1px;
  border-width: 0;
  background: var(--accent);
}

@media (hover: hover) and (pointer: fine) {
  html.cursor-custom,
  html.cursor-custom *,
  html.cursor-custom *::before,
  html.cursor-custom *::after {
    cursor: none !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .cursor-ring { display: none; }
}