:root {
    --infinite: 100000;
}

/* #region Blink */

@keyframes blink-container {
    0% {
        --blink-current-index: 0;
    }

    100% {
        --blink-current-index: var(--blink-count);
    }
}

@keyframes blink {
    0%, 100% {
        --blink-ratio: 0;
    }

    10%, 90% {
        --blink-ratio: 1;
    }
}

@property --blink-current-index {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --blink-ratio {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

.blinking-container {
    --blink-duration: 1.2s;
    animation: blink-container calc(var(--blink-duration) * var(--blink-count)) steps(var(--blink-count), jump-end) infinite;
}

.blinking {
    --blink-low: min(max(calc(var(--blink-current-index) - var(--blink-index) + 1), 0) * var(--infinite), 1);
    --blink-high: min(max(calc(var(--blink-index) + 1 - var(--blink-current-index)), 0) * var(--infinite), 1);
    --blink-flag: calc(var(--blink-low) * var(--blink-high));
    opacity: calc(var(--blink-flag) * var(--blink-ratio));
    animation: blink var(--blink-duration) ease-in-out infinite;
}

/* #endregion */

/* #region Roll */

@keyframes roll-container {
    0% {
        --roll-current-index: 0;
    }

    100% {
        --roll-current-index: var(--roll-count);
    }
}

@keyframes roll {
    0%, 100% {
        --roll-ratio: 1;
    }
}

@property --roll-current-index {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --roll-ratio {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

.rolling-container {
    --roll-duration: 0.1s;
    animation: roll-container calc(var(--roll-duration) * var(--roll-count)) steps(var(--roll-count), jump-end) infinite;
}

.rolling {
    --roll-low: min(max(calc(var(--roll-current-index) - var(--roll-index) + 1), 0) * var(--infinite), 1);
    --roll-high: min(max(calc(var(--roll-index) + 1 - var(--roll-current-index)), 0) * var(--infinite), 1);
    --roll-flag: calc(var(--roll-low) * var(--roll-high));
    opacity: calc(var(--roll-flag) * var(--roll-ratio));
    animation: roll var(--roll-duration) ease-in-out infinite;
}

/* #endregion */