.ockham-text-marquee {
    --ockham-marquee-duration: 20s;
    --ockham-marquee-distance: 100px;
    --ockham-marquee-item-gap: 28px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.ockham-text-marquee,
.ockham-text-marquee * {
    box-sizing: border-box;
}

.ockham-text-marquee__viewport {
    width: 100%;
    overflow: hidden;
}

.ockham-text-marquee__track {
    display: flex;
    align-items: center;
    width: max-content;
    min-width: 100%;
    gap: var(--ockham-marquee-item-gap);
    animation-name: ockham-text-marquee-scroll;
    animation-duration: var(--ockham-marquee-duration);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

.ockham-text-marquee[data-direction="right"] .ockham-text-marquee__track {
    animation-direction: reverse;
}

.ockham-text-marquee[data-pause-hover="yes"]:hover .ockham-text-marquee__track,
.ockham-text-marquee.is-out-of-view .ockham-text-marquee__track,
.ockham-text-marquee.is-building .ockham-text-marquee__track {
    animation-play-state: paused;
}

.ockham-text-marquee__group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--ockham-marquee-item-gap);
    width: max-content;
}

.ockham-text-marquee__item {
    --ockham-marquee-separator-gap: 28px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--ockham-marquee-separator-gap);
    white-space: nowrap;
}

.ockham-text-marquee__text,
.ockham-text-marquee__separator {
    display: inline-block;
    flex: 0 0 auto;
    white-space: nowrap;
    line-height: 1.2;
}

.ockham-text-marquee__separator {
    transform-origin: center;
}

@keyframes ockham-text-marquee-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(calc(-1 * var(--ockham-marquee-distance)), 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ockham-text-marquee__track {
        animation: none !important;
        transform: none !important;
    }
}