/* =====================================================
   Dual Layer Carousel — Public Styles
   ===================================================== */

.dlc-carousel-wrap {
    --dlc-height: 200px;
    --dlc-gap: 20px;
    --dlc-layer-gap: 10px;
    --dlc-speed: 40s;
    --dlc-radius: 12px;

    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--dlc-layer-gap);
}

/* ---- Each Row ---------------------------------------- */
.dlc-layer {
    width: 100%;
    overflow: hidden;
    display: flex;
}

.dlc-track {
    display: flex;
    gap: var(--dlc-gap);
    width: max-content;    /* Expands to fit all slides */
    will-change: transform;
}

/* ---- Slide ------------------------------------------- */
.dlc-slide {
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--dlc-radius);
}

.dlc-slide img {
    display: block;
    height: var(--dlc-height);
    width: auto;
    object-fit: cover;
    border-radius: var(--dlc-radius);
    pointer-events: none;
    user-select: none;
}

/* ---- Animations -------------------------------------- */

/* Layer 1 scrolls LEFT (default marquee direction) */
@keyframes dlc-scroll-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* -50% because we duplicate slides */
}

/* Layer 2 scrolls RIGHT */
@keyframes dlc-scroll-right {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

.dlc-layer--left .dlc-track {
    animation: dlc-scroll-left var(--dlc-speed) linear infinite;
    animation-delay: 0s;
    animation-play-state: paused; /* JS unpauses after setting correct duration */
}

.dlc-layer--right .dlc-track {
    animation: dlc-scroll-right var(--dlc-speed) linear infinite;
    animation-delay: 0s;
    animation-play-state: paused; /* JS unpauses after setting correct duration */
}

/* ---- Pause on hover — only applies once JS has started the animation --- */
.dlc-carousel-wrap[data-pause="true"]:hover .dlc-track {
    animation-play-state: paused !important;
}

/* ---- Reduced motion ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .dlc-track {
        animation: none !important;
    }
    .dlc-layer {
        overflow-x: auto;
        scroll-behavior: smooth;
    }
}