.reel {
    position: relative;
    height: 10rem;
    overflow: hidden;
    --rows: 7;
    --row-h: 2.5rem;
}

@media (min-width:640px) {
    .reel {
        height: 3.5rem;
        padding-left: 1.75rem;
    }
}

.reel-inner {
    display: block;
    will-change: transform;
    animation: reel-ease var(--dur, 12s) infinite
}

@keyframes reel-ease {
    0% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(.9, 0, .1, 1)
    }

    14.2857% {
        transform: translateY(calc(-1 * var(--row-h)));
        animation-timing-function: cubic-bezier(.9, 0, .1, 1)
    }

    28.5714% {
        transform: translateY(calc(-2 * var(--row-h)));
        animation-timing-function: cubic-bezier(.9, 0, .1, 1)
    }

    42.8571% {
        transform: translateY(calc(-3 * var(--row-h)));
        animation-timing-function: cubic-bezier(.9, 0, .1, 1)
    }

    57.1429% {
        transform: translateY(calc(-4 * var(--row-h)));
        animation-timing-function: cubic-bezier(.9, 0, .1, 1)
    }

    71.4286% {
        transform: translateY(calc(-5 * var(--row-h)));
        animation-timing-function: cubic-bezier(.9, 0, .1, 1)
    }

    85.7143% {
        transform: translateY(calc(-6 * var(--row-h)));
        animation-timing-function: cubic-bezier(.9, 0, .1, 1)
    }

    100% {
        transform: translateY(calc(-7 * var(--row-h)))
    }
}

/* Separate keyframes for the rate pill (fixed 3.5rem rows) */
@keyframes rate-ease {
    0% {
        transform: translateY(calc(0 * 3.5rem + 1.75rem));
        animation-timing-function: cubic-bezier(.9, 0, .1, 1)
    }

    14.2857% {
        transform: translateY(calc(-1 * 3.5rem + 1.75rem));
        animation-timing-function: cubic-bezier(.9, 0, .1, 1)
    }

    28.5714% {
        transform: translateY(calc(-2 * 3.5rem + 1.75rem));
        animation-timing-function: cubic-bezier(.9, 0, .1, 1)
    }

    42.8571% {
        transform: translateY(calc(-3 * 3.5rem + 1.75rem));
        animation-timing-function: cubic-bezier(.9, 0, .1, 1)
    }

    57.1429% {
        transform: translateY(calc(-4 * 3.5rem + 1.75rem));
        animation-timing-function: cubic-bezier(.9, 0, .1, 1)
    }

    71.4286% {
        transform: translateY(calc(-5 * 3.5rem + 1.75rem));
        animation-timing-function: cubic-bezier(.9, 0, .1, 1)
    }

    85.7143% {
        transform: translateY(calc(-6 * 3.5rem + 1.75rem));
        animation-timing-function: cubic-bezier(.9, 0, .1, 1)
    }

    100% {
        transform: translateY(calc(-7 * 3.5rem + 1.75rem))
    }
}

.reel ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.reel li {
    height: var(--row-h);
    display: flex;
    align-items: center
}

.rate-pill {
    display: inline-flex;
    align-items: center;
    padding: 0 1rem;
    border-radius: 9999px;
    background: #059669;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 10px 20px rgba(5, 150, 105, .2);
    height: 3.5rem;
    overflow: hidden
}

.rate-reel-inner {
    display: block;
    will-change: transform;
    animation: rate-ease var(--rate-dur, 12s) infinite;
}

.rate-pill ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.rate-pill li {
    height: 3.5rem;
    line-height: 3.5rem;
    display: flex;
    align-items: center
}

.reel-blur {
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 46%, transparent 54%, #000 80%, #000 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 46%, transparent 54%, #000 80%, #000 100%)
}