/* ==========================================================================
   Vkard Marquee Widget — marquee.css
   ========================================================================== */

/* ── CSS Custom Properties (overridden via Elementor selectors) ─────────── */
.vkard-marquee-wrapper {
    --vkard-marquee-speed:          20s;
    --vkard-marquee-gap:            40px;
    --vkard-marquee-gradient-color: #ffffff;
    --vkard-marquee-gradient-width: 80px;

    position:   relative;
    overflow:   hidden;
    display:    flex;
    align-items: center;
    width:      100%;
    box-sizing: border-box;
}

/* Vertical mode */
.vkard-marquee-wrapper.is-vertical {
    flex-direction: column;
    align-items:    stretch;
}

/* ── Track ───────────────────────────────────────────────────────────────── */
.vkard-marquee-track {
    display:         flex;
    flex-wrap:       nowrap;
    align-items:     center;
    gap:             var(--vkard-marquee-gap);

    /* Animation set by JS via inline style after cloning */
    will-change:     transform;
    white-space:     nowrap;
}

.vkard-marquee-wrapper.is-vertical .vkard-marquee-track {
    flex-direction: column;
    white-space:    normal;
}

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes vkard-marquee-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes vkard-marquee-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

@keyframes vkard-marquee-up {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

@keyframes vkard-marquee-down {
    from { transform: translateY(-50%); }
    to   { transform: translateY(0); }
}

/* Applied by JS on the .vkard-marquee-track once cloned */
.vkard-marquee-track[data-anim="left"] {
    animation: vkard-marquee-left var(--vkard-marquee-speed) linear infinite;
}
.vkard-marquee-track[data-anim="right"] {
    animation: vkard-marquee-right var(--vkard-marquee-speed) linear infinite;
}
.vkard-marquee-track[data-anim="up"] {
    animation: vkard-marquee-up var(--vkard-marquee-speed) linear infinite;
}
.vkard-marquee-track[data-anim="down"] {
    animation: vkard-marquee-down var(--vkard-marquee-speed) linear infinite;
}

/* ── Pause on hover ──────────────────────────────────────────────────────── */
.vkard-marquee-wrapper.vkard-paused .vkard-marquee-track {
    animation-play-state: paused;
}

/* ── Items ───────────────────────────────────────────────────────────────── */
.vkard-marquee-item {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    box-sizing:      border-box;
    transition:      opacity 0.25s ease, color 0.25s ease;
    text-decoration: none;
    cursor:          default;
}

.vkard-marquee-item a {
    text-decoration: none;
    color:           inherit;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
}

.vkard-marquee-item.type-image img {
    display:      block;
    width:        auto;
    height:       auto;
    max-width:    120px;
    max-height:   60px;
    object-fit:   contain;
    transition:   opacity 0.25s ease;
    flex-shrink:  0;
}

.vkard-marquee-item.type-text .vkard-marquee-text {
    display:     inline-block;
    white-space: nowrap;
}

.vkard-marquee-separator {
    display:     inline-block;
    margin-left: calc( var(--vkard-marquee-gap) / 2 );
    user-select: none;
    flex-shrink: 0;
}

/* ── Gradient Fade Overlay ───────────────────────────────────────────────── */
.vkard-marquee-wrapper.has-gradient::before,
.vkard-marquee-wrapper.has-gradient::after {
    content:    '';
    position:   absolute;
    top:        0;
    height:     100%;
    width:      var(--vkard-marquee-gradient-width);
    z-index:    2;
    pointer-events: none;
}

/* Left fade */
.vkard-marquee-wrapper.has-gradient::before {
    left:       0;
    background: linear-gradient(
        to right,
        var(--vkard-marquee-gradient-color) 0%,
        transparent 100%
    );
}

/* Right fade */
.vkard-marquee-wrapper.has-gradient::after {
    right:      0;
    background: linear-gradient(
        to left,
        var(--vkard-marquee-gradient-color) 0%,
        transparent 100%
    );
}

/* Vertical gradient (top/bottom fades) */
.vkard-marquee-wrapper.is-vertical.has-gradient::before,
.vkard-marquee-wrapper.is-vertical.has-gradient::after {
    width:  100%;
    height: var(--vkard-marquee-gradient-width);
    left:   0;
    right:  auto;
}
.vkard-marquee-wrapper.is-vertical.has-gradient::before {
    top:    0;
    bottom: auto;
    background: linear-gradient(
        to bottom,
        var(--vkard-marquee-gradient-color) 0%,
        transparent 100%
    );
}
.vkard-marquee-wrapper.is-vertical.has-gradient::after {
    top:    auto;
    bottom: 0;
    background: linear-gradient(
        to top,
        var(--vkard-marquee-gradient-color) 0%,
        transparent 100%
    );
}

/* ── Reduced Motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .vkard-marquee-track {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
    }
}