/* ── SMTH Staggered Button v1.0.0 ── */

.smth-sb-wrap {
    display: flex;
    margin: 0;
    padding: 0;
}
.smth-sb-wrap.smth-sb-align-left   { justify-content: flex-start; }
.smth-sb-wrap.smth-sb-align-center { justify-content: center; }
.smth-sb-wrap.smth-sb-align-right  { justify-content: flex-end; }

.smth-staggered-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--smth-sb-padding-v, 16px) var(--smth-sb-padding-h, 36px);
    background: var(--smth-sb-bg, #e8e6e1);
    color: var(--smth-sb-color, #111);
    font-size: var(--smth-sb-font-size, 16px);
    font-weight: var(--smth-sb-font-weight, 500);
    letter-spacing: var(--smth-sb-letter-spacing, 0em);
    border-radius: var(--smth-sb-radius, 12px);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    border: none;
    -webkit-font-smoothing: antialiased;
}

.smth-staggered-btn:hover,
.smth-staggered-btn:focus {
    color: var(--smth-sb-color, #111);
    text-decoration: none;
    outline: none;
}

/* Inner flex row — overflow:clip is the clipping mechanism */
.smth-sb-inner {
    display: flex;
    overflow: clip;
}

/* Each character span */
.smth-sb-inner > span {
    display: inline-block;
    /* transition and text-shadow set by JS */
}

/* Editor preview — show plain text, hide animated span */
.smth-staggered-btn.is-editor-preview .smth-sb-label {
    display: block;
}
.smth-staggered-btn.is-editor-preview .smth-sb-inner {
    display: none;
}
.smth-sb-label {
    display: none; /* hidden on front-end after JS builds the inner span */
}