/**
 * ==================================================================================
 * Final, Optimized Cursor Trail CSS (trail.css)
 * ==================================================================================
 * Fixes:
 *   - Hides the default system cursor when the trail is active.
 *   - Re-enables the pointer cursor for interactive elements like links and buttons.
 *   - Removes the `box-shadow` to eliminate the glow.
 *   - Uses `position: fixed` and `inset: 0` to create a stable layer for the trail.
 *   - Optimizes performance with `will-change` and `pointer-events: none`.
 */

/* 
  This rule hides the default mouse arrow on the whole page,
  but ONLY when the cursor trail script has successfully loaded and run.
*/
.cursor-trail-active {
  cursor: none;
}

/* 
  This is important! We bring back the "hand" pointer for anything
  that's clickable, so users still know what they can interact with.
*/
.cursor-trail-active a,
.cursor-trail-active button,
.cursor-trail-active [role="button"],
.cursor-trail-active input[type="submit"],
.cursor-trail-active input[type="button"] {
  cursor: pointer;
}

/* 
  The main container for all the dots. It's a fixed layer that covers the
  entire screen but doesn't interfere with clicks (`pointer-events: none`).
*/
.cursor-trail {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999; /* High z-index to stay on top of other content */
}

/* 
  The style for each individual dot in the trail.
*/
.cursor-trail__dot {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%; /* This makes the square a perfect circle */
  
  /* This tells the browser to get ready to animate the dot's position, which makes it smoother. */
  will-change: transform;
}