.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
  border-radius:50%;transform:translate(-50%,-50%);will-change:transform;
  transition:background .4s,border-color .4s;
}
.cursor-dot{
  width:7px;height:7px;background:var(--accent);
  box-shadow:0 0 12px var(--glow);
  transition:transform .15s ease,background .3s,box-shadow .3s;
}
.cursor-ring{
  width:34px;height:34px;
  border:1.5px solid color-mix(in srgb,var(--accent) 70%,transparent);
  transition:width .25s cubic-bezier(.2,.8,.2,1),height .25s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s;
}
.cursor-ring.hover{
  width:60px;height:60px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-color:var(--accent);
}
.cursor-dot.hover{background:var(--bg);box-shadow:0 0 18px var(--glow)}

@media(hover:none){
  .cursor-dot,.cursor-ring{display:none}
  body,a,button{cursor:auto}
}

/* Funky chromatic aura that follows the pointer */
.cursor-aura{
  position:fixed;inset:0;pointer-events:none;z-index:9998;
  overflow:hidden;mix-blend-mode:screen;transition:opacity .5s;
}
[data-theme="light"] .cursor-aura{mix-blend-mode:multiply;opacity:.4}

.aura-core{
  position:absolute;top:0;left:0;border-radius:50%;
  width:120px;height:120px;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--accent) 55%,transparent) 0%,
    transparent 70%);
  filter:blur(16px);will-change:transform;
}
.aura-halo{
  position:absolute;top:0;left:0;border-radius:50%;
  width:220px;height:220px;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--accent-2) 30%,transparent) 0%,
    transparent 65%);
  filter:blur(34px);will-change:transform;opacity:.8;
}
@media(hover:none){.cursor-aura{display:none}}