:root {
	--fade-distance: 15%;
	--slide-distance: 100%;
	--zoom-scale: 0.95;
	--zoom-move: 20%;
	--bounce-in-scale-start: 0.8;
	--bounce-in-scale-max: 1.05;
	--bounce-in-scale-min: 0.97;
	--bounce-in-scale-final: 1.02;
	--bounce-in-translate: 30px;
	--bounce-in-overshoot: 10px;
	--bounce-in-recoil: 5px;
	--shake-translate: 6px;
	--headshake-translate: 6px;
	--headshake-rotate: 7deg;
	--wobble-translate: 10%;
	--wobble-rotate: 5deg;
	--tada-scale: 1.1;
	--tada-rotate: 3deg;
	--flash-opacity-low: 0.65;
	--pulse-scale: 1.03;
	--rubber-scale-x: 1.15;
	--rubber-scale-y: 0.85
}

/* Fade In */
@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, calc(-1 * var(--fade-distance)), 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, var(--fade-distance), 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(calc(-1 * var(--fade-distance)), 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(var(--fade-distance), 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Slide In */
@keyframes slideInDown { from { transform: translate3d(0, calc(-1 * var(--slide-distance)), 0); } to { transform: none; } }
@keyframes slideInUp { from { transform: translate3d(0, var(--slide-distance), 0); } to { transform: none; } }
@keyframes slideInLeft { from { transform: translate3d(calc(-1 * var(--slide-distance)), 0, 0); } to { transform: none; } }
@keyframes slideInRight { from { transform: translate3d(var(--slide-distance), 0, 0); } to { transform: none; } }

/* Zoom In */
@keyframes zoomIn { from { opacity: 0; transform: scale3d(var(--zoom-scale), var(--zoom-scale), var(--zoom-scale)); } to { opacity: 1; transform: none; } }
@keyframes zoomInDown { from { opacity: 0; transform: translate3d(0, calc(-1 * var(--zoom-move)), 0) scale3d(var(--zoom-scale), var(--zoom-scale), var(--zoom-scale)); } to { opacity: 1; transform: none; } }
@keyframes zoomInUp { from { opacity: 0; transform: translate3d(0, var(--zoom-move), 0) scale3d(var(--zoom-scale), var(--zoom-scale), var(--zoom-scale)); } to { opacity: 1; transform: none; } }
@keyframes zoomInLeft { from { opacity: 0; transform: translate3d(calc(-1 * var(--zoom-move)), 0, 0) scale3d(var(--zoom-scale), var(--zoom-scale), var(--zoom-scale)); } to { opacity: 1; transform: none; } }
@keyframes zoomInRight { from { opacity: 0; transform: translate3d(var(--zoom-move), 0, 0) scale3d(var(--zoom-scale), var(--zoom-scale), var(--zoom-scale)); } to { opacity: 1; transform: none; } }

/* Bounce In */
@keyframes bounceIn { 0% { opacity: 0; transform: scale3d(var(--bounce-in-scale-start), var(--bounce-in-scale-start), var(--bounce-in-scale-start)); } 50% { opacity: 1; transform: scale3d(var(--bounce-in-scale-max), var(--bounce-in-scale-max), var(--bounce-in-scale-max)); } 70% { transform: scale3d(var(--bounce-in-scale-min), var(--bounce-in-scale-min), var(--bounce-in-scale-min)); } 85% { transform: scale3d(var(--bounce-in-scale-final), var(--bounce-in-scale-final), var(--bounce-in-scale-final)); } 100% { transform: scale3d(1, 1, 1); } }
@keyframes bounceInDown { 0% { opacity: 0; transform: translate3d(0, calc(-1 * var(--bounce-in-translate)), 0); } 60% { opacity: 1; transform: translate3d(0, var(--bounce-in-overshoot), 0); } 80% { transform: translate3d(0, calc(-1 * var(--bounce-in-recoil)), 0); } 100% { transform: none; } }
@keyframes bounceInUp { 0% { opacity: 0; transform: translate3d(0, var(--bounce-in-translate), 0); } 60% { opacity: 1; transform: translate3d(0, calc(-1 * var(--bounce-in-overshoot)), 0); } 80% { transform: translate3d(0, var(--bounce-in-recoil), 0); } 100% { transform: none; } }
@keyframes bounceInLeft { 0% { opacity: 0; transform: translate3d(calc(-1 * var(--bounce-in-translate)), 0, 0); } 60% { opacity: 1; transform: translate3d(var(--bounce-in-overshoot), 0, 0); } 80% { transform: translate3d(calc(-1 * var(--bounce-in-recoil)), 0, 0); } 100% { transform: none; } }
@keyframes bounceInRight { 0% { opacity: 0; transform: translate3d(var(--bounce-in-translate), 0, 0); } 60% { opacity: 1; transform: translate3d(calc(-1 * var(--bounce-in-overshoot)), 0, 0); } 80% { transform: translate3d(var(--bounce-in-recoil), 0, 0); } 100% { transform: none; } }

/* Attention Animations */
@keyframes bounce { 0%, 20%, 53%, 80%, 100% { transform: translate3d(0, 0, 0); } 40%, 43% { transform: translate3d(0, -20px, 0); } 70% { transform: translate3d(0, -10px, 0); } 90% { transform: translate3d(0, -4px, 0); } }
@keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: var(--flash-opacity-low); } }
@keyframes pulse { from, to { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(var(--pulse-scale), var(--pulse-scale), var(--pulse-scale)); } }
@keyframes rubberBand { from, to { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(var(--rubber-scale-x), var(--rubber-scale-y), 1); } 40% { transform: scale3d(var(--rubber-scale-y), var(--rubber-scale-x), 1); } 50% { transform: scale3d(var(--rubber-scale-x), var(--rubber-scale-y), 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } }
@keyframes shake { from, to { transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { transform: translate3d(calc(-1 * var(--shake-translate)), 0, 0); } 20%, 40%, 60%, 80% { transform: translate3d(var(--shake-translate), 0, 0); } }
@keyframes headShake { 0% { transform: translateX(0); } 6.5% { transform: translateX(calc(-1 * var(--headshake-translate))) rotateY(calc(-1 * var(--headshake-rotate))); } 18.5% { transform: translateX(var(--headshake-translate)) rotateY(var(--headshake-rotate)); } 31.5% { transform: translateX(calc(-1 * var(--headshake-translate) / 2)) rotateY(calc(-1 * var(--headshake-rotate) / 2)); } 43.5% { transform: translateX(calc(var(--headshake-translate) / 2)) rotateY(calc(var(--headshake-rotate) / 2)); } 50% { transform: translateX(0); } }
@keyframes swing { 20% { transform: rotate3d(0, 0, 1, var(--wobble-rotate)); } 40% { transform: rotate3d(0, 0, 1, calc(-1 * var(--wobble-rotate))); } 60% { transform: rotate3d(0, 0, 1, calc(var(--wobble-rotate) / 2)); } 80% { transform: rotate3d(0, 0, 1, calc(-1 * var(--wobble-rotate) / 2)); } to { transform: rotate3d(0, 0, 1, 0); } }
@keyframes tada { from, to { transform: scale3d(1, 1, 1); } 10%, 20% { transform: scale3d(0.9, 0.9, 1) rotate3d(0, 0, 1, calc(-1 * var(--tada-rotate))); } 30%, 50%, 70%, 90% { transform: scale3d(var(--tada-scale), var(--tada-scale), 1) rotate3d(0, 0, 1, var(--tada-rotate)); } 40%, 60%, 80% { transform: scale3d(var(--tada-scale), var(--tada-scale), 1) rotate3d(0, 0, 1, calc(-1 * var(--tada-rotate))); } }
@keyframes wobble { from, to { transform: none; } 15% { transform: translate3d(calc(-1 * var(--wobble-translate)), 0, 0) rotate3d(0, 0, 1, calc(-1 * var(--wobble-rotate))); } 30% { transform: translate3d(var(--wobble-translate), 0, 0) rotate3d(0, 0, 1, var(--wobble-rotate)); } 45% { transform: translate3d(calc(-1 * var(--wobble-translate) / 1.5), 0, 0) rotate3d(0, 0, 1, calc(-1 * var(--wobble-rotate) / 1.5)); } 60% { transform: translate3d(calc(var(--wobble-translate) / 2), 0, 0) rotate3d(0, 0, 1, calc(var(--wobble-rotate) / 2)); } 75% { transform: translate3d(calc(-1 * var(--wobble-translate) / 4), 0, 0) rotate3d(0, 0, 1, calc(-1 * var(--wobble-rotate) / 4)); } }