/* Elastic Ring Cursor */
@media (hover: hover) and (pointer: fine) {
  body.has-custom-cursor {
    cursor: none;
  }

  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor [role="button"],
  body.has-custom-cursor input,
  body.has-custom-cursor textarea,
  body.has-custom-cursor select,
  body.has-custom-cursor label {
    cursor: none;
  }
}

.cursor-system {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
}

.cursor-system[hidden] {
  display: none;
}

.cursor-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  margin-block-start: -4px;
  margin-inline-start: -4px;
  border-radius: 50%;
  background: var(--color-signal);
  box-shadow: 0 0 10px var(--color-aqua);
  transform: translate3d(var(--cx, 0), var(--cy, 0), 0);
  will-change: transform;
  transition:
    width 0.25s ease,
    height 0.25s ease,
    margin 0.25s ease,
    background 0.25s ease;
}

.cursor-dot.is-hover {
  width: 6px;
  height: 6px;
  margin-block-start: -3px;
  margin-inline-start: -3px;
  background: var(--color-aqua);
}

.cursor-dot.is-pressed {
  transform: translate3d(var(--cx, 0), var(--cy, 0), 0) scale(0.6);
}

.cursor-ring {
  position: fixed;
  width: 36px;
  height: 36px;
  margin-block-start: -18px;
  margin-inline-start: -18px;
  border-radius: 50%;
  border: 2px solid rgba(111, 169, 216, 0.65);
  transform: translate3d(var(--rx, 0), var(--ry, 0), 0);
  will-change: transform;
  transition:
    width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    margin 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.25s ease,
    border-width 0.25s ease;
}

.cursor-ring.is-hover {
  width: 52px;
  height: 52px;
  margin-block-start: -26px;
  margin-inline-start: -26px;
  border-color: var(--color-signal);
  border-width: 2px;
  box-shadow: 0 0 20px rgba(244, 197, 66, 0.35);
}

.cursor-ring.is-pressed {
  width: 28px;
  height: 28px;
  margin-block-start: -14px;
  margin-inline-start: -14px;
  border-color: var(--color-aqua);
}
