/**
 * Banner Animation — Styles
 *
 * Layout:
 *   - Full-width section with overflow hidden
 *   - Rows of text/images that translate horizontally on scroll
 *   - Each row is a single horizontal strip (nowrap)
 *
 * IMPORTANT:
 *   - Uses ONLY CSS variables (NO hardcoded hex/rgba values)
 *   - Responsive: Desktop (>=992px), Tablet (768-991px), Mobile (<=767px)
 *   - Typography sizes configurable via Elementor controls
 *
 * @package Elementor_WB
 */

/* ============================================================================
   BASE LAYOUT
   ========================================================================= */

.wb-banner-animation {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.wb-banner-animation__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ============================================================================
   ROW
   ========================================================================= */

.wb-banner-animation__row {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
}

/* ============================================================================
   TEXT
   ========================================================================= */

.wb-banner-animation__text {
    font-weight: 700;
    line-height: 1.2;
    display: inline;
}

/* ============================================================================
   GALLERY (inline images within a row)
   ========================================================================= */

.wb-banner-animation__gallery {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.wb-banner-animation__image {
    display: block;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

/* ============================================================================
   RESPONSIVE: MOBILE (<=767px)
   ========================================================================= */

@media (max-width: 767px) {
    .wb-banner-animation__row {
        justify-content: center;
    }
}

/* ============================================================================
   ACCESSIBILITY
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .wb-banner-animation__row {
        transform: none !important;
        will-change: auto;
    }
}