:root {
  --trail-core: #9dd2ff;
  --trail-bright: #c8e8ff;
  --trail-glow: rgba(61, 143, 212, 0.55);
  --trail-glow-mid: rgba(61, 143, 212, 0.32);
  --trail-glow-soft: rgba(157, 210, 255, 0.28);
}

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

.cursor-trail__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--trail-size, 5px);
  height: var(--trail-size, 5px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--trail-bright) 0%, var(--trail-core) 72%);
  box-shadow:
    0 0 6px var(--trail-glow),
    0 0 14px var(--trail-glow-mid),
    0 0 24px var(--trail-glow-soft);
  will-change: transform, opacity;
}

.cursor-trail__dot:first-child {
  --trail-size: var(--trail-head-size, 6px);
  background: radial-gradient(circle at 35% 35%, #e8f4ff 0%, var(--trail-core) 70%);
  box-shadow:
    0 0 8px rgba(61, 143, 212, 0.45),
    0 0 18px rgba(61, 143, 212, 0.28),
    0 0 32px rgba(157, 210, 255, 0.35);
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-trail {
    display: none;
  }
}