/* Fixed, non-interactive visual layer. The operating-system cursor remains visible. */
.sl-cursor-ring,
.sl-cursor-star,
.sl-cursor-ripple {
  position: fixed;
  z-index: 2147483000;
  pointer-events: none !important;
  user-select: none;
}

.sl-cursor-ring {
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity 210ms ease;
  will-change: transform;
}

.sl-cursor-ring.is-visible { opacity: .72; }
.sl-cursor-ring.is-visible.is-interactive { opacity: .82; }
.sl-cursor-ring.is-visible.is-emphasis { opacity: .88; }

.sl-cursor-ring::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 28px; /* default halo diameter */
  height: 28px;
  box-sizing: border-box;
  border: 1.25px solid #65adfb;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 10px rgba(56, 189, 248, .19), 0 0 17px rgba(139, 92, 246, .12), inset 0 0 5px rgba(79, 140, 255, .08);
  transform: translate(-50%, -50%) scale(1);
  transition: width 210ms ease, height 210ms ease, border-color 210ms ease, box-shadow 210ms ease, transform 130ms ease;
}

.sl-cursor-ring.is-interactive::before {
  width: 44px; /* hover halo diameter */
  height: 44px;
  border-color: #aa86f9;
  box-shadow: 0 0 13px rgba(139, 92, 246, .27), 0 0 23px rgba(79, 140, 255, .13);
}

.sl-cursor-ring.is-emphasis::before {
  box-shadow: 0 0 15px rgba(139, 92, 246, .35), 0 0 27px rgba(79, 140, 255, .17);
}

.sl-cursor-ring.is-pressed::before { transform: translate(-50%, -50%) scale(.85); }

.sl-cursor-star {
  border-radius: 50%;
  opacity: .7;
  animation: sl-star-fade 650ms ease-out forwards;
  will-change: transform, opacity;
}

@keyframes sl-star-fade {
  from { opacity: .7; transform: translate3d(-50%, -50%, 0) scale(1); }
  to { opacity: 0; transform: translate3d(calc(-50% + var(--sl-drift-x)), calc(-50% + var(--sl-drift-y)), 0) scale(0); }
}

.sl-cursor-ripple {
  width: 68px; /* final ripple diameter */
  height: 68px;
  box-sizing: border-box;
  border: 1.5px solid #67c6fb;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 12px rgba(56, 189, 248, .2), inset 0 0 7px rgba(79, 140, 255, .08);
  animation: sl-ripple-expand 560ms ease-out forwards;
  will-change: transform, opacity;
}

.sl-cursor-ripple.is-interactive {
  border-color: #a78bfa;
  box-shadow: 0 0 13px rgba(139, 92, 246, .29), inset 0 0 7px rgba(139, 92, 246, .08);
}

.sl-cursor-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #d7f6ff;
  box-shadow: 0 0 7px #a9dafe;
  transform: translate(-50%, -50%);
  animation: sl-ripple-flash 300ms ease-out forwards;
}

@keyframes sl-ripple-expand {
  from { opacity: .78; transform: translate3d(-50%, -50%, 0) scale(.15); }
  to { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1); }
}

@keyframes sl-ripple-flash {
  from { opacity: .9; }
  to { opacity: 0; }
}

@media (hover: none), (pointer: coarse) {
  .sl-cursor-ring, .sl-cursor-star, .sl-cursor-ripple { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-cursor-ring, .sl-cursor-ring::before { transition: none !important; }
  .sl-cursor-star, .sl-cursor-ripple { display: none !important; }
}