@keyframes floatPuzzle{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0);
    }
}

@keyframes shake{

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

    25%{
        transform:translateX(-6px);
    }

    75%{
        transform:translateX(6px);
    }
}

/*
 * Плавное «плавающее» движение центральной карточки вверх-вниз.
 * Без поворотов и покачиваний в стороны — только мягкое всплытие.
 * Использует только translateY, что дёшево для GPU.
 */
@keyframes swayPuzzle{

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

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

@keyframes unlockPiece{
    0%{
        opacity:1;
        transform:scale(1) rotate(0);
        filter:brightness(1);
    }

    25%{
        transform:scale(1.24) rotate(-11deg);
        filter:brightness(1.7);
    }

    55%{
        opacity:1;
        transform:scale(.95) rotate(9deg) translateY(-8px);
        filter:brightness(1.05);
    }

    100%{
        opacity:0;
        transform:scale(.4) rotate(17deg) translateY(-34px);
        filter:brightness(1);
    }
}

/* Короткая вспышка на самом кусочке в момент открытия — усиливает
   ощущение "чего-то важного", без анимации целого пазла. */
@keyframes pieceUnlockFlash{
    0%{ box-shadow:inset 0 0 0 rgba(255,255,255,0); }
    25%{ box-shadow:inset 0 0 60px rgba(255,255,255,.85); }
    100%{ box-shadow:inset 0 0 0 rgba(255,255,255,0); }
}

.piece.unlocking{
    animation:pieceUnlockFlash .7s ease-out;
}