.letter {
    display: inline-block;
   
    transform: translateX(0) rotate(0deg);

    will-change: transform;

    transition:
        transform var(--transition-time) ease,
        color calc(var(--transition-time) * 1) ease;
}

.letter.accent {
    color: var(--accent);
}

.letter.sway {
    animation: letter-sway 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes letter-sway {
    0% {
        transform: translateX(0) rotate(0deg);
    }

    18% {
        transform: translateX(-6px) rotate(-3deg);
    }

    38% {
        transform: translateX(5px) rotate(2.5deg);
    }

    55% {
        transform: translateX(-3px) rotate(-1.5deg);
    }

    72% {
        transform: translateX(2px) rotate(0.8deg);
    }

    88% {
        transform: translateX(-1px) rotate(-0.3deg);
    }

    100% {
        transform: translateX(0) rotate(0deg);
    }
}