/* ────────────────────────────────────────
   Aurora Cursor Effect — cursor.css
──────────────────────────────────────── */

/* Hide the default cursor everywhere */
*,
*::before,
*::after {
  cursor: none !important;
}

/* ── Main cursor dot ── */
#cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition:
    width 0.2s ease,
    height 0.2s ease,
    background 0.2s ease,
    opacity 0.2s ease;
  mix-blend-mode: difference;
}

/* ── Outer ring that lags behind ── */
#cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(127, 119, 221, 0.7);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition:
    width 0.25s ease,
    height 0.25s ease,
    border-color 0.3s ease,
    opacity 0.3s ease;
}

/* ── Hover state: expand ring, shrink dot ── */
body.cursor-hover #cursor-dot {
  width: 6px;
  height: 6px;
  background: #7f77dd;
}

body.cursor-hover #cursor-ring {
  width: 52px;
  height: 52px;
  border-color: rgba(127, 119, 221, 0.9);
}

/* ── Click state: burst ── */
body.cursor-click #cursor-dot {
  width: 12px;
  height: 12px;
  background: #5dcaa5;
}

body.cursor-click #cursor-ring {
  width: 60px;
  height: 60px;
  border-color: rgba(93, 202, 165, 0.8);
  opacity: 0.4;
}

/* ── Trail particles ── */
.cursor-trail {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99997;
  transform: translate(-50%, -50%);
  animation: trail-fade 0.6s ease forwards;
}

@keyframes trail-fade {
  0% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
}

/* ── Cursor text label (shown on links/buttons) ── */
#cursor-label {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  font-family: "Syne Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #7f77dd;
  white-space: nowrap;
  opacity: 0;
  transform: translate(14px, -24px);
  transition: opacity 0.2s ease;
}

#cursor-label.visible {
  opacity: 1;
}