// Base animations ===================================================================
@keyframes load {
	0% {
		transform: scale3d(.5,.5,.5) translate3d(0,10em,0);
		opacity: 0;
	}
	50% { transform: scale3d(1.02,1.02,1.02); }
	80% { transform: scale3d(.98,.98,.98) }
}

@keyframes wobble {
	0%, 100% { transform: rotate3d(0,0,1,-5deg); }
	50% { transform: rotate3d(0,0,1,5deg); }
}

@keyframes blink {
	0%, 10%, 100% { transform: scale3d(1,1,1); }
	5% { transform: scale3d(1,0,1); }
}

@keyframes highlighter {
	0% {
		transform: scale3d(0,0,0);
		opacity: 0;
	}
	15% {
		transform: scale3d(1,1,1);
		opacity: 1;
	}
	20%, 100% {
		transform: scale3d(1.1,1.1,1.1);
		opacity: 0;
	}
}

@keyframes highlight-light-on-dark {
	5%, 20% {
		background: $gold;
		box-shadow: -.1em 0 $gold, .1em 0 $gold;
	}
	0%, 25%, 100% {
		background: rgba($gold, 0);
		box-shadow: -.1em 0 rgba($gold, 0), .1em 0 rgba($gold, 0);
	}
}

@keyframes highlight-dark-on-light {
	5%, 20% {
		background: $gold;
		color: $black;
		box-shadow: -.1em 0 $gold, .1em 0 $gold;
	}
	0%, 25%, 100% {
		background: rgba($gold, 0);
		color: $gold;
		box-shadow: -.1em 0 rgba($gold, 0), .1em 0 rgba($gold, 0);
	}
}


// Modifiers =========================================================================
@keyframes angry {
	0%, 40% { transform: translate3d(0,0,0); }
	50%, 60%, 70% { transform: translate3d(-2%,0,0); }
	55%, 65%, 75% { transform: translate3d(2%,0,0); }
}

@keyframes ghost {
	0%, 100% { border-radius: 50% 50% 35% 35%; }
	10% {
		border-radius: 50%;
		transform: scale3d(.7,.7,.7);
		transform-origin: top right;
	}
}

@keyframes hungry {
	33% { transform: scale3d(.8,1,1); }
	66% { transform: scale3d(1,.8,1); }
}

@keyframes hyper {
	0%, 20%, 90%, 100% { transform: none; }
	5% { transform: scale3d(1,.8,1); }
	10% { transform: translate3d(0,-5%,0); }
	30%, 50%, 70% { transform: rotate3d(0,0,1,-2deg); }
	40%, 60%, 80% { transform: rotate3d(0,0,1,2deg); }
}

@keyframes nervous {
	0%, 50%, 100% { transform: scale3d(1,1,1); }
	25%, 75% { transform: scale3d(1,.8,1); }
}

@keyframes jackolantern {
	0%, 50%, 100% { opacity: 1; }
	30%, 70% { opacity: .9; }
	10% { opacity: .7; }
	55% { opacity: 1; }
	85% { opacity: .8; }
}

@keyframes spin {
	100% { transform: rotate(1turn); }
}