/* Ashim Das 2022 */

.sliding-digit {
    position: relative;
    width: fit-content;
    overflow: hidden;
}

.sliding-digit p {
    width: 100%;
    text-align: center;
    transform: translate(200%);
    top: 0;
    position: absolute;
    color: inherit;
    font-size: clamp(7rem, 40vw, 15rem);
    opacity: 0;
    animation: slide-hide 500ms ease forwards;
}

.sliding-digit[data-digit="0"] p:nth-of-type(2) {
    animation: slide 500ms ease forwards;
}
.sliding-digit[data-digit="1"] p:nth-of-type(3) {
    animation: slide 500ms ease forwards;
}
.sliding-digit[data-digit="2"] p:nth-of-type(4) {
    animation: slide 500ms ease forwards;
}
.sliding-digit[data-digit="3"] p:nth-of-type(5) {
    animation: slide 500ms ease forwards;
}
.sliding-digit[data-digit="4"] p:nth-of-type(6) {
    animation: slide 500ms ease forwards;
}
.sliding-digit[data-digit="5"] p:nth-of-type(7) {
    animation: slide 500ms ease forwards;
}
.sliding-digit[data-digit="6"] p:nth-of-type(8) {
    animation: slide 500ms ease forwards;
}
.sliding-digit[data-digit="7"] p:nth-of-type(9) {
    animation: slide 500ms ease forwards;
}
.sliding-digit[data-digit="8"] p:nth-of-type(10) {
    animation: slide 500ms ease forwards;
}
.sliding-digit[data-digit="9"] p:nth-of-type(11) {
    animation: slide 500ms ease forwards;
}

@keyframes slide {
    0% {
        transform: translate(-110%) skewX(-20deg);
        opacity: 1;
    } 100% {
        transform: translate(0%) skewX(0deg);
        opacity: 1;
    }
}

@keyframes slide-hide {
    0% {
        transform: translate(0%) skewX(0deg);
        opacity: 1;
    } 100% {
        transform: translate(200%) skewX(-50deg);
        opacity: 0;
    }
}