/* Word Flip Block — bkbg-wf-* */

.bkbg-wf-app { display: block; }

.bkbg-wf-wrap { display: block; }

.bkbg-wf-heading {
    margin: 0;
    padding: 0;
    font-family: var(--bkwf-hd-ff, inherit);
    font-size: var(--bkwf-hd-fsd, 56px);
    line-height: var(--bkwf-hd-lhd, 1.1);
    letter-spacing: var(--bkwf-hd-lsd, -1px);
    word-spacing: var(--bkwf-hd-wsd, normal);
    font-weight: var(--bkwf-hd-fw, 800);
    font-style: var(--bkwf-hd-fst, normal);
    text-decoration: var(--bkwf-hd-td, none);
    text-transform: var(--bkwf-hd-tt, none);
}
.bkbg-wf-wrap h1.bkbg-wf-heading,
.bkbg-wf-wrap h2.bkbg-wf-heading,
.bkbg-wf-wrap h3.bkbg-wf-heading,
.bkbg-wf-wrap h4.bkbg-wf-heading,
.bkbg-wf-wrap h5.bkbg-wf-heading,
.bkbg-wf-wrap h6.bkbg-wf-heading {
    font-family: var(--bkwf-hd-ff, inherit);
    font-size: var(--bkwf-hd-fsd, 56px);
    line-height: var(--bkwf-hd-lhd, 1.1);
    letter-spacing: var(--bkwf-hd-lsd, -1px);
    word-spacing: var(--bkwf-hd-wsd, normal);
    font-weight: var(--bkwf-hd-fw, 800);
    font-style: var(--bkwf-hd-fst, normal);
    text-decoration: var(--bkwf-hd-td, none);
    text-transform: var(--bkwf-hd-tt, none);
}

/* Flip slot container */
.bkbg-wf-slot {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    position: relative;
    margin-left: 0.25em;
}

.bkbg-wf-inner {
    display: block;
    transition: transform var(--bkbg-wf-speed, 420ms) cubic-bezier(0.23, 1, 0.32, 1),
                opacity var(--bkbg-wf-speed, 420ms) ease;
}

/* ── Roll ── */
.bkbg-wf-roll .bkbg-wf-inner.bkbg-wf-enter   { transform: translateY(100%); }
.bkbg-wf-roll .bkbg-wf-inner.bkbg-wf-active  { transform: translateY(0); }
.bkbg-wf-roll .bkbg-wf-inner.bkbg-wf-exit    { transform: translateY(-100%); }

/* ── Flip 3D ── */
.bkbg-wf-flip3d {
    perspective: 600px;
}
.bkbg-wf-flip3d .bkbg-wf-inner.bkbg-wf-enter  { transform: rotateX(90deg); opacity: 0; }
.bkbg-wf-flip3d .bkbg-wf-inner.bkbg-wf-active { transform: rotateX(0deg);  opacity: 1; }
.bkbg-wf-flip3d .bkbg-wf-inner.bkbg-wf-exit   { transform: rotateX(-90deg); opacity: 0; }

/* ── Fade Up ── */
.bkbg-wf-fadeup .bkbg-wf-inner.bkbg-wf-enter  { transform: translateY(12px); opacity: 0; }
.bkbg-wf-fadeup .bkbg-wf-inner.bkbg-wf-active { transform: translateY(0);    opacity: 1; }
.bkbg-wf-fadeup .bkbg-wf-inner.bkbg-wf-exit   { transform: translateY(-12px); opacity: 0; }

/* ── Zoom ── */
.bkbg-wf-zoom .bkbg-wf-inner.bkbg-wf-enter  { transform: scale(0.5); opacity: 0; }
.bkbg-wf-zoom .bkbg-wf-inner.bkbg-wf-active { transform: scale(1);   opacity: 1; }
.bkbg-wf-zoom .bkbg-wf-inner.bkbg-wf-exit   { transform: scale(1.3); opacity: 0; }

/* Wavy underline */
.bkbg-wf-slot.bkbg-wf-underline-wavy .bkbg-wf-inner {
    text-decoration: underline wavy;
    text-underline-offset: 4px;
}

/* Highlight style */
.bkbg-wf-slot.bkbg-wf-underline-highlight .bkbg-wf-inner::after {
    content: '';
    position: absolute;
    bottom: 0.05em;
    left: 0;
    right: 0;
    height: 0.35em;
    background: var(--bkbg-wf-underline, #7c3aed);
    opacity: 0.25;
    z-index: -1;
}

/* === Responsive Typography === */
@media (max-width: 1024px) {
    .bkbg-wf-wrap .bkbg-wf-heading {
        font-size: var(--bkwf-hd-fst1, var(--bkwf-hd-fsd, 56px));
        line-height: var(--bkwf-hd-lht, var(--bkwf-hd-lhd, 1.1));
        letter-spacing: var(--bkwf-hd-lst, var(--bkwf-hd-lsd, -1px));
        word-spacing: var(--bkwf-hd-wst, var(--bkwf-hd-wsd, normal));
    }
}
@media (max-width: 767px) {
    .bkbg-wf-wrap .bkbg-wf-heading {
        font-size: var(--bkwf-hd-fsm, var(--bkwf-hd-fst1, var(--bkwf-hd-fsd, 56px)));
        line-height: var(--bkwf-hd-lhm, var(--bkwf-hd-lht, var(--bkwf-hd-lhd, 1.1)));
        letter-spacing: var(--bkwf-hd-lsm, var(--bkwf-hd-lst, var(--bkwf-hd-lsd, -1px)));
        word-spacing: var(--bkwf-hd-wsm, var(--bkwf-hd-wst, var(--bkwf-hd-wsd, normal)));
    }
}