.word.invalid {
    animation: shake var(--motion-duration-shake) var(--motion-ease-standard);
}

.tile.swapping {
    transform: scale(0.82) rotate(-8deg);
    opacity: 0;
    filter: blur(3px) saturate(0.8);
    pointer-events: none;
}

.tile.hint-target {
    transform-origin: 50% 100%;
    will-change: transform;
}

.tile.hint-active {
    animation: best-word-hint 760ms var(--motion-ease-out) calc(var(--hint-order, 0) * 90ms);
}

.toast-enter-active,
.toast-leave-active {
    transition:
        opacity var(--motion-duration-normal) var(--motion-ease-standard),
        transform var(--motion-duration-enter) var(--motion-ease-out);
}

.toast-enter-from,
.toast-leave-to {
    opacity: 0;
    transform: translate(-50%, -12px);
}

.toast-enter-to,
.toast-leave-from {
    transform: translate(-50%, 0);
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}

@keyframes best-word-hint {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    26% { transform: translate3d(0, -6px, 0) rotate(-2deg); }
    54% { transform: translate3d(0, -2px, 0) rotate(1.4deg); }
    78% { transform: translate3d(0, -4px, 0) rotate(-1deg); }
}

@keyframes spinning-dashes {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .tile.hint-active {
        animation: none;
    }
}