/* 追加する文字の初期状態 */
.canvas-result-text-char {
    opacity: 0;
    display: inline-block;
}

/* 【displayType 1】ふわっと表示（フェード＋上昇） */
.canvas-result-text-fade-in {
    animation: canvas-result-text-fadeIn 0.5s forwards;
}

@keyframes canvas-result-text-fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 【displayType 2】バシッと振動（シェイク） */
.canvas-result-text-shake {
    opacity: 1;
    animation: canvas-result-text-shake 0.1s ease-in-out forwards;
}

@keyframes canvas-result-text-shake {
    0% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(0px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(-2px, 0px);
    }

    100% {
        transform: translate(0, 0);
    }
}

.canvas-result-text-shake2 {
    opacity: 1;
    animation: canvas-result-text-shake2 0.1s ease-in-out forwards;
}

@keyframes canvas-result-text-shake2 {
    0% {
        transform: translate(0, 0);
    }

    /* ★shake2 パターン★ */
    15% {
        transform: translate(3px, -2px);
    }

    30% {
        transform: translate(-2px, 3px);
    }

    45% {
        transform: translate(3px, -3px);
    }

    60% {
        transform: translate(-3px, 2px);
    }

    75% {
        transform: translate(2px, -2px);
    }

    90% {
        transform: translate(-2px, 2px);
    }

    100% {
        transform: translate(0, 0);
    }
}

.canvas-result-text-shake3 {
    opacity: 1;
    animation: canvas-result-text-shake3 0.1s ease-in-out forwards;
}

@keyframes canvas-result-text-shake3 {
    0% {
        transform: translate(0, 0);
    }

    /* ★shake3 パターン★ */
    20% {
        transform: translate(-3px, 3px);
    }

    40% {
        transform: translate(3px, -3px);
    }

    60% {
        transform: translate(-3px, 3px);
    }

    80% {
        transform: translate(3px, -3px);
    }

    100% {
        transform: translate(0, 0);
    }
}

.canvas-result-text-shake4 {
    opacity: 1;
    animation: canvas-result-text-shake4 0.1s ease-in-out forwards;
}

@keyframes canvas-result-text-shake4 {
    0% {
        transform: translate(0, 0);
    }

    /* ★shake4 パターン★ */
    15% {
        transform: translate(4px, -3px);
    }

    30% {
        transform: translate(-3px, 4px);
    }

    45% {
        transform: translate(3px, -4px);
    }

    60% {
        transform: translate(-4px, 3px);
    }

    75% {
        transform: translate(2px, -2px);
    }

    90% {
        transform: translate(-2px, 2px);
    }

    100% {
        transform: translate(0, 0);
    }
}

.canvas-result-text-shake5 {
    opacity: 1;
    animation: canvas-result-text-shake5 0.1s ease-in-out forwards;
}

@keyframes canvas-result-text-shake5 {
    0% {
        transform: translate(0, 0);
    }

    /* ★shake5 パターン★ */
    10% {
        transform: translate(-5px, 5px);
    }

    20% {
        transform: translate(5px, -5px);
    }

    30% {
        transform: translate(-5px, 5px);
    }

    40% {
        transform: translate(5px, -5px);
    }

    50% {
        transform: translate(-4px, 4px);
    }

    60% {
        transform: translate(4px, -4px);
    }

    70% {
        transform: translate(-3px, 3px);
    }

    80% {
        transform: translate(3px, -3px);
    }

    90% {
        transform: translate(-2px, 2px);
    }

    100% {
        transform: translate(0, 0);
    }
}