/*
    Dyslexic mode
*/

@keyframes NumberOrientation-dyslexic {
    from { transform: rotate(0deg) translateX(15%) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(15%) rotate(-360deg); }
}

@keyframes NumberOrientation-dyslexic-anti {
    from { transform: rotate(0deg) translateX(15%) rotate(0deg); }
    to   { transform: rotate(-360deg) translateX(15%) rotate(360deg); }
}

/*
    Swaps
*/

@keyframes NumberOrientation-swap-right-clockwise {
    from { transform: rotate(0deg) translateX(0px) rotate(0deg); }
    to   { transform: rotate(180deg) translateX(-180px) rotate(-180deg); }
}

@keyframes NumberOrientation-swap-left-clockwise {
    from { transform: rotate(0deg) translateX(0px) rotate(0deg); }
    to   { transform: rotate(180deg) translateX(180px) rotate(-180deg); }
}

@keyframes NumberOrientation-swap-right-anticlockwise {
    from { transform: rotate(0deg) translateX(0px) rotate(0deg); }
    to   { transform: rotate(-180deg) translateX(-180px) rotate(180deg); }
}

@keyframes NumberOrientation-swap-left-anticlockwise {
    from { transform: rotate(0deg) translateX(0px) rotate(0deg); }
    to   { transform: rotate(-180deg) translateX(180px) rotate(180deg); }
}

/*
    Slides
*/

@keyframes NumberOrientation-slide-down {
    from { margin-top: -20px; }
    to   { margin-top: 0px; }
}

/*
    Bumps
*/

@keyframes NumberOrientation-bump-right {
    0%   { margin-left: 0px; }
    30%  { margin-left: 20px; }
    100% { margin-left: 0px; }
}

@keyframes NumberOrientation-bump-left {
    0%   { margin-left: 0px; }
    30%  { margin-left: -20px; }
    100% { margin-left: 0px; }
}

@keyframes NumberOrientation-soft-bump-right {
    0%   { margin-left: 0px; }
    20%  { margin-left: 10px; }
    100% { margin-left: 0px; }
}

@keyframes NumberOrientation-soft-bump-left {
    0%   { margin-left: 0px; }
    20%  { margin-left: -10px; }
    100% { margin-left: 0px; }
}