/* ==========================================================================
   Empire Petroleum – Vendor Logo Scroller
   Pure CSS continuous marquee. No JS-driven animation, so motion is
   perfectly fluid with zero stutter, delay, or restart jump.
   ========================================================================== */

.epvs-wrap {
    overflow: hidden;
    position: relative;
    width: 100%;

    /* fade edges so logos don't hard-clip at the container boundary */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.epvs-track {
    display: flex;
    align-items: center;
    gap: var(--epvs-gap, 56px);
    width: max-content;

    /* translate exactly -50% because content is duplicated 2x —
       this is what makes the loop seamless with no jump/reset flash */
    animation: epvs-scroll-left var(--epvs-speed, 35s) linear infinite;
    will-change: transform;
}

.epvs-track.epvs-dir-right {
    animation-name: epvs-scroll-right;
}

@keyframes epvs-scroll-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

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

.epvs-wrap.epvs-pause-hover:hover .epvs-track {
    animation-play-state: paused;
}

.epvs-item {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: var(--epvs-height, 70px);
    justify-content: center;
}

.epvs-link {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    text-decoration: none;
}

.epvs-item img {
    display: block;
    filter: grayscale(0%);
    height: 100%;
    max-width: 220px;
    object-fit: contain;
    transition: opacity .2s, filter .2s, transform .2s;
    width: auto;
}

.epvs-item img:hover {
    transform: scale(1.04);
}

/* Respect reduced-motion preference for accessibility */
@media (prefers-reduced-motion: reduce) {
    .epvs-track {
        animation: none;
    }
    .epvs-wrap {
        overflow-x: auto;
    }
}

/* Smaller logo height on narrow screens by default; override via height="" attribute if needed */
@media (max-width: 600px) {
    .epvs-item { height: calc(var(--epvs-height, 70px) * 0.75); }
}