/* Cursor Magic Effects — cursor-magic.css */

.cm-cursor-dot,
.cm-cursor-ring,
.cm-trail,
.cm-particle,
.cm-ripple {
  position: fixed;
  pointer-events: none;
  z-index: 2147483647;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, left, top;
  backface-visibility: hidden;
}

/* ── Main Dot ─────────────── */
.cm-cursor-dot {
  transition: width .15s, height .15s, opacity .2s, background .3s;
  box-shadow: 0 0 8px 2px rgba(255,255,255,.25);
}

.cm-cursor-dot.cm-pressed {
  width: calc(var(--cm-size, 14px) * 0.6) !important;
  height: calc(var(--cm-size, 14px) * 0.6) !important;
  filter: brightness(1.4);
}

/* ── Ring ─────────────────── */
.cm-cursor-ring {
  background: transparent;
  transition: width .18s, height .18s, border-color .35s, opacity .2s;
}

.cm-cursor-ring.cm-pressed {
  transform: translate(-50%,-50%) scale(1.35);
  opacity: .6;
}

/* ── Trail ────────────────── */
.cm-trail {
  border-radius: 50%;
  transition: opacity .1s;
}

/* ── Star Shape ───────────── */
.cm-star {
  border-radius: 0 !important;
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}

/* ── Particles ────────────── */
.cm-particle {
  position: fixed;
  pointer-events: none;
  z-index: 2147483646;
  border-radius: 50%;
  will-change: left, top, opacity;
}

/* ── Scroll Ripple ────────── */
.cm-ripple {
  position: fixed;
  pointer-events: none;
  z-index: 2147483645;
  width: 10px;
  height: 10px;
  border: 2px solid;
  border-radius: 50%;
  animation: cm-ripple-anim .7s ease-out forwards;
}

@keyframes cm-ripple-anim {
  0%   { transform: translate(-50%,-50%) scale(1);  opacity: .8; }
  100% { transform: translate(-50%,-50%) scale(6);  opacity: 0;  }
}