/* Ring cursor (desktop, fine pointer only), following the CodePen
   reference (cobra_winfrey/OJRjBoj): a circle that trails the real
   cursor with a lerped lag, synced to the site's theme color picker,
   and morphs on hover of clickable elements. No emoji. Mobile/touch
   gets no custom cursor. */

body.giant-cursor-active,
body.giant-cursor-active * {
  cursor: none !important;
}

/* Text-entry fields keep their native cursor so users can see where
   they're typing/clicking to place the caret. */
body.giant-cursor-active input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]),
body.giant-cursor-active textarea,
body.giant-cursor-active select,
body.giant-cursor-active [contenteditable="true"] {
  cursor: auto !important;
}

#giant-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 2px solid var(--theme-accent, #ef3724);
  background: transparent;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

#giant-cursor.visible {
  opacity: 1;
}

#giant-cursor.pointer {
  background: #000;
  border-color: #000;
}

#giant-cursor .giant-cursor-arrow {
  font-size: 13px;
  color: #fff;
  opacity: 0;
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease-in-out;
}

#giant-cursor.pointer .giant-cursor-arrow {
  opacity: 1;
  transform: scale(1);
}