:root {
  --cursor-color: var(--brand-color-main);
}

@media (pointer: fine) {
  *, *::before, *::after { cursor: none !important; }

  #cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cursor-color, #fff);
    pointer-events: none;
    z-index: 99999;
    will-change: transform;
  }

  #cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--cursor-color, #fff);
    background-color: #ffffffaa;
    opacity: 0.55;
    pointer-events: none;
    z-index: 99998;
    will-change: transform;
  }
}