/* Magnetic Buttons - by Rehmat (Animated Creativity) - MIT License
   Change the look with these variables on .mbtn or on :root            */
.mbtn {
  --mbtn-a: #7c5cff;      /* gradient start */
  --mbtn-b: #22d3ee;      /* gradient end   */
  --mbtn-text: #ffffff;
  --mbtn-radius: 999px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .95em 1.7em; border: 0; border-radius: var(--mbtn-radius);
  font: inherit; font-weight: 600; line-height: 1; color: var(--mbtn-text); text-decoration: none; cursor: pointer;
  background: linear-gradient(120deg, var(--mbtn-a), var(--mbtn-b)); background-size: 180% 180%; background-position: 0% 50%;
  box-shadow: 0 10px 30px -10px var(--mbtn-a);
  overflow: hidden; isolation: isolate; will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.mbtn:hover { background-position: 100% 50%; transition: background-position .6s ease; }
.mbtn:focus-visible { outline: 2px solid var(--mbtn-b); outline-offset: 3px; }
.mbtn-label { white-space: nowrap; position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .6em; transition: transform .3s ease-out; }

/* a strip of light that sweeps across on hover */
.mbtn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
}
.mbtn:hover::after { left: 130%; transition: left .7s ease; }

/* outline version */
.mbtn--ghost { background: transparent; color: var(--mbtn-text); box-shadow: none; }
.mbtn--ghost::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: 0;
  background: linear-gradient(120deg, var(--mbtn-a), var(--mbtn-b));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.mbtn--ghost:hover { background: linear-gradient(120deg, color-mix(in srgb, var(--mbtn-a) 22%, transparent), color-mix(in srgb, var(--mbtn-b) 22%, transparent)); }

/* glowing version */
.mbtn--glow { box-shadow: 0 0 0 0 var(--mbtn-a); animation: mbtn-pulse 2.4s infinite; }
@keyframes mbtn-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mbtn-a) 70%, transparent); } 70% { box-shadow: 0 0 0 18px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.mbtn-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.35); transform: scale(0); animation: mbtn-ripple .7s ease-out forwards; pointer-events: none; z-index: 1; }
@keyframes mbtn-ripple { to { transform: scale(1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .mbtn--glow { animation: none; } .mbtn::after { display: none; } }