/* ============================================================
 *  Blossom Logo Ticker – Styles
 * ============================================================ */

/* ── Keyframes ─────────────────────────────────────────────── */

@keyframes bea-ticker-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes bea-ticker-scroll-reverse {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

/* ── Container ─────────────────────────────────────────────── */

.bea-logo-ticker {
    --bea-fade-width: 80px;
    --bea-fade-color: #ffffff;
    --bea-ticker-speed: 30s;
    --bea-ticker-direction: normal;

    position: relative;
    overflow: hidden;
    width: 100%;
}

/* ── Edge fade overlays ────────────────────────────────────── */

.bea-logo-ticker--edge-fade::before,
.bea-logo-ticker--edge-fade::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--bea-fade-width);
    z-index: 2;
    pointer-events: none;
}

.bea-logo-ticker--edge-fade::before {
    left: 0;
    background: linear-gradient(to right,
            var(--bea-fade-color) 0%,
            transparent 100%);
}

.bea-logo-ticker--edge-fade::after {
    right: 0;
    background: linear-gradient(to left,
            var(--bea-fade-color) 0%,
            transparent 100%);
}

/* True transparency at edges: fade into whatever is behind the widget (mask), not a solid fade color. */
.bea-logo-ticker--edge-fade-mask::before,
.bea-logo-ticker--edge-fade-mask::after {
    content: none;
}

.bea-logo-ticker--edge-fade-mask {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 var(--bea-fade-width, 80px),
        #000 calc(100% - var(--bea-fade-width, 80px)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 var(--bea-fade-width, 80px),
        #000 calc(100% - var(--bea-fade-width, 80px)),
        transparent 100%
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* ── Track (the moving strip) ──────────────────────────────── */

.bea-logo-ticker__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: bea-ticker-scroll var(--bea-ticker-speed) linear infinite;
    will-change: transform;
}

/* Reverse direction */
.bea-logo-ticker[data-direction="right"] .bea-logo-ticker__track {
    animation-name: bea-ticker-scroll-reverse;
}

/* Pause on hover */
.bea-logo-ticker--pause-hover:hover .bea-logo-ticker__track {
    animation-play-state: paused;
}

/* ── Individual logo item ──────────────────────────────────── */

.bea-logo-ticker__item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.3s ease, filter 0.4s ease, transform 0.3s ease;
    /* Domyślnie ostre rogi; Elementor nadpisuje na .bea-logo-ticker__item + img */
    border-radius: 0;
    overflow: hidden;
}

.bea-logo-ticker__item a {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.bea-logo-ticker__img {
    display: block;
    object-fit: contain;
    max-width: none;
    width: auto;
    height: auto;
}

/* Motywy często dodają border-radius lub max-width na img — resetujemy */
.elementor-widget-blossom_logo_ticker .bea-logo-ticker__item img {
    border-radius: 0;
    max-width: none;
    width: auto;
}

/* Subtle scale on hover */
.bea-logo-ticker__item:hover {
    transform: scale(1.05);
}

/* ── Visual Effects ────────────────────────────────────────── */

/* Grayscale (always) */
.bea-logo-ticker--grayscale .bea-logo-ticker__item img {
    filter: grayscale(100%);
}

/* Grayscale → color on hover */
.bea-logo-ticker--grayscale-hover .bea-logo-ticker__item img {
    filter: grayscale(100%);
}

.bea-logo-ticker--grayscale-hover .bea-logo-ticker__item:hover img {
    filter: grayscale(0%);
}

/* White (high brightness + invert for dark logos → pure white) */
.bea-logo-ticker--white .bea-logo-ticker__item img {
    filter: brightness(0) invert(1);
}

.bea-logo-ticker--white .bea-logo-ticker__item:hover img {
    filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

/* Dark */
.bea-logo-ticker--dark .bea-logo-ticker__item img {
    filter: brightness(0);
}

.bea-logo-ticker--dark .bea-logo-ticker__item:hover img {
    filter: brightness(0) drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
}

/* Sepia */
.bea-logo-ticker--sepia .bea-logo-ticker__item img {
    filter: sepia(100%);
}

.bea-logo-ticker--sepia .bea-logo-ticker__item:hover img {
    filter: sepia(0%);
}

/* ── Accessibility ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .bea-logo-ticker__track {
        animation-duration: 0s !important;
    }
}