.cursor-comet {
  position: fixed;
  z-index: 20;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.cursor-comet__segment {
  position: absolute;
  left: var(--comet-x);
  top: var(--comet-y);
  width: var(--comet-length);
  height: var(--comet-width);
  transform: rotate(var(--comet-angle));
  transform-origin: 0 50%;
  pointer-events: none;
}

.cursor-comet__ink {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(149, 104, 255, 0), rgba(103, 234, 255, 0.58) 70%, #eafbff);
  box-shadow: 0 0 0.65rem rgba(103, 234, 255, 0.45);
  pointer-events: none;
}

.cursor-comet__segment[data-active="false"] {
  display: none;
}

.cursor-comet__segment[data-active="true"][data-phase="0"] .cursor-comet__ink {
  animation: comet-fade-a 520ms ease-out both;
}

.cursor-comet__segment[data-active="true"][data-phase="1"] .cursor-comet__ink {
  animation: comet-fade-b 520ms ease-out both;
}

@keyframes comet-fade-a {
  to { opacity: 0; transform: scaleX(0.35); }
}

@keyframes comet-fade-b {
  to { opacity: 0; transform: scaleX(0.35); }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-comet {
    display: none;
  }
}