/* --- MAGNETIC BUTTON BASE --- */
.starter-magnetic-wrap {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* The trigger area padding */
    padding: var(--trigger-padding, 40px); 
    margin: calc(var(--trigger-padding, 40px) * -1); /* Negative margin to offset padding layout impact */
    cursor: pointer;
    touch-action: none;
}

.starter-magnetic-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    border-radius: 99px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.1s linear, background-color 0.3s, color 0.3s, border-color 0.3s;
    will-change: transform;
    white-space: nowrap;
    z-index: 10;
}

/* Snap back animation when not hovering */
.starter-magnetic-wrap:not(:hover) .starter-magnetic-btn {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Elastic bounce */
}

.starter-magnetic-text {
    position: relative;
    display: inline-block;
    pointer-events: none;
    transition: transform 0.1s linear;
    will-change: transform;
    z-index: 2;
}

.starter-magnetic-wrap:not(:hover) .starter-magnetic-text {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.starter-magnetic-icon {
    display: inline-flex;
    margin-left: 8px;
    transition: transform 0.1s linear;
}
.starter-magnetic-wrap:not(:hover) .starter-magnetic-icon {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- STYLES --- */

/* Style: Solid */
.starter-magnetic--solid .starter-magnetic-btn {
    background-color: #111827;
    color: #ffffff;
    border: 2px solid transparent;
}
.starter-magnetic--solid:hover .starter-magnetic-btn {
    background-color: #000000;
}

/* Style: Outline */
.starter-magnetic--outline .starter-magnetic-btn {
    background-color: transparent;
    color: #111827;
    border: 2px solid #e5e7eb;
}
.starter-magnetic--outline:hover .starter-magnetic-btn {
    border-color: #111827;
    background-color: #111827;
    color: #ffffff;
}

/* Style: Soft */
.starter-magnetic--soft .starter-magnetic-btn {
    background-color: #f3f4f6;
    color: #4f46e5;
    border: 2px solid #f3f4f6;
}
.starter-magnetic--soft:hover .starter-magnetic-btn {
    background-color: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}