/* ==========================================================================
   MAGNETIC CURSOR — Premium Desktop Interaction
   ========================================================================== */

.magnetic-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 2px solid var(--brand-400);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform-origin: center center;
  transition: width 0.3s var(--ease-out),
              height 0.3s var(--ease-out),
              border-color 0.3s var(--ease-out),
              opacity 0.3s var(--ease-out);
  opacity: 0.6;
  mix-blend-mode: difference;
  margin: -20px 0 0 -20px;
}

.magnetic-cursor__dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--brand-500);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition: width 0.2s var(--ease-out),
              height 0.2s var(--ease-out),
              background-color 0.2s var(--ease-out);
  margin: -3px 0 0 -3px;
}

.magnetic-cursor.is-hovering {
  width: 60px;
  height: 60px;
  border-color: var(--accent-cyan-500);
  opacity: 0.8;
  margin: -30px 0 0 -30px;
}

.magnetic-cursor.is-link {
  width: 50px;
  height: 50px;
  opacity: 1;
  margin: -25px 0 0 -25px;
}

.magnetic-cursor__dot.is-link {
  width: 10px;
  height: 10px;
  background: var(--accent-cyan-500);
  margin: -5px 0 0 -5px;
}

/* Hide on mobile/touch devices */
@media (max-width: 1024px), (hover: none) {
  .magnetic-cursor,
  .magnetic-cursor__dot {
    display: none;
  }
}

/* Hide default cursor on interactive elements */
@media (min-width: 1025px) and (hover: hover) {
  a, button, .btn, .card {
    cursor: none;
  }
}