.dpfcm-marquee {
    --dpfcm-gap: 50px;
    --dpfcm-distance: 0px;
    --dpfcm-duration: 20s;
    --dpfcm-fade-width: 40px;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.dpfcm-viewport {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.dpfcm-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation-duration: var(--dpfcm-duration);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: dpfcm-scroll-left;
}

.dpfcm-marquee[data-direction="right"] .dpfcm-track {
    animation-name: dpfcm-scroll-right;
}

.dpfcm-group {
    display: flex;
    flex: 0 0 auto;
    width: max-content;
    min-width: max-content;
    align-items: center;
}

.dpfcm-item {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    white-space: nowrap;
}

.dpfcm-content,
.dpfcm-content * {
    box-sizing: border-box;
}

.dpfcm-content {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.dpfcm-content p,
.dpfcm-content div,
.dpfcm-content h1,
.dpfcm-content h2,
.dpfcm-content h3,
.dpfcm-content h4,
.dpfcm-content h5,
.dpfcm-content h6 {
    display: inline;
    margin: 0;
    padding: 0;
}

.dpfcm-content a {
    color: inherit;
    cursor: pointer;
    transition: color .18s ease, opacity .18s ease;
}

.dpfcm-content a:hover,
.dpfcm-content a:focus {
    opacity: .8;
}

.dpfcm-separator {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    margin-inline: calc(var(--dpfcm-gap) / 2);
    line-height: 1;
}

.dpfcm-item--no-separator {
    margin-right: var(--dpfcm-gap);
}

.dpfcm-pause-hover:hover .dpfcm-track,
.dpfcm-pause-hover:focus-within .dpfcm-track {
    animation-play-state: paused;
}

.dpfcm-has-fade {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--dpfcm-fade-width),
        #000 calc(100% - var(--dpfcm-fade-width)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--dpfcm-fade-width),
        #000 calc(100% - var(--dpfcm-fade-width)),
        transparent 100%
    );
}

@keyframes dpfcm-scroll-left {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc(-1 * var(--dpfcm-distance)), 0, 0); }
}

@keyframes dpfcm-scroll-right {
    from { transform: translate3d(calc(-1 * var(--dpfcm-distance)), 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .dpfcm-respect-reduced-motion .dpfcm-track {
        animation-play-state: paused;
        transform: translate3d(0, 0, 0) !important;
    }
}


/* Optional direct manipulation: grab the marquee and scrub it left/right. */
.dpfcm-drag-enabled .dpfcm-viewport {
    cursor: grab;
    touch-action: pan-y pinch-zoom;
    -webkit-user-select: none;
    user-select: none;
}

.dpfcm-drag-enabled.dpfcm-is-dragging .dpfcm-viewport {
    cursor: grabbing;
}

.dpfcm-drag-enabled .dpfcm-content a {
    -webkit-user-drag: none;
}