/* ==========================================================================
   EQUA — CUSTOM MAGNETIC CURSOR STYLING (GPU ACCELERATED & TOGGLEABLE)
   ========================================================================== */

/* Hide native cursor on desktop with precise pointing devices (unless disabled via ?cursor=false) */
@media (hover: hover) and (pointer: fine) {
  body:not(.native-cursor) {
    cursor: none;
  }
  body:not(.native-cursor) a, 
  body:not(.native-cursor) button, 
  body:not(.native-cursor) input, 
  body:not(.native-cursor) select, 
  body:not(.native-cursor) textarea, 
  body:not(.native-cursor) [role="button"], 
  body:not(.native-cursor) .magnetic-target {
    cursor: none !important;
  }
}

/* Native Cursor Override Mode */
body.native-cursor,
body.native-cursor * {
  cursor: auto !important;
}

body.native-cursor a,
body.native-cursor button,
body.native-cursor .btn,
body.native-cursor .food-pill-btn,
body.native-cursor .color-btn,
body.native-cursor .band-btn {
  cursor: pointer !important;
}

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: -3px;
  background-color: var(--accent-green);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  will-change: transform;
  box-shadow: 0 0 10px var(--accent-green-glow);
}

.cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  margin-top: -18px;
  border: 1.5px solid rgba(0, 245, 160, 0.45);
  background: rgba(0, 245, 160, 0.03);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out), border-color 0.25s ease, background-color 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cursor-text {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: #000;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.2s ease;
  pointer-events: none;
  white-space: nowrap;
}

/* Hover States */
.cursor-follower.hovering {
  width: 54px;
  height: 54px;
  margin-left: -27px;
  margin-top: -27px;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.cursor-follower.hovering-btn {
  width: 64px;
  height: 64px;
  margin-left: -32px;
  margin-top: -32px;
  border-color: var(--accent-green);
  background: var(--accent-green);
  box-shadow: 0 0 30px var(--accent-green-glow);
}

.cursor-follower.hovering-btn .cursor-text {
  opacity: 1;
  transform: scale(1);
}

.cursor-follower.dragging-3d {
  width: 72px;
  height: 72px;
  margin-left: -36px;
  margin-top: -36px;
  border-color: var(--accent-cyan);
  background: rgba(0, 240, 255, 0.1);
  box-shadow: 0 0 25px var(--accent-cyan-glow);
}

.cursor-follower.has-text .cursor-text {
  opacity: 1;
  color: var(--accent-cyan);
  transform: scale(1);
}

/* Hide custom cursor on touch screens */
@media (hover: none) and (pointer: coarse) {
  .cursor-dot, .cursor-follower {
    display: none !important;
  }
}