:root {
  --va-cursor-violet: rgba(139, 92, 246, 0.88);
  --va-cursor-violet-soft: rgba(167, 139, 250, 0.72);
  --va-cursor-cyan: rgba(45, 212, 191, 0.82);
  --va-cursor-cyan-soft: rgba(94, 234, 212, 0.68);
}

@media (hover: hover) and (pointer: fine) {
  html.va-custom-cursor body,
  html.va-custom-cursor body * {
    cursor: none !important;
  }

  html.va-custom-cursor input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  html.va-custom-cursor textarea,
  html.va-custom-cursor select,
  html.va-custom-cursor option,
  html.va-custom-cursor [contenteditable="true"] {
    cursor: text !important;
  }
}

.va-cursor,
.va-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 10001;
  transform: translate3d(-100px, -100px, 0);
  transition:
    opacity 180ms ease,
    width 220ms cubic-bezier(0.16, 1, 0.3, 1),
    height 220ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease,
    filter 220ms ease;
  will-change: transform, opacity, width, height;
}

.va-cursor {
  width: 36px;
  height: 36px;
  border: 1px solid var(--va-cursor-violet-soft);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(45, 212, 191, 0.05));
  box-shadow:
    0 0 32px rgba(139, 92, 246, 0.14),
    inset 0 0 22px rgba(45, 212, 191, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mix-blend-mode: screen;
}

.va-cursor::before,
.va-cursor::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.va-cursor::before {
  inset: -18px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, rgba(45, 212, 191, 0.08) 42%, transparent 72%);
  filter: blur(12px);
  opacity: 0.92;
}

.va-cursor::after {
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.va-cursor-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(196, 181, 253, 0.96), rgba(45, 212, 191, 0.96));
  box-shadow:
    0 0 20px rgba(139, 92, 246, 0.42),
    0 0 10px rgba(45, 212, 191, 0.28);
  mix-blend-mode: screen;
}

html.va-cursor-visible .va-cursor,
html.va-cursor-visible .va-cursor-dot {
  opacity: 1;
}

html.va-cursor-hover .va-cursor {
  width: 50px;
  height: 50px;
  border-color: var(--va-cursor-cyan-soft);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(45, 212, 191, 0.1));
  box-shadow:
    0 0 38px rgba(45, 212, 191, 0.16),
    0 0 20px rgba(139, 92, 246, 0.2),
    inset 0 0 26px rgba(196, 181, 253, 0.09);
}

html.va-cursor-hover .va-cursor-dot {
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, rgba(196, 181, 253, 1), rgba(94, 234, 212, 1));
  box-shadow:
    0 0 24px rgba(139, 92, 246, 0.48),
    0 0 16px rgba(45, 212, 191, 0.34);
}

html.va-cursor-press .va-cursor {
  width: 28px;
  height: 28px;
}

html.va-cursor-press .va-cursor-dot {
  width: 8px;
  height: 8px;
}

html.va-cursor-native .va-cursor,
html.va-cursor-native .va-cursor-dot {
  opacity: 0 !important;
}