.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  will-change: transform, width, height, background-color, border-color, opacity;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d4a514;
  opacity: 0.95;
}

.cursor-ring {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(212, 165, 20, 0.7);
  background: rgba(212, 165, 20, 0.08);
  transition:
    width 0.25s ease,
    height 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    opacity 0.25s ease;
}

.cursor-ring.is-nav-hover {
  width: 52px;
  height: 52px;
  background: rgba(212, 165, 20, 0.72);
  border-color: transparent;
}

.cursor-dot.is-nav-hover {
  width: 5px;
  height: 5px;
  background: #ffffff;
}

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