/* SEMFLOW Scrolling Image — drop-in replacement for Bricksable's ba-scrolling-image.
   Same selectors so existing Bricks-generated per-element CSS still applies. */

.ba-image-scroller-wrapper {
    display: inline-block;
}

.ba-image-scroller-wrapper .ba-image-scroller-container {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: pointer;
    margin: 0;
    padding: 0;
    transition: transform 300ms cubic-bezier(.4, 0, .2, 1);
}

.ba-image-scroller-img {
    transition-property: transform, margin;
}

/* Direction: top -> image starts at top, on trigger moves up out of frame (margin-top compensates) */
.ba-image-scroller-top .ba-image-scroller-img {
    transform: translateY(0);
}
.ba-image-scroller-top.ba-image-scroller-trigger .ba-image-scroller-img {
    transform: translateY(-100%);
    margin-top: 420px; /* overridden by container_height setting */
}

/* Direction: bottom -> image starts off-screen at bottom, on trigger moves up into view */
.ba-image-scroller-bottom .ba-image-scroller-img {
    transform: translateY(-100%);
    margin-top: 420px;
}
.ba-image-scroller-bottom.ba-image-scroller-trigger .ba-image-scroller-img {
    transform: translateY(0);
    margin-top: initial;
}

/* Direction: left */
.ba-image-scroller-left .ba-image-scroller-img {
    max-width: none;
    transform: translateX(0);
}
.ba-image-scroller-left.ba-image-scroller-trigger .ba-image-scroller-img {
    transform: translateX(-100%);
}

/* Direction: right */
.ba-image-scroller-right .ba-image-scroller-img {
    max-width: none;
    transform: translateX(-100%);
}
.ba-image-scroller-right.ba-image-scroller-trigger .ba-image-scroller-img {
    transform: translateX(0);
    margin-left: initial !important;
}

/* Badge (optional) */
.ba-image-scroller-wrapper .ba-image-scroller-badge {
    position: absolute;
    z-index: 1;
    padding: 10px 18px;
    border-radius: 50px;
    background-color: #fff;
    font-size: 12px;
    line-height: 1;
}