/* ============================================================
   JD Marquee Slider — Pure CSS Animation v2.0.0
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────── */

.jd-ms-wrapper {
    --jd-ms-speed: 30s;
    --jd-ms-anim: jd-ms-scroll-left;

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


/* ── Track — holds 2× copies of slides for seamless loop ── */

.jd-ms-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    animation: var(--jd-ms-anim) var(--jd-ms-speed) linear infinite;
    will-change: transform;
}

/* Pause on hover */
.jd-ms-wrapper.pause-on-hover:hover .jd-ms-track {
    animation-play-state: paused;
}


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

@keyframes jd-ms-scroll-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes jd-ms-scroll-right {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}


/* ── Slide ───────────────────────────────────────────────── */

.jd-ms-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
    /* width, height, margin-right, padding set via Elementor controls */
}

a.jd-ms-slide {
    cursor: pointer;
}


/* ── Image ───────────────────────────────────────────────── */

.jd-ms-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /* overridden by Elementor control */
}


/* ── Edge Fade Overlays ──────────────────────────────────── */

.jd-ms-wrapper.has-fade::before,
.jd-ms-wrapper.has-fade::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}

.jd-ms-wrapper.has-fade::before {
    left: 0;
    background: linear-gradient(to right, #ffffff 0%, transparent 100%);
}

.jd-ms-wrapper.has-fade::after {
    right: 0;
    background: linear-gradient(to left, #ffffff 0%, transparent 100%);
}


/* ── Editor Preview Fix ──────────────────────────────────── */

.elementor-editor-active .jd-ms-wrapper .jd-ms-track {
    animation-play-state: running;
}


/* ── Reduced Motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .jd-ms-track {
        animation-duration: 120s !important;
    }
}