.thumb-animated {
    display: none !important;
}

.poster-small {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.thumb-animation:hover .video-img .poster-small {
    opacity: 0;
}

.thumb-animation:hover .video-img .sr-recording-thumbnail {
    opacity: 0;
}

.thumb-animation:hover .video-img {
    background-image: var(--thumb-animation-image);
    background-size: 300% 300%;
    animation: reveal 9s steps(1);
    animation-iteration-count: infinite;
    box-shadow: inset 0px 0px 8px 2px var(--sr-box-shadow-bg, #5C6FFF) !important;
}

.thumb-animation-border:hover .video-img,
.thumb-animation-border:focus .video-img {
    box-shadow: inset 0px 0px 8px 2px var(--sr-box-shadow-bg, #5C6FFF), -9px 8px 0px 0px var(--sr-box-shadow-bg, #5C6FFF) !important;
}

@keyframes reveal {
    0% {
        background-position: 300% 300%;
    }

    11.11% {
        background-position: 200% 300%;
    }

    22.22% {
        background-position: 100% 300%;
    }

    33.33% {
        background-position: 300% 200%;
    }

    44.44% {
        background-position: 200% 200%;
    }

    55.55% {
        background-position: 100% 200%;
    }

    66.66% {
        background-position: 300% 100%;
    }

    77.77% {
        background-position: 200% 100%;
    }

    88.88% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 100% -100%;
    }
}

.new-thumb-anim {
    position: relative;
}

.new-thumb-anim .sr-recording-thumbnail {
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 0.1s ease;
}

.new-thumb-anim:hover .sr-recording-thumbnail {
    opacity: 0;
}

.new-thumb-anim:hover .video-img {
    background: var(--thumb-animation-image);
    background-size: auto 900%;
    background-position: center 0;
    background-repeat: no-repeat;
    animation: thumbScroll 6s steps(9) infinite;
    background-color: #131527;
}

@keyframes thumbScroll {
    from {
        background-position: center 0;
    }
    to {
        background-position: center calc(var(--video-img-height, 168px) * -9);
    }
}