/* Ensure the track natively stacks the images in a vertical column */
.slot-track {
    display: flex;
    flex-direction: column;
}

/* ---------------- 2 LOGOS STATE ---------------- */
.slot-track.is-2y {
    animation: slot-machine-two 9s ease-in-out infinite;
}

@keyframes slot-machine-two {

    0%,
    40% {
        transform: translateY(0%);
    }

    45%,
    85% {
        transform: translateY(-25%);
    }

    /* Slides up 1 logo */
    90%,
    100% {
        transform: translateY(-50%);
    }

    /* Slides up identically cloning */
}


/* ---------------- 3 LOGOS STATE ---------------- */
.slot-track.is-3y {
    /* Slightly longer total time so the 3 logos each get the same 3-4sec pause */
    animation: slot-machine-three 12s ease-in-out infinite;
}

@keyframes slot-machine-three {

    0%,
    25% {
        transform: translateY(0%);
    }

    29%,
    55% {
        transform: translateY(-16.66%);
    }

    /* Slides up 1 logo */
    59%,
    85% {
        transform: translateY(-33.33%);
    }

    /* Slides up 2 logos */
    89%,
    100% {
        transform: translateY(-50%);
    }

    /* Slides up identically cloning */
}