/* MAGNETIC BUTTON */

.magnetic {
  --button-x: 0px;
  --button-y: 0px;
  --content-x: 0px;
  --content-y: 0px;

  display: inline-flex;
  position: relative;
  z-index: 4;

  cursor: pointer;

  transform: translate3d(var(--button-x), var(--button-y), 0);

  transition:
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    background 0.25s ease;

  will-change: transform;
}

.magnetic.is-active {
  transition:
    transform 0.12s linear,
    border-color 0.25s ease,
    background 0.25s ease;
}

.magnetic__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;

  transform: translate3d(var(--content-x), var(--content-y), 0);

  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);

  pointer-events: none;

  will-change: transform;
}

.magnetic.is-active .magnetic__content {
  transition: transform 0.12s linear;
}

.magnetic__text,
.magnetic__icon {
  display: inline-flex;
  align-items: center;
}

.magnetic__icon {
  justify-content: center;
}