/* ============================================================
   Cursor Trail — small colourful dots that follow the mouse
   Drop this file in and link it, or paste into your global CSS.
   ============================================================ */

/* Hide default cursor only if you want the dots to BE the cursor.
   Leave this commented out if you just want the trail as a decorative
   extra alongside the normal arrow cursor. */
/* body { cursor: none; } */

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--dot-size, 10px);
  height: var(--dot-size, 10px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  will-change: transform, opacity;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.9;
  animation: cursor-dot-fade 350ms ease-in forwards;
}

@keyframes cursor-dot-fade {
  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
}

/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cursor-dot { display: none; }
}