/* Circle cursor — original ring + dot, difference blend for visibility */
:root {
  --cur-ring: 34px;
  --cur-hot-ring: 50px;
  --ease: cubic-bezier(0.7, 0, 0.2, 1);
}

html,
body {
  cursor: none;
}

a,
button,
input,
textarea,
select,
label,
summary,
[role='button'],
[data-cur],
.theme button,
.switch button,
.nav a,
.menu-trigger,
.menu-x,
.submit,
.lb-close,
.lb-nav,
.filters button,
.site-foot .totop,
.faq .q button {
  cursor: none;
}

.cur {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 600;
  pointer-events: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}

.cur .ring {
  width: var(--cur-ring);
  height: var(--cur-ring);
  border: 1px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  background: transparent;
  box-shadow: none;
  outline: none;
  transition: width 0.3s var(--ease), height 0.3s var(--ease);
}

.cur .dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: none;
  outline: none;
}

.cur.hot .ring {
  width: var(--cur-hot-ring);
  height: var(--cur-hot-ring);
}

.cur .lbl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: #fff;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.25s;
  white-space: nowrap;
}

.cur.hot .lbl {
  opacity: 1;
}

.cur.hot .dot {
  opacity: 0;
}

@media (hover: none) {
  html,
  body,
  a,
  button {
    cursor: auto;
  }

  .cur {
    display: none;
  }
}