.magnetic-button-wrapper{display:inline-block}.magnetic-button{letter-spacing:.05em;text-transform:uppercase;cursor:pointer;border-radius:50px;justify-content:center;align-items:center;padding:1.25rem 2.5rem;font-size:.9rem;font-weight:500;text-decoration:none;transition:color .4s;display:inline-flex;position:relative;overflow:hidden}.magnetic-button-inner{z-index:2;align-items:center;gap:.75rem;display:flex;position:relative}.magnetic-button-bg{z-index:1;border-radius:50px;position:absolute;inset:0}.magnetic-button.primary{background:var(--color-soft-black);color:var(--color-white);border:none}.magnetic-button.primary .magnetic-button-bg{background:var(--color-mauve)}.magnetic-button.secondary{color:var(--color-soft-black);border:1.5px solid var(--color-soft-black);background:0 0}.magnetic-button.secondary:hover{color:var(--color-white)}.magnetic-button.secondary .magnetic-button-bg{background:var(--color-soft-black)}.magnetic-button.outline{color:var(--color-white);border:1.5px solid var(--color-white);background:0 0}.magnetic-button.outline:hover{color:var(--color-soft-black)}.magnetic-button.outline .magnetic-button-bg{background:var(--color-white)}.magnetic-button.small{padding:.875rem 1.75rem;font-size:.8rem}.magnetic-button.large{padding:1.5rem 3rem;font-size:1rem}.magnetic-button svg{width:18px;height:18px;transition:transform .3s}.magnetic-button:hover svg{transform:translate(4px)}