/* Magic Cursor base styles */
.mm-cursor{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--mm-z);
  mix-blend-mode: var(--mm-blend);
}
.mm-cursor__inner, .mm-cursor__outer{
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  will-change: transform;
  pointer-events: none;
}
.mm-cursor__inner{
  width: var(--mm-size-inner);
  height: var(--mm-size-inner);
  border-radius: 50%;
  background: var(--mm-color);
  transition: transform .15s ease-out, opacity .2s;
}
.mm-cursor__outer{
  width: var(--mm-size-outer);
  height: var(--mm-size-outer);
  border-radius: 50%;
  border: 2px solid var(--mm-color);
  transition: transform .25s ease-out, opacity .2s, border-color .2s;
  opacity: .9;
}

/* States */
.mm-hover .mm-cursor__outer{ transform: translate(-50%, -50%) scale(var(--mm-hover-scale, 1.35)); }
.mm-hover .mm-cursor__inner{ transform: translate(-50%, -50%) scale(0.6); }

.mm-down .mm-cursor__outer{ transform: translate(-50%, -50%) scale(0.85); }
.mm-down .mm-cursor__inner{ transform: translate(-50%, -50%) scale(0.85); }

.mm-hide .mm-cursor__inner,
.mm-hide .mm-cursor__outer{ opacity: 0; }

/* Hide on devices that do not support hover */
@media (hover: none){
  .mm-cursor{ display: none; }
}