/* Shared numeric transition originally established by the Flash Sale timer. */
:root {
    --digit-dur: 500ms;
    --digit-distance: 8px;
    --digit-stagger: 70ms;
    --digit-blur: 2px;
    --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
    --digit-dir-x: 0;
    --digit-dir-y: 1;
}

.dm-countdown-motion {
    font-variant-numeric: tabular-nums;
}

.t-digit-group {
    align-items: baseline;
    display: inline-flex;
    justify-content: center;
    line-height: 1;
    min-width: calc(var(--dm-countdown-chars, 2) * 1ch);
    vertical-align: middle;
}

.t-digit {
    display: inline-block;
    line-height: 1;
    min-width: 1ch;
    text-align: center;
    transform: translateZ(0);
    width: 1ch;
    will-change: transform, opacity, filter;
}

.t-digit-group.is-animating .t-digit {
    animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
    animation-delay: calc(var(--digit-stagger) * var(--digit-stagger-index, 0));
}

@keyframes t-digit-pop-in {
    0% {
        filter: blur(var(--digit-blur));
        opacity: 0;
        transform: translate(
            calc(var(--digit-distance) * var(--digit-dir-x)),
            calc(var(--digit-distance) * var(--digit-dir-y))
        );
    }

    100% {
        filter: blur(0);
        opacity: 1;
        transform: translate(0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .t-digit {
        animation: none !important;
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}