// ===========================
// Animations
// Either use the provided class, or customize/call by copying and pasting the prefix() parameters to your own selector.
// Elements must be display block or inline-block to be animated.

// Use class "ready" or "load" to trigger animation on DOM ready or window load. Use class "click" to trigger the animation on click.
// Otherwise, add class "animate" manually to create your own triggers (not all animations require "animate" class).
// ===========================

// ===========================
// Modifiers
// These helper classes make it easy to adjust animations without needing to copy/customize the entire animation property.
// You can create custom speed classes in your own stylesheet to be applied too.
// ===========================

//Note: These class names need to match the helpers.js for reduced motion preferences to be observed.
//These also need to be repeated in the prefers-reduced-motion media query below, too.
.fastest {animation-duration: 0.25s !important;}
.faster {animation-duration: 0.5s !important;}
.fast {animation-duration: 0.75s !important;}
.slow {animation-duration: 1s !important;}
.slower {animation-duration: 2s !important;}
.slowest {animation-duration: 3s !important;}
.glacial {animation-duration: 5s !important;}

// ===========================
// Continuous
// These animations are intended to be infinitely repeated
// ===========================

//Rotate 360 degrees
[nebula-hover*="nebula-spin"]:hover,
.nebula-spin {animation: nebula-spin 2s infinite linear; will-change: transform;}
@include keyframes(nebula-spin){
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

//Fade out and in
[nebula-hover*="nebula-fade"]:hover,
.nebula-fade {animation: nebula-fade 4s infinite linear; will-change: opacity;}
@include keyframes(nebula-fade){
	0% {opacity: 1;}
	50% {opacity: 0;}
}

//Zoom out and in
[nebula-hover*="nebula-zoom"]:hover,
.nebula-zoom {animation: nebula-zoom 3s infinite easing(easeInOutQuad); will-change: opacity, transform;}
@include keyframes(nebula-zoom){
	0% {transform: scale3d(1, 1, 1); opacity: 1;}
	50% {transform: scale3d(0, 0, 0); opacity: 0;}
	100% {transform: scale3d(1, 1, 1); opacity: 1;}
}

//Wave X
[nebula-hover*="nebula-wave-x"]:hover,
.nebula-wave-x {animation: nebula-wave-x 2s infinite easing(easeInOutSine); animation-delay: -1.5s; animation-fill-mode: both; will-change: transform;}
@include keyframes(nebula-wave-x){
	0% {transform: translate3d(-20px, 0, 0);}
	50% {transform: translate3d(20px, 0, 0);}
	100% {transform: translate3d(-20px, 0, 0);}
}

//Wave Y
[nebula-hover*="nebula-wave-y"]:hover,
.nebula-wave-y {animation: nebula-wave-y 2s infinite easing(easeInOutSine); animation-fill-mode: both; animation-delay: -1.5s; will-change: transform;}
@include keyframes(nebula-wave-y){
	0% {transform: translate3d(0, -15%, 0);}
	50% {transform: translate3d(0, 15%, 0);}
	100% {transform: translate3d(0, -15%, 0);}
}

//Intensify
.nebula-intensifies {animation: nebula-intensifies 3s infinite ease-out; transform-origin: bottom center; will-change: transform;}
@keyframes nebula-intensifies {
	@for $i from 0 through 100 {
		#{$i * 1%} {
			//Swap between left/right
			$sign: -1;
			@if $i % 2 == 0 {
				$sign: 1;
			}

			//Rotate (max of 8)
			$rotation: 8;
			@if $i < 10 {
				$rotation: $i;
			}

			@if $i != 100 {
				transform: translate($sign * random(5) * 1px, $sign * random(5) * 1px);
			} @else {
				transform: translate(0, 0) rotate(0deg); //Reset on the last frame
			}
		}
	}
}

// ===========================
// One-Time
// These animations happen once.
// If using the provided class, these are triggered by adding an .animate class.
// ===========================

//Fade out
[nebula-hover*="nebula-fade-out"]:hover,
.nebula-fade-out.animate {animation: nebula-fade-out 1s easing(easeInOutQuad) forwards; will-change: opacity;}
@include keyframes(nebula-fade-out){
	0% {opacity: 1;}
	100% {opacity: 0; pointer-events: none;}
}

//Fade Out Up
[nebula-hover*="nebula-fade-out-up"]:hover,
.nebula-fade-out-up.animate {animation: nebula-fade-out-up 1s easing(easeInOutQuad) forwards; will-change: opacity, transform;}
@include keyframes(nebula-fade-out-up){
	0% {opacity: 1; transform: translate3d(0, 0, 0);}
	100% {opacity: 0; transform: translate3d(0, -40px, 0); pointer-events: none;}
}

//Fade Out Down
[nebula-hover*="nebula-fade-out-down"]:hover,
.nebula-fade-out-down.animate {animation: nebula-fade-out-down 1s easing(easeInOutQuad) forwards; will-change: opacity, transform;}
@include keyframes(nebula-fade-out-down){
	0% {opacity: 1; transform: translate3d(0, 0, 0);}
	100% {opacity: 0; transform: translate3d(0, 40px, 0); pointer-events: none;}
}

//Fade Out Left
[nebula-hover*="nebula-fade-out-left"]:hover,
.nebula-fade-out-left.animate {animation: nebula-fade-out-left 1s easing(easeInOutQuad) forwards; will-change: opacity, transform;}
@include keyframes(nebula-fade-out-left){
	0% {opacity: 1; transform: translate3d(0, 0, 0);}
	100% {opacity: 0; transform: translate3d(-40px, 0, 0); pointer-events: none;}
}

//Fade Out Right
[nebula-hover*="nebula-fade-out-right"]:hover,
.nebula-fade-out-right.animate {animation: nebula-fade-out-right 1s easing(easeInOutQuad) forwards; will-change: opacity, transform;}
@include keyframes(nebula-fade-out-right){
	0% {opacity: 1; transform: translate3d(0, 0, 0);}
	100% {opacity: 0; transform: translate3d(40px, 0, 0); pointer-events: none;}
}

//Fade in
[nebula-hover*="nebula-fade-in"]:hover,
.nebula-fade-in {opacity: 0; pointer-events: none; will-change: opacity;
	&.animate,
	&.load-animate {animation: nebula-fade-in 1s easing(easeInOutQuad) forwards; opacity: 1; pointer-events: all;}
}
@include keyframes(nebula-fade-in){
	0% {opacity: 0;} //display: block here in case element is hidden with a display: none on render.
	100% {opacity: 1;}
}

//Fade In Up
[nebula-hover*="nebula-fade-in-up"]:hover,
.nebula-fade-in-up {opacity: 0; pointer-events: none; will-change: opacity, transform;
	&.animate,
	&.load-animate {animation: nebula-fade-in-up 1.5s easing(easeOutBack) forwards; opacity: 1; pointer-events: all;}
}
@include keyframes(nebula-fade-in-up){
	0% {opacity: 0; transform: translate3d(0, 40px, 0);} //display: block here in case element is hidden with a display: none on render.
	100% {opacity: 1; transform: translate3d(0, 0, 0);}
}

//Fade In Down
[nebula-hover*="nebula-fade-in-down"]:hover,
.nebula-fade-in-down {opacity: 0; pointer-events: none; will-change: opacity, transform;
	&.animate,
	&.load-animate {animation: nebula-fade-in-down 1s easing(easeOutQuad) forwards; opacity: 1; pointer-events: all;}
}
@include keyframes(nebula-fade-in-down){
	0% {opacity: 0; transform: translate3d(0, -40px, 0);} //display: block here in case element is hidden with a display: none on render.
	100% {opacity: 1; transform: translate3d(0, 0, 0);}
}

//Fade In Left
[nebula-hover*="nebula-fade-in-left"]:hover,
.nebula-fade-in-left {opacity: 0; pointer-events: none; will-change: opacity, transform;
	&.animate,
	&.load-animate {animation: nebula-fade-in-left 1s easing(easeOutQuad) forwards; opacity: 1; pointer-events: all;}
}
@include keyframes(nebula-fade-in-left){
	0% {opacity: 0; transform: translate3d(-40px, 0, 0);} //display: block here in case element is hidden with a display: none on render.
	100% {opacity: 1; transform: translate3d(0, 0, 0);}
}

//Fade In Right
[nebula-hover*="nebula-fade-in-right"]:hover,
.nebula-fade-in-right {opacity: 0; pointer-events: none; will-change: opacity, transform;
	&.animate,
	&.load-animate {animation: nebula-fade-in-right 1s easing(easeOutQuad) forwards; opacity: 1; pointer-events: all;}
}
@include keyframes(nebula-fade-in-right){
	0% {opacity: 0; transform: translate3d(40px, 0, 0);} //display: block here in case element is hidden with a display: none on render.
	100% {opacity: 1; transform: translate3d(0, 0, 0);}
}

//Reveal In
[nebula-hover*="nebula-reveal-in"]:hover,
.nebula-reveal-in {opacity: 0; pointer-events: none; will-change: opacity;
	&.animate,
	&.load-animate {animation: nebula-reveal-in 2.5s easing(easeOutQuad) forwards; opacity: 1; pointer-events: all;}
}
@include keyframes(nebula-reveal-in){
	0% {mask: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 60%) 150% 0 / 300% no-repeat; transform: translate3d(50px, 0, 0); opacity: 0;}
	60% {transform: translate3d(0, 0, 0);}
	100% {mask: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 60%) 0 0 / 300% no-repeat; opacity: 1;}
}

//Reveal Out
[nebula-hover*="nebula-reveal-out"]:hover,
.nebula-reveal-out.animate {animation: nebula-reveal-out 1.5s easing(easeInOutQuad) forwards; will-change: opacity;}
@include keyframes(nebula-reveal-out){
	0% {mask: linear-gradient(90deg, #000 25%, #000000e6 50%, #00000000) 0 / 400% no-repeat; opacity: 1;}
	100% {mask: linear-gradient(90deg, #000 25%, #000000e6 50%, #00000000) 150% 0 / 400% no-repeat; opacity: 0;}
}

//Shrink and fade out
[nebula-hover*="nebula-zoom-out"]:hover,
.nebula-zoom-out.animate {animation: nebula-zoom-out 0.5s easing(easeInOutQuad) forwards; will-change: opacity, transform;}
@include keyframes(nebula-zoom-out){
	0% {transform: scale3d(1, 1, 1); opacity: 1;}
	50% {opacity: 1;}
	100% {transform: scale3d(0, 0, 0); opacity: 0; pointer-events: none;}
}

//Grow and fade in
[nebula-hover*="nebula-zoom-in"]:hover,
.nebula-zoom-in {opacity: 0; pointer-events: none; will-change: opacity, transform;
	&.animate,
	&.load-animate {animation: nebula-zoom-in 1s easing(easeInOutQuad) forwards; opacity: 1; pointer-events: all;}
}
@include keyframes(nebula-zoom-in){
 0% {opacity: 0; transform: scale3d(0, 0, 0);}
 50% {opacity: 1; transform: scale3d(1.03, 1.03, 1.03);}
 70% {transform: scale3d(0.95, 0.95, 0.95);}
 100% {transform: scale3d(1, 1, 1);}
}

//Increase width from the center (twist contents)
[nebula-hover*="nebula-twist-in"]:hover,
.nebula-twist-in {width: 100%; transform: scale3d(0, 1, 1); pointer-events: none; overflow: hidden; will-change: transform;
	&.animate,
	&.load-animate {animation: nebula-twist-in 0.5s easing(easeInOutQuad) forwards; pointer-events: all;}
}
@include keyframes(nebula-twist-in){
	0% {transform: scale3d(0, 1, 1);}
	100% {transform: scale3d(1, 1, 1);}
}

//Decrease width from the center (hide contents)
[nebula-hover*="nebula-twist-out"]:hover,
.nebula-twist-out.animate {animation: nebula-twist-out 0.5s easing(easeInOutQuad) forwards; width: 100%; transform: scaleX(1); pointer-events: none; overflow: hidden; will-change: transform;}
@include keyframes(nebula-twist-out){
	0% {transform: scaleX(1);}
	100% {transform: scaleX(0);}
}

//Increase width from the center (stretch contents)
[nebula-hover*="nebula-stretch-in"]:hover,
.nebula-stretch-in {opacity: 0; pointer-events: none; will-change: opacity, transform;
	&.animate,
	&.load-animate {animation: nebula-stretch-in 0.5s easing(easeInOutQuad) forwards; opacity: 1; pointer-events: all;}
}
@include keyframes(nebula-stretch-in){
	0% {transform: scale3d(0, 1, 1); opacity: 0;}
	25% {opacity: 1;}
	100% {transform: scale3d(1, 1, 1);}
}

//Decrease width from the center (stretch contents)
[nebula-hover*="nebula-stretch-out"]:hover,
.nebula-stretch-out.animate {animation: nebula-stretch-out 0.5s easing(easeInOutQuad) forwards; will-change: opacity, transform;}
@include keyframes(nebula-stretch-out){
	0% {transform: scale3d(1, 1, 1);}
	66% {opacity: 1;}
	100% {transform: scale3d(0, 1, 1); opacity: 0; pointer-events: none;}
}

//Rotate in along the x-axis (vertical flip)
[nebula-hover*="nebula-flip-in-x"]:hover,
.nebula-flip-in-x {opacity: 0; pointer-events: none; will-change: opacity, transform;
	&.animate,
	&.load-animate {animation: nebula-flip-in-x 1s easing(easeInOutQuad) forwards; opacity: 1; pointer-events: all;}
}
@keyframes nebula-flip-in-x {
	0% {transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0;}
	40% {transform: perspective(400px) rotate3d(1, 0, 0, -5deg);}
	60% {transform: perspective(400px) rotate3d(1, 0, 0, 2deg); opacity: 1;}
	80% {transform: perspective(400px) rotate3d(1, 0, 0, -1deg);}
	100% {transform: perspective(400px);}
}

//Rotate in along the y-axis (horizontal flip)
[nebula-hover*="nebula-flip-in-y"]:hover,
.nebula-flip-in-y {opacity: 0; pointer-events: none; will-change: opacity, transform;
	&.animate,
	&.load-animate {animation: nebula-flip-in-y 1s easing(easeInOutQuad) forwards; opacity: 1; pointer-events: all;}
}
@keyframes nebula-flip-in-y {
	0% {transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0;}
	40% {transform: perspective(400px) rotate3d(0, 1, 0, -5deg);}
	60% {transform: perspective(400px) rotate3d(0, 1, 0, 2deg); opacity: 1;}
	80% {transform: perspective(400px) rotate3d(0, 1, 0, -1deg);}
	100% {transform: perspective(400px);}
}

//Rotate out along the x-axis (vertical flip)
[nebula-hover*="nebula-flip-out-x"]:hover,
.nebula-flip-out-x.animate {animation: nebula-flip-out-x 0.8s easing(easeInOutQuad) forwards; will-change: opacity, transform;}
@keyframes nebula-flip-out-x {
	0% {transform: perspective(400px);}
	30% {transform: perspective(400px) rotate3d(1, 0, 0, -2deg); opacity: 1;}
	100% {transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; pointer-events: none;}
}

//Rotate out along the y-axis (vertical flip)
[nebula-hover*="nebula-flip-out-y"]:hover,
.nebula-flip-out-y.animate {animation: nebula-flip-out-y 0.8s easing(easeInOutQuad) forwards; will-change: opacity, transform;}
@keyframes nebula-flip-out-y {
	0% {transform: perspective(400px);}
	30% {transform: perspective(400px) rotate3d(0, 1, 0, -2deg); opacity: 1;}
	100% {transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; pointer-events: none;}
}

//Tap (Small)
//Built-in animation trigger on click by adding class "click".
[nebula-hover*="nebula-tap"]:hover,
.nebula-tap.animate {animation: nebula-tap 0.6s easing(easeOutBack) forwards; will-change: transform;}
@include keyframes(nebula-tap){
	0% {transform: scale3d(1, 1, 1);}
	33% {transform: scale3d(0.9, 0.9, 0.9);}
	66% {transform: scale3d(1.02, 1.02, 1.02);}
	100% {transform: scale3d(1, 1, 1);}
}

//Tap (Small, "Loose")
//Built-in animation trigger on click by adding class "click".
[nebula-hover*="nebula-tap-loose"]:hover,
.nebula-tap-loose.animate {animation: nebula-tap-loose 1.1s easing(easeOutBack) forwards; will-change: transform;}
@include keyframes(nebula-tap-loose){
	0% {transform: scale3d(1, 1, 1);}
	15% {transform: scale3d(0.9, 0.9, 0.9);}
	35% {transform: scale3d(1.02, 1.02, 1.02);}
	56% {transform: scale3d(0.99, 0.99, 0.99);}
	80% {transform: scale3d(1.005, 1.005, 1.005);}
	100% {transform: scale3d(1, 1, 1);}
}

//Push (Mid)
//Built-in animation trigger on click by adding class "click".
[nebula-hover*="nebula-push"]:hover,
.nebula-push.animate {animation: nebula-push 0.6s easing(easeOutBack) forwards; will-change: transform;}
@include keyframes(nebula-push){
	0% {transform: scale3d(1, 1, 1);}
	33% {transform: scale3d(0.8, 0.8, 0.8);}
	66% {transform: scale3d(1.04, 1.04, 1.04);}
	100% {transform: scale3d(1, 1, 1);}
}

//Push (Mid, "Loose")
//Built-in animation trigger on click by adding class "click".
[nebula-hover*="nebula-push-loose"]:hover,
.nebula-push-loose.animate {animation: nebula-push-loose 1.1s easing(easeOutBack) forwards; will-change: transform;}
@include keyframes(nebula-push-loose){
	0% {transform: scale3d(1, 1, 1);}
	15% {transform: scale3d(0.8, 0.8, 0.8);}
	35% {transform: scale3d(1.06, 1.06, 1.06);}
	56% {transform: scale3d(0.98, 0.98, 0.98);}
	80% {transform: scale3d(1.01, 1.01, 1.01);}
	100% {transform: scale3d(1, 1, 1);}
}

//Shove (Large)
//Built-in animation trigger on click by adding class "click".
[nebula-hover*="nebula-shove"]:hover,
.nebula-shove.animate {animation: nebula-shove 0.6s easing(easeOutBack) forwards; will-change: transform;}
@include keyframes(nebula-shove){
	0% {transform: scale3d(1, 1, 1);}
	33% {transform: scale3d(0.7, 0.7, 0.7);}
	66% {transform: scale3d(1.06, 1.06, 1.06);}
	100% {transform: scale3d(1, 1, 1);}
}

//Shove (Large, "Loose")
//Built-in animation trigger on click by adding class "click".
[nebula-hover*="nebula-shove-loose"]:hover,
.nebula-shove-loose.animate {animation: nebula-shove-loose 1.05s easing(easeOutBack) forwards; will-change: transform;}
@include keyframes(nebula-shove-loose){
	0% {transform: scale3d(1, 1, 1);}
	15% {transform: scale3d(0.7, 0.7, 0.7);}
	35% {transform: scale3d(1.12, 1.12, 1.12);}
	56% {transform: scale3d(0.97, 0.97, 0.97);}
	80% {transform: scale3d(1.02, 1.02, 1.02);}
	100% {transform: scale3d(1, 1, 1);}
}

//Shove Fade Out
[nebula-hover*="nebula-shove-out"]:hover,
.nebula-shove-out.animate {animation: nebula-shove-out 1s easing(easeOutQuad) forwards; will-change: opacity, transform;}
@include keyframes(nebula-shove-out){
	0% {transform: scale3d(1, 1, 1);}
	50% {transform: scale3d(0.7, 0.7, 0.7);}
	100% {opacity: 0; transform: scale3d(0, 0, 0);}
}

//Tug (Small)
//Built-in animation trigger on click by adding class "click".
[nebula-hover*="nebula-tug"]:hover,
.nebula-tug.animate {animation: nebula-tug 0.6s easing(easeOutBack) forwards; will-change: transform;}
@include keyframes(nebula-tug){
	0% {transform: scale3d(1, 1, 1);}
	33% {transform: scale3d(1.1, 1.1, 1.1);}
	66% {transform: scale3d(0.98, 0.98, 0.98);}
	100% {transform: scale3d(1, 1, 1);}
}

//Tug (Small, "Loose")
//Built-in animation trigger on click by adding class "click".
[nebula-hover*="nebula-tug-loose"]:hover,
.nebula-tug-loose.animate {animation: nebula-tug-loose 1.1s easing(easeOutBack) forwards; will-change: transform;}
@include keyframes(nebula-tug-loose){
	0% {transform: scale3d(1, 1, 1);}
	15% {transform: scale3d(1.1, 1.1, 1.1);}
	35% {transform: scale3d(0.98, 0.98, 0.98);}
	56% {transform: scale3d(1.01, 1.01, 1.01);}
	80% {transform: scale3d(0.995, 0.995, 0.995);}
	100% {transform: scale3d(1, 1, 1);}
}

//Pull (Mid)
//Built-in animation trigger on click by adding class "click".
[nebula-hover*="nebula-pull"]:hover,
.nebula-pull.animate {animation: nebula-pull 0.6s easing(easeOutBack) forwards; will-change: transform;}
@include keyframes(nebula-pull){
	0% {transform: scale3d(1, 1, 1);}
	33% {transform: scale3d(1.2, 1.2, 1.2);}
	66% {transform: scale3d(0.96, 0.96, 0.96);}
	100% {transform: scale3d(1, 1, 1);}
}

//Pull (Mid, "Loose")
//Built-in animation trigger on click by adding class "click".
[nebula-hover*="nebula-pull-loose"]:hover,
.nebula-pull-loose.animate {animation: nebula-pull-loose 1.1s easing(easeOutBack) forwards; will-change: transform;}
@include keyframes(nebula-pull-loose){
	0% {transform: scale3d(1, 1, 1);}
	15% {transform: scale3d(1.2, 1.2, 1.2);}
	35% {transform: scale3d(0.94, 0.94, 0.94);}
	56% {transform: scale3d(1.02, 1.02, 1.02);}
	80% {transform: scale3d(0.99, 0.99, 0.99);}
	100% {transform: scale3d(1, 1, 1);}
}

//Pull In
.nebula-pull-in {opacity: 0; pointer-events: none; will-change: opacity, transform;
	&.animate,
	&.load-animate {animation: nebula-pull-in 1.2s easing(easeOutBack) forwards; opacity: 1; pointer-events: all;}
}
@include keyframes(nebula-pull-in){
	0% {opacity: 0; transform: scale3d(1, 1, 1);}
	15% {transform: scale3d(1.2, 1.2, 1.2);}
	35% {transform: scale3d(0.94, 0.94, 0.94);}
	56% {opacity: 1; transform: scale3d(1.02, 1.02, 1.02);}
	80% {opacity: 1; transform: scale3d(0.99, 0.99, 0.99);}
	100% {opacity: 1; transform: scale3d(1, 1, 1);}
}

//Thrust (Large)
//Built-in animation trigger on click by adding class "click".
[nebula-hover*="nebula-thrust"]:hover,
.nebula-thrust.animate {animation: nebula-thrust 0.6s easing(easeOutBack) forwards; will-change: transform;}
@include keyframes(nebula-thrust){
	0% {transform: scale3d(1, 1, 1);}
	33% {transform: scale3d(1.4, 1.4, 1.4);}
	66% {transform: scale3d(0.94, 0.94, 0.94);}
	100% {transform: scale3d(1, 1, 1);}
}

//Thrust (Large, "Loose")
//Built-in animation trigger on click by adding class "click".
[nebula-hover*="nebula-thrust-loose"]:hover,
.nebula-thrust-loose.animate {animation: nebula-thrust-loose 1.05s easing(easeOutBack) forwards; will-change: transform;}
@include keyframes(nebula-thrust-loose){
	0% {transform: scale3d(1, 1, 1);}
	15% {transform: scale3d(1.3, 1.3, 1.3);}
	35% {transform: scale3d(0.88, 0.88, 0.88);}
	56% {transform: scale3d(1.03, 1.03, 1.03);}
	80% {transform: scale3d(0.98, 0.98, 0.98);}
	100% {transform: scale3d(1, 1, 1);}
}

//Thrust In
.nebula-thrust-in {opacity: 0; pointer-events: none; will-change: opacity, transform;
	&.animate,
	&.load-animate {animation: nebula-thrust-in 1.2s easing(easeOutBack) forwards; opacity: 1; pointer-events: all;}
}
@include keyframes(nebula-thrust-in){
	0% {opacity: 0; transform: scale3d(1, 1, 1);}
	15% {transform: scale3d(1.3, 1.3, 1.3);}
	35% {transform: scale3d(0.88, 0.88, 0.88);}
	56% {opacity: 1; transform: scale3d(1.03, 1.03, 1.03);}
	80% {opacity: 1; transform: scale3d(0.98, 0.98, 0.98);}
	100% {opacity: 1; transform: scale3d(1, 1, 1);}
}

//Bounce (Jump up into the air and return)
[nebula-hover*="nebula-bounce"]:hover,
.nebula-bounce.animate {animation: nebula-bounce 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; transform-origin: bottom; will-change: transform;}
@include keyframes(nebula-bounce){
	0% {transform: scale3d(1, 1, 1) translate3d(0, 0, 0);}
	8% {transform: scale3d(1.1, 0.85, 1) translate3d(0, 0, 0);}
	14% {transform: scale3d(0.95, 1.05, 1) translate3d(0, -10px, 0);}
	30% {transform: scale3d(1, 1, 1) translate3d(0, -80px, 0);}
	34% {transform: scale3d(1, 1, 1) translate3d(0, -80px, 0);}
	50% {transform: scale3d(1, 1, 1) translate3d(0, 0, 0);}
	58% {transform: scale3d(1.05, 0.9, 1) translate3d(0, 0, 0);}
	67% {transform: scale3d(0.98, 1.02, 1) translate3d(0, 0, 0);}
	75% {transform: scale3d(1, 1, 1) translate3d(0, 0, 0);}
	100% {transform: scale3d(1, 1, 1) translate3d(0, 0, 0);}
}

//Jump (Jump out towards the viewer and return)
[nebula-hover*="nebula-jump"]:hover,
.nebula-jump.animate {animation: nebula-jump 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; will-change: transform;}
@include keyframes(nebula-jump){
	0% {transform: scale3d(1, 1, 1);}
	8% {transform: scale3d(0.90, 0.80, 1);}
	14% {transform: scale3d(0.99, 1.01, 1);}
	30% {transform: scale3d(1.3, 1.3, 1);}
	34% {transform: scale3d(1.3, 1.3, 1);}
	50% {transform: scale3d(1, 1, 1);}
	58% {transform: scale3d(1.01, 0.99, 1);}
	67% {transform: scale3d(0.99, 1.01, 1);}
	75% {transform: scale3d(1, 1, 1);}
	100% {transform: scale3d(1, 1, 1);}
}

//Fall In
.nebula-fall-in {opacity: 0; pointer-events: none; will-change: opacity, transform;
	&.animate,
	&.load-animate {animation: nebula-fall-in 1.3s easing(easeOutBack) forwards; opacity: 1; pointer-events: all;}
}
@include keyframes(nebula-fall-in){
	0% {opacity: 0; transform: scale3d(2, 2, 2);}
	40% {transform: scale3d(0.88, 0.88, 0.88);}
	56% {transform: scale3d(1.03, 1.03, 1.03);}
	80% {transform: scale3d(0.98, 0.98, 0.98);}
	100% {opacity: 1; transform: scale3d(1, 1, 1);}
}

//Shake left and right
[nebula-hover*="nebula-shake"]:hover,
.nebula-shake.animate {animation: nebula-shake 0.5s linear; will-change: transform;}
@include keyframes(nebula-shake){
	0% {transform: translate3d(0, 0, 0);}
	20%, 60% {transform: translate3d(-10px, 0, 0);}
	40%, 80% {transform: translate3d(10px, 0, 0);}
}

//Shake left and right.
[nebula-hover*="nebula-nod"]:hover,
.nebula-nod.animate {animation: nebula-nod 0.5s linear; will-change: transform;}
@include keyframes(nebula-nod){
	0% {transform: translate3d(0, 0, 0);}
	20%, 60% {transform: translate3d(0, -10px, 0);}
	40%, 80% {transform: translate3d(0, 10px, 0);}
}

// ===========================
// Hovers
// These animations happen on hover.
// ===========================

//Swell
[nebula-hover*="nebula-swell"]:hover,
.nebula-swell {transition: transform 0.4s easing(easeOutBack); will-change: transform;
	&:hover {transform: scale3d(1.05, 1.05, 1.05);}
}

//Grow
[nebula-hover*="nebula-grow"]:hover,
.nebula-grow {transition: transform 0.4s easing(easeOutBack); will-change: transform;
	&:hover {transform: scale3d(1.2, 1.2, 1.2);}
}

// ===========================
// Animation Exclusions
// Do not animate in certain situations.
// ===========================

//For bot traffic, immediately show all load-based animations (skipping the animation)
.bot-visitor .load-animate {animation: none; opacity: 1; pointer-events: all;}

//Accommodate users who prefer less motion (Note: this may not affect JavaScript animations)
@media ( prefers-reduced-motion: reduce ){
	*,
	::before,
	::after {animation-duration: 0.001s !important; transition-duration: 0.001s !important; animation-iteration-count: 1 !important;} //Override all CSS animations

	.fastest,
	.faster,
	.fast,
	.slow,
	.slower,
	.slowest,
	.glacial {animation-duration: 0.001s !important;}
}