:root {
  --kinetic-cursor-size: 20px;
  --kinetic-cursor-color: #52ff2b;
  --kinetic-cursor-glow: rgba(82, 255, 43, 0.22);
  --kinetic-cursor-z: 9999;
  --kinetic-cursor-easing: cubic-bezier(0.165, 0.84, 0.44, 1);
}

body[data-loader-theme="torix"] {
  --kinetic-cursor-color: #52ff2b;
  --kinetic-cursor-glow: rgba(82, 255, 43, 0.22);
}

body[data-loader-theme="green-games"] {
  --kinetic-cursor-color: #52ff2b;
  --kinetic-cursor-glow: rgba(82, 255, 43, 0.22);
}

body[data-loader-theme="yellow-drivers"] {
  --kinetic-cursor-color: #ffd447;
  --kinetic-cursor-glow: rgba(255, 212, 71, 0.24);
}

body[data-loader-theme="violet-guard"] {
  --kinetic-cursor-color: #bc13fe;
  --kinetic-cursor-glow: rgba(188, 19, 254, 0.24);
}

body[data-loader-theme="red-booster"] {
  --kinetic-cursor-color: #ff5c5c;
  --kinetic-cursor-glow: rgba(255, 92, 92, 0.24);
}

body[data-loader-theme="blue-cleaner"] {
  --kinetic-cursor-color: #62a9ff;
  --kinetic-cursor-glow: rgba(98, 169, 255, 0.24);
}

body[data-loader-theme="orange-desk"] {
  --kinetic-cursor-color: #ff9c2f;
  --kinetic-cursor-glow: rgba(255, 156, 47, 0.24);
}

#cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--kinetic-cursor-size);
  height: var(--kinetic-cursor-size);
  border-radius: 50%;
  background: var(--kinetic-cursor-color);
  pointer-events: none;
  mix-blend-mode: difference;
  z-index: var(--kinetic-cursor-z);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px var(--kinetic-cursor-glow);
  transition:
    width 0.3s var(--kinetic-cursor-easing),
    height 0.3s var(--kinetic-cursor-easing),
    transform 0.05s linear,
    background 0.3s var(--kinetic-cursor-easing),
    border-color 0.3s var(--kinetic-cursor-easing),
    box-shadow 0.3s var(--kinetic-cursor-easing);
}

#cursor.is-active {
  width: 90px;
  height: 90px;
  background: transparent;
  border: 1px solid var(--kinetic-cursor-color);
  box-shadow: 0 0 30px var(--kinetic-cursor-glow);
}

#cursor.is-active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--kinetic-cursor-color);
  transform: translate(-50%, -50%);
}

body.kinetic-cursor-enabled,
body.kinetic-cursor-enabled * {
  cursor: none !important;
}

@media (pointer: coarse), (max-width: 720px) {
  #cursor {
    display: none;
  }

  body.kinetic-cursor-enabled,
  body.kinetic-cursor-enabled * {
    cursor: auto !important;
  }
}