.correlatif-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  contain: layout style size;
  pointer-events: none;
  will-change: transform;
  transition: opacity 0.3s, color 0.4s;
}
.correlatif-cursor:before {
  content: "";
  position: absolute;
  top: -30px;
  left: -30px;
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.3s ease-in-out, opacity 0.1s;
  background: var(--e-global-color-primary);
}
.correlatif-cursor.-normal { mix-blend-mode: normal; }
.correlatif-cursor.-normal:before { background: currentColor; }
.correlatif-cursor.-text { mix-blend-mode: normal; }
.correlatif-cursor.-text .correlatif-cursor-text { opacity: 1; transform: scale(1); }
.correlatif-cursor.-text:before { background: currentColor; }
.correlatif-cursor.-inverse { color: white; }
.correlatif-cursor.-visible:before { transform: scale(0.2); }
.correlatif-cursor.-visible.-active:before { transform: scale(0.23); transition-duration: 0.2s; }
.correlatif-cursor.-pointer:before { transform: scale(0); }
.correlatif-cursor.-text:before {
  background: #000;
  opacity: 0.8;
  backdrop-filter: blur(10);
  transform: scale(1.5);
}
.correlatif-cursor.-text.-active:before { transform: scale(1.6); transition-duration: 0.2s; }
.correlatif-cursor.-opaque:before { transform: scale(1.5); }
.correlatif-cursor-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  padding: 0 12px;
}