.magnetic-btn{--mb-accent:var(--second-color);--mb-fill:#1653e1;--mb-ease:cubic-bezier(.22, 1, .36, 1);--mb-icon-rotate:45deg;isolation:isolate;color:#fff;font-size:var(--normal-font-size);letter-spacing:.04em;background:var(--mb-accent);box-shadow:0 14px 40px -12px color-mix(in srgb, var(--mb-accent) 70%, transparent);transition:box-shadow .6s var(--mb-ease);border-radius:999px;align-items:center;gap:14px;padding:10px 10px 10px 30px;font-weight:600;display:inline-flex;position:relative;overflow:hidden}.dark-theme .magnetic-btn{--mb-fill:orange}.magnetic-btn:hover{box-shadow:0 14px 40px -12px color-mix(in srgb, var(--mb-fill) 70%, transparent)}.magnetic-btn__fill{z-index:-1;border-radius:inherit;background:var(--mb-fill);transition:transform .6s var(--mb-ease);position:absolute;inset:0;transform:translateY(101%)}.magnetic-btn:hover .magnetic-btn__fill{transform:translateY(0)}.magnetic-btn__label{line-height:1.4;display:block;position:relative;overflow:hidden}.magnetic-btn__label span,.magnetic-btn__label:after{transition:transform .6s var(--mb-ease);display:block}.magnetic-btn__label:after{content:attr(data-text);position:absolute;inset:0;transform:translateY(100%)}.magnetic-btn:hover .magnetic-btn__label span{transform:translateY(-100%)}.magnetic-btn:hover .magnetic-btn__label:after{transform:translateY(0)}.magnetic-btn__icon{width:44px;height:44px;color:var(--mb-accent);transition:transform .6s var(--mb-ease), color .6s var(--mb-ease);background:#fff;border-radius:50%;place-items:center;font-size:16px;display:grid}.magnetic-btn:hover .magnetic-btn__icon{color:var(--mb-fill);transform:rotate(var(--mb-icon-rotate)) scale(1.05)}@media (max-width:480px){.magnetic-btn{padding:8px 8px 8px 22px;font-size:14px}.magnetic-btn__icon{width:38px;height:38px}}