/* =====================================================================
 * BlogString Pro — Interactive Button
 * Effect behavior is keyed by the bs-ib--{effect} modifier class; per-
 * instance colors/sizes come from Elementor controls scoped to the
 * widget's unique ID ({{WRAPPER}}). No global element selectors.
 * ================================================================== */

.blogstring-interactive-button { text-align: center; }

.blogstring-interactive-button .bs-ib {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 14px 32px;
    border: 0 solid transparent;
    border-radius: 8px;
    background: #2a02cc;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    --bs-ib-transition: 300ms;
    transition: color var(--bs-ib-transition) ease, background-color var(--bs-ib-transition) ease, border-color var(--bs-ib-transition) ease, box-shadow var(--bs-ib-transition) ease, transform var(--bs-ib-transition) ease;
}

.blogstring-interactive-button .bs-ib__content,
.blogstring-interactive-button .bs-ib__text,
.blogstring-interactive-button .bs-ib__icon,
.blogstring-interactive-button .bs-ib__split {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
}

.blogstring-interactive-button .bs-ib__icon { line-height: 1; }
.blogstring-interactive-button .bs-ib__icon svg { width: 1em; height: 1em; fill: currentColor; }
.blogstring-interactive-button .bs-ib__icon i { font-size: inherit; }

.blogstring-interactive-button .bs-ib:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Effects that need to render outside the box */
.blogstring-interactive-button .bs-ib--flip,
.blogstring-interactive-button .bs-ib--elastic,
.blogstring-interactive-button .bs-ib--magnetic,
.blogstring-interactive-button .bs-ib--push_3d,
.blogstring-interactive-button .bs-ib--glitch {
    overflow: visible;
}

/* ---- 1. Ripple (JS injects .bs-ib__ripple) ------------------------ */
.blogstring-interactive-button .bs-ib__ripple {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    transform: scale(0);
    background: var(--bs-ib-ripple, rgba(255, 255, 255, .5));
    pointer-events: none;
    animation: bs-ib-ripple .6s ease-out;
}
@keyframes bs-ib-ripple { to { transform: scale(4); opacity: 0; } }

/* ---- 2. Magnetic (JS sets transform) ------------------------------ */
.blogstring-interactive-button .bs-ib--magnetic {
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), color var(--bs-ib-transition) ease, background-color var(--bs-ib-transition) ease, box-shadow var(--bs-ib-transition) ease;
    will-change: transform;
}

/* ---- 3. Neon Glow ------------------------------------------------- */
.blogstring-interactive-button .bs-ib--neon:hover {
    animation: bs-ib-neon var(--bs-ib-glow-speed, 1500ms) ease-in-out infinite;
}
@keyframes bs-ib-neon {
    0%, 100% { box-shadow: 0 0 4px var(--bs-ib-glow, #2a02cc), 0 0 12px var(--bs-ib-glow, #2a02cc); }
    50% { box-shadow: 0 0 10px var(--bs-ib-glow, #2a02cc), 0 0 28px var(--bs-ib-glow, #2a02cc), 0 0 44px var(--bs-ib-glow, #2a02cc); }
}

/* ---- 4. Sheen / Shimmer ------------------------------------------- */
.blogstring-interactive-button .bs-ib--sheen::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 1;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, var(--bs-ib-sheen, rgba(255, 255, 255, .5)), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}
.blogstring-interactive-button .bs-ib--sheen:hover::after {
    animation: bs-ib-sheen var(--bs-ib-sheen-dur, 600ms) ease;
}
@keyframes bs-ib-sheen { to { left: 125%; } }

/* ---- 5/6/7. Fill effects ------------------------------------------ */
.blogstring-interactive-button .bs-ib--fill_left::before,
.blogstring-interactive-button .bs-ib--fill_center::before,
.blogstring-interactive-button .bs-ib--fill_bottom::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--bs-ib-fill, #1a0199);
    transition: transform .35s ease;
    pointer-events: none;
}
.blogstring-interactive-button .bs-ib--fill_left::before { transform: scaleX(0); transform-origin: left center; }
.blogstring-interactive-button .bs-ib--fill_left:hover::before { transform: scaleX(1); }
.blogstring-interactive-button .bs-ib--fill_center::before { transform: scaleX(0); transform-origin: center; }
.blogstring-interactive-button .bs-ib--fill_center:hover::before { transform: scaleX(1); }
.blogstring-interactive-button .bs-ib--fill_bottom::before { transform: scaleY(0); transform-origin: bottom center; }
.blogstring-interactive-button .bs-ib--fill_bottom:hover::before { transform: scaleY(1); }

/* ---- 8. Border Draw ----------------------------------------------- */
.blogstring-interactive-button .bs-ib--border_draw { border: none; }
.blogstring-interactive-button .bs-ib--border_draw::before,
.blogstring-interactive-button .bs-ib--border_draw::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: 0;
    height: 0;
    box-sizing: border-box;
    pointer-events: none;
}
.blogstring-interactive-button .bs-ib--border_draw::before {
    top: 0; left: 0;
    border-top: var(--bs-ib-border-draw-w, 2px) solid var(--bs-ib-border-draw, #fff);
    border-right: var(--bs-ib-border-draw-w, 2px) solid var(--bs-ib-border-draw, #fff);
    transition: width .12s linear, height .12s linear .12s;
}
.blogstring-interactive-button .bs-ib--border_draw::after {
    right: 0; bottom: 0;
    border-bottom: var(--bs-ib-border-draw-w, 2px) solid var(--bs-ib-border-draw, #fff);
    border-left: var(--bs-ib-border-draw-w, 2px) solid var(--bs-ib-border-draw, #fff);
    transition: width .12s linear .24s, height .12s linear .36s;
}
.blogstring-interactive-button .bs-ib--border_draw:hover::before,
.blogstring-interactive-button .bs-ib--border_draw:hover::after { width: 100%; height: 100%; }

/* ---- 9. 3D Push --------------------------------------------------- */
.blogstring-interactive-button .bs-ib--push_3d {
    box-shadow: 0 var(--bs-ib-push, 4px) 0 rgba(0, 0, 0, .35);
    transition: transform .12s ease, box-shadow .12s ease;
}
.blogstring-interactive-button .bs-ib--push_3d:hover,
.blogstring-interactive-button .bs-ib--push_3d:active {
    transform: translateY(var(--bs-ib-push, 4px));
    box-shadow: 0 0 0 rgba(0, 0, 0, .35);
}

/* ---- 10. Elastic Scale -------------------------------------------- */
.blogstring-interactive-button .bs-ib--elastic { transition: transform .4s cubic-bezier(.68, -0.55, .27, 1.55); }
.blogstring-interactive-button .bs-ib--elastic:hover { transform: scale(var(--bs-ib-scale, 1.08)); }

/* ---- 11. Split Text ----------------------------------------------- */
.blogstring-interactive-button .bs-ib--split { overflow: hidden; }
.blogstring-interactive-button .bs-ib__split { position: relative; overflow: hidden; }
.blogstring-interactive-button .bs-ib__split-a,
.blogstring-interactive-button .bs-ib__split-b {
    display: block;
    transition: transform .3s ease;
}
.blogstring-interactive-button .bs-ib__split-a { clip-path: inset(0 0 50% 0); }
.blogstring-interactive-button .bs-ib__split-b {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    clip-path: inset(50% 0 0 0);
}
.blogstring-interactive-button .bs-ib__split-2 {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s ease;
}
.blogstring-interactive-button .bs-ib--split:hover .bs-ib__split-a { transform: translateY(-110%); }
.blogstring-interactive-button .bs-ib--split:hover .bs-ib__split-b { transform: translateY(110%); }
.blogstring-interactive-button .bs-ib--split:hover .bs-ib__split-2 { opacity: 1; }

/* ---- 12. Icon Slide ----------------------------------------------- */
.blogstring-interactive-button .bs-ib--icon_slide .bs-ib__text { transition: transform .3s ease; }
.blogstring-interactive-button .bs-ib__icon-slide-icon {
    display: inline-flex;
    max-width: 0;
    margin-left: 0;
    opacity: 0;
    transform: translateX(10px);
    transition: max-width .3s ease, opacity .3s ease, transform .3s ease, margin-left .3s ease;
}
.blogstring-interactive-button .bs-ib__icon-slide-icon svg { width: 1em; height: 1em; fill: currentColor; }
.blogstring-interactive-button .bs-ib--icon_slide:hover .bs-ib__text { transform: translateX(-4px); }
.blogstring-interactive-button .bs-ib--icon_slide:hover .bs-ib__icon-slide-icon {
    max-width: 2em;
    margin-left: 8px;
    opacity: 1;
    transform: translateX(0);
}

/* ---- 13. Particle Burst (JS injects .bs-ib__particle) ------------- */
.blogstring-interactive-button .bs-ib__particle {
    position: absolute;
    z-index: 5;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bs-ib-particle, #fff);
    pointer-events: none;
}

/* ---- 14. Glitch --------------------------------------------------- */
.blogstring-interactive-button .bs-ib--glitch { --bs-ib-g: 2px; }
.blogstring-interactive-button .bs-ib--glitch-low { --bs-ib-g: 1px; }
.blogstring-interactive-button .bs-ib--glitch-med { --bs-ib-g: 2px; }
.blogstring-interactive-button .bs-ib--glitch-high { --bs-ib-g: 4px; }
.blogstring-interactive-button .bs-ib__glitch { position: relative; }
.blogstring-interactive-button .bs-ib__glitch::before,
.blogstring-interactive-button .bs-ib__glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}
.blogstring-interactive-button .bs-ib--glitch:hover .bs-ib__glitch::before {
    opacity: .9;
    color: #ff005a;
    animation: bs-ib-glitch-a .4s steps(2, jump-none) infinite;
}
.blogstring-interactive-button .bs-ib--glitch:hover .bs-ib__glitch::after {
    opacity: .9;
    color: #00e5ff;
    animation: bs-ib-glitch-b .4s steps(2, jump-none) infinite;
}
@keyframes bs-ib-glitch-a {
    0% { transform: translate(0, 0); }
    50% { transform: translate(calc(var(--bs-ib-g) * -1), var(--bs-ib-g)); }
    100% { transform: translate(var(--bs-ib-g), 0); }
}
@keyframes bs-ib-glitch-b {
    0% { transform: translate(0, 0); }
    50% { transform: translate(var(--bs-ib-g), calc(var(--bs-ib-g) * -1)); }
    100% { transform: translate(calc(var(--bs-ib-g) * -1), 0); }
}

/* ---- 15. Typewriter (JS) — caret ---------------------------------- */
.blogstring-interactive-button .bs-ib--typewriter .bs-ib__text.is-typing::after {
    content: "|";
    margin-left: 1px;
    animation: bs-ib-caret .6s steps(1) infinite;
}
@keyframes bs-ib-caret { 50% { opacity: 0; } }

/* ---- 16. Gradient Shift ------------------------------------------- */
.blogstring-interactive-button .bs-ib--gradient {
    background-image: linear-gradient(120deg, var(--bs-ib-grad-start, #2a02cc), var(--bs-ib-grad-end, #7c5cfc), var(--bs-ib-grad-hstart, #e60023), var(--bs-ib-grad-hend, #ff8a00));
    background-size: 300% 300%;
    background-position: 0% 50%;
    transition: background-position .6s ease;
}
.blogstring-interactive-button .bs-ib--gradient:hover { background-position: 100% 50%; }

/* ---- 17. Flip ----------------------------------------------------- */
.blogstring-interactive-button .bs-ib--flip {
    transform-style: preserve-3d;
    perspective: 800px;
    transition: transform .5s ease;
}
.blogstring-interactive-button .bs-ib--flip:hover { transform: rotateY(180deg); }
.blogstring-interactive-button .bs-ib__flip-front { backface-visibility: hidden; }
.blogstring-interactive-button .bs-ib__flip-back {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    border-radius: inherit;
    background: var(--bs-ib-back-bg, #1a0199);
    color: #fff;
}