/* ========================================
   BOTÕES COM EFEITO MAGNET
   ======================================== */

/* Classe para botões com efeito magnet */
.magnet-btn {
  position: relative;
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}

/* Área de detecção maior (invisível) */
.magnet-btn::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  pointer-events: none;
}

/* Efeito de atração aplicado via JS */
.magnet-btn.magneting {
  transform: translate(var(--magnet-x, 0), var(--magnet-y, 0));
}

/* Intensificar o efeito em botões primários */
.btn-primary.magnet-btn:hover {
  box-shadow:
    0 12px 40px rgba(255, 50, 50, 0.7),
    0 0 60px rgba(255, 50, 50, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Efeito de "pull" visual */
.magnet-btn:hover {
  z-index: 10;
}

/* Animação quando o cursor se aproxima */
@keyframes magnet-attract {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

.magnet-btn.near {
  animation: magnet-attract 0.6s ease-in-out;
}

/* Desabilitar em mobile */
@media (max-width: 768px) {
  .magnet-btn {
    transform: none !important;
  }
}