/* ShiftFlow 1.4.1 – großer, weicher Cursor-Glow */

.sf-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 270px;
  height: 270px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  filter: blur(48px);
  transform: translate3d(-50%, -50%, 0);
  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--accent-b) 24%, transparent) 0%,
      color-mix(in srgb, var(--accent-a) 13%, transparent) 38%,
      transparent 72%
    );
  mix-blend-mode: screen;
  transition:
    width 280ms var(--sf-ease),
    height 280ms var(--sf-ease),
    opacity 220ms ease,
    background 340ms ease;
  will-change: transform;
}

html[data-mode="dark"] .sf-cursor-glow {
  opacity: .30;
}

html[data-mode="light"] .sf-cursor-glow {
  opacity: .16;
  mix-blend-mode: multiply;
}

.sf-cursor-visible.sf-cursor-glow {
  opacity: .29;
}

.sf-cursor-interactive.sf-cursor-glow {
  width: 350px;
  height: 350px;
  opacity: .35;
}

@media (pointer: coarse), (hover: none), (prefers-reduced-motion: reduce) {
  .sf-cursor-glow {
    display: none !important;
  }
}