body {
  cursor: none; /* Hides the default cursor to let the custom one shine */
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: #1a1b4b; /* Matches the dark background in your image */
}

/* Base styles for all cursor components */
.cursor-main,
.cursor-trail,
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  border-radius: 50%;
  z-index: 9999;
  /* Centering logic: ensures the middle of the circle is on the mouse tip */
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease-out, opacity 0.3s ease, border 0.2s ease;
}

/* The small, sharp center point */
.cursor-main {
  width: 12px;
  height: 12px;
  background-color: rgb(64, 224, 208); /* Bright Cyan from your image text */
  box-shadow: 0 0 10px rgba(64, 224, 208, 0.6);
}

/* The thin outer ring that follows the cursor */
.cursor-trail {
  width: 40px;
  height: 40px;
  border: 2px solid rgb(47, 54, 134); /* The deeper blue/indigo from the image */
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* The soft atmospheric glow */
.cursor-glow {
  width: 100px;
  height: 100px;
  /* Gradient using the cyan color but fading to transparent */
  background: radial-gradient(
    circle, 
    rgba(64, 224, 208, 0.25) 0%, 
    rgba(64, 224, 208, 0.1) 40%, 
    transparent 70%
  );
  opacity: 0.5;
  transition: transform 0.3s ease-out, opacity 0.3s ease;
}