/* Magical cursor effect */
.magic-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: radial-gradient(circle, #c9f74f 0%, #9dc7ff 55%, transparent 70%);
  box-shadow:
    0 0 12px rgba(201, 247, 79, 0.9),
    0 0 28px rgba(157, 199, 255, 0.55),
    0 0 48px rgba(184, 165, 255, 0.35);
  pointer-events: none;
  z-index: 99999;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.12s ease;
  will-change: transform;
}

.magic-cursor.is-visible {
  opacity: 1;
}

.magic-cursor.is-hover {
  background: radial-gradient(circle, #fcfaf4 0%, #c9f74f 45%, #9dc7ff 75%, transparent 85%);
  box-shadow:
    0 0 16px rgba(201, 247, 79, 1),
    0 0 36px rgba(157, 199, 255, 0.7),
    0 0 64px rgba(184, 165, 255, 0.45);
}

.magic-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  border: 1px solid rgba(201, 247, 79, 0.55);
  box-shadow: 0 0 18px rgba(201, 247, 79, 0.25);
  pointer-events: none;
  z-index: 99998;
  opacity: 0;
  transition: opacity 0.25s ease, width 0.2s ease, height 0.2s ease, margin 0.2s ease;
  will-change: transform;
}

.magic-cursor-ring.is-visible {
  opacity: 0.85;
}

.magic-cursor-ring.is-hover {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-color: rgba(157, 199, 255, 0.75);
  box-shadow: 0 0 24px rgba(157, 199, 255, 0.35);
}

.magic-spark {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99997;
  opacity: 0;
  will-change: transform, opacity;
}

body.has-magic-cursor,
body.has-magic-cursor * {
  cursor: none !important;
}

@media (hover: none), (pointer: coarse) {
  body.has-magic-cursor,
  body.has-magic-cursor * {
    cursor: auto !important;
  }

  .magic-cursor,
  .magic-cursor-ring,
  .magic-spark {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .magic-cursor,
  .magic-cursor-ring,
  .magic-spark {
    display: none !important;
  }

  body.has-magic-cursor,
  body.has-magic-cursor * {
    cursor: auto !important;
  }
}