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

#cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 22px; height: 22px;
  border: 1.5px solid rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.07);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999999999999;
  transform: translate(-50%, -50%);
  transition: width 0.28s cubic-bezier(0.25,0.46,0.45,0.94),
              height 0.28s cubic-bezier(0.25,0.46,0.45,0.94),
              opacity 0.25s ease;
  will-change: transform, width, height;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
#cursor-ring.size-edge    { width: 42px; height: 42px; }
#cursor-ring.size-hamburger { width: 58px; height: 58px; }
#cursor-ring.hidden       { opacity: 0; }

#cursor-arrow {
  position: absolute;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
#cursor-arrow svg { width: 12px; height: 12px; overflow: visible; }
#cursor-ring.size-edge #cursor-arrow { opacity: 1; }

@media (hover: none), (pointer: coarse) {
  body.custom-cursor-active,
  body.custom-cursor-active *,
  html.custom-cursor-active,
  html.custom-cursor-active * { cursor: auto !important; }
  #cursor-ring { display: none; }
}