/* PS UX Builder Addons — Animation Engine */

html.ps-uxb-js .ps-uxb-anim--pending {
	opacity: 0;
	will-change: opacity, transform;
}

.ps-uxb-anim--run {
	animation-duration: var(--ps-anim-duration, 700ms);
	animation-delay: var(--ps-anim-delay, 0ms);
	animation-timing-function: var(--ps-anim-easing, ease-out);
	animation-fill-mode: both;
}

.ps-uxb-anim--run[data-ps-anim="fade"]         { animation-name: psUxbFade; }
.ps-uxb-anim--run[data-ps-anim="fade-up"]      { animation-name: psUxbFadeUp; }
.ps-uxb-anim--run[data-ps-anim="fade-down"]    { animation-name: psUxbFadeDown; }
.ps-uxb-anim--run[data-ps-anim="fade-left"]    { animation-name: psUxbFadeLeft; }
.ps-uxb-anim--run[data-ps-anim="fade-right"]   { animation-name: psUxbFadeRight; }
.ps-uxb-anim--run[data-ps-anim="slide-up"]     { animation-name: psUxbSlideUp; }
.ps-uxb-anim--run[data-ps-anim="slide-down"]   { animation-name: psUxbSlideDown; }
.ps-uxb-anim--run[data-ps-anim="slide-left"]   { animation-name: psUxbSlideLeft; }
.ps-uxb-anim--run[data-ps-anim="slide-right"]  { animation-name: psUxbSlideRight; }
.ps-uxb-anim--run[data-ps-anim="zoom-in"]      { animation-name: psUxbZoomIn; }
.ps-uxb-anim--run[data-ps-anim="zoom-out"]     { animation-name: psUxbZoomOut; }
.ps-uxb-anim--run[data-ps-anim="flip-x"]       { animation-name: psUxbFlipX; }
.ps-uxb-anim--run[data-ps-anim="flip-y"]       { animation-name: psUxbFlipY; }
.ps-uxb-anim--run[data-ps-anim="rotate-in"]    { animation-name: psUxbRotateIn; }
.ps-uxb-anim--run[data-ps-anim="rotate-left"]  { animation-name: psUxbRotateLeft; }
.ps-uxb-anim--run[data-ps-anim="rotate-right"] { animation-name: psUxbRotateRight; }
.ps-uxb-anim--run[data-ps-anim="bounce-in"]    { animation-name: psUxbBounceIn; }
.ps-uxb-anim--run[data-ps-anim="bounce-up"]    { animation-name: psUxbBounceUp; }
.ps-uxb-anim--run[data-ps-anim="blur-in"]      { animation-name: psUxbBlurIn; }
.ps-uxb-anim--run[data-ps-anim="skew-in"]      { animation-name: psUxbSkewIn; }

/* Animate.css-inspired entrance effects. Names are kept plugin-prefixed so
 * the global engine does not depend on a second copy of Animate.css. */
.ps-uxb-anim--run[data-ps-anim="animate-bounce"]              { animation-name: psUxbAnimateBounce; }
.ps-uxb-anim--run[data-ps-anim="animate-flash"]               { animation-name: psUxbAnimateFlash; }
.ps-uxb-anim--run[data-ps-anim="animate-pulse"]               { animation-name: psUxbAnimatePulse; }
.ps-uxb-anim--run[data-ps-anim="animate-rubber-band"]         { animation-name: psUxbAnimateRubberBand; }
.ps-uxb-anim--run[data-ps-anim="animate-shake-x"]             { animation-name: psUxbAnimateShakeX; }
.ps-uxb-anim--run[data-ps-anim="animate-shake-y"]             { animation-name: psUxbAnimateShakeY; }
.ps-uxb-anim--run[data-ps-anim="animate-swing"]               { animation-name: psUxbAnimateSwing; transform-origin: top center; }
.ps-uxb-anim--run[data-ps-anim="animate-tada"]                { animation-name: psUxbAnimateTada; }
.ps-uxb-anim--run[data-ps-anim="animate-wobble"]              { animation-name: psUxbAnimateWobble; }
.ps-uxb-anim--run[data-ps-anim="animate-heart-beat"]          { animation-name: psUxbAnimateHeartBeat; }
.ps-uxb-anim--run[data-ps-anim="animate-back-in-down"]        { animation-name: psUxbAnimateBackInDown; }
.ps-uxb-anim--run[data-ps-anim="animate-back-in-left"]        { animation-name: psUxbAnimateBackInLeft; }
.ps-uxb-anim--run[data-ps-anim="animate-back-in-right"]       { animation-name: psUxbAnimateBackInRight; }
.ps-uxb-anim--run[data-ps-anim="animate-back-in-up"]          { animation-name: psUxbAnimateBackInUp; }
.ps-uxb-anim--run[data-ps-anim="animate-bounce-in-left"]      { animation-name: psUxbAnimateBounceInLeft; }
.ps-uxb-anim--run[data-ps-anim="animate-bounce-in-right"]     { animation-name: psUxbAnimateBounceInRight; }
.ps-uxb-anim--run[data-ps-anim="animate-fade-in-down-big"]    { animation-name: psUxbAnimateFadeInDownBig; }
.ps-uxb-anim--run[data-ps-anim="animate-fade-in-left-big"]    { animation-name: psUxbAnimateFadeInLeftBig; }
.ps-uxb-anim--run[data-ps-anim="animate-fade-in-right-big"]   { animation-name: psUxbAnimateFadeInRightBig; }
.ps-uxb-anim--run[data-ps-anim="animate-fade-in-up-big"]      { animation-name: psUxbAnimateFadeInUpBig; }
.ps-uxb-anim--run[data-ps-anim="animate-flip-in-x"]           { animation-name: psUxbAnimateFlipInX; }
.ps-uxb-anim--run[data-ps-anim="animate-flip-in-y"]           { animation-name: psUxbAnimateFlipInY; }
.ps-uxb-anim--run[data-ps-anim="animate-light-speed-in-left"] { animation-name: psUxbAnimateLightSpeedInLeft; }
.ps-uxb-anim--run[data-ps-anim="animate-light-speed-in-right"] { animation-name: psUxbAnimateLightSpeedInRight; }
.ps-uxb-anim--run[data-ps-anim="animate-rotate-in-down-left"]  { animation-name: psUxbAnimateRotateInDownLeft; }
.ps-uxb-anim--run[data-ps-anim="animate-rotate-in-down-right"] { animation-name: psUxbAnimateRotateInDownRight; }
.ps-uxb-anim--run[data-ps-anim="animate-rotate-in-up-left"]    { animation-name: psUxbAnimateRotateInUpLeft; }
.ps-uxb-anim--run[data-ps-anim="animate-rotate-in-up-right"]   { animation-name: psUxbAnimateRotateInUpRight; }
.ps-uxb-anim--run[data-ps-anim="animate-jack-in-the-box"]      { animation-name: psUxbAnimateJackInTheBox; }
.ps-uxb-anim--run[data-ps-anim="animate-roll-in"]              { animation-name: psUxbAnimateRollIn; }
.ps-uxb-anim--run[data-ps-anim="animate-zoom-in-down"]         { animation-name: psUxbAnimateZoomInDown; }
.ps-uxb-anim--run[data-ps-anim="animate-zoom-in-left"]         { animation-name: psUxbAnimateZoomInLeft; }
.ps-uxb-anim--run[data-ps-anim="animate-zoom-in-right"]        { animation-name: psUxbAnimateZoomInRight; }
.ps-uxb-anim--run[data-ps-anim="animate-zoom-in-up"]           { animation-name: psUxbAnimateZoomInUp; }
.ps-uxb-anim--run[data-ps-anim="animate-slide-in-down"]        { animation-name: psUxbAnimateSlideInDown; }
.ps-uxb-anim--run[data-ps-anim="animate-slide-in-left"]        { animation-name: psUxbAnimateSlideInLeft; }
.ps-uxb-anim--run[data-ps-anim="animate-slide-in-right"]       { animation-name: psUxbAnimateSlideInRight; }
.ps-uxb-anim--run[data-ps-anim="animate-slide-in-up"]          { animation-name: psUxbAnimateSlideInUp; }

@keyframes psUxbFade       { from { opacity: 0; } to { opacity: 1; } }
@keyframes psUxbFadeUp     { from { opacity: 0; transform: translate3d(0, 40px, 0); }  to { opacity: 1; transform: none; } }
@keyframes psUxbFadeDown   { from { opacity: 0; transform: translate3d(0, -40px, 0); } to { opacity: 1; transform: none; } }
@keyframes psUxbFadeLeft   { from { opacity: 0; transform: translate3d(-40px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes psUxbFadeRight  { from { opacity: 0; transform: translate3d(40px, 0, 0); }  to { opacity: 1; transform: none; } }
@keyframes psUxbSlideUp    { from { opacity: 0; transform: translate3d(0, 100%, 0); }  to { opacity: 1; transform: none; } }
@keyframes psUxbSlideDown  { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } }
@keyframes psUxbSlideLeft  { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes psUxbSlideRight { from { opacity: 0; transform: translate3d(100%, 0, 0); }  to { opacity: 1; transform: none; } }
@keyframes psUxbZoomIn     { from { opacity: 0; transform: scale3d(.7, .7, .7); }       to { opacity: 1; transform: none; } }
@keyframes psUxbZoomOut    { from { opacity: 0; transform: scale3d(1.25, 1.25, 1.25); } to { opacity: 1; transform: none; } }
@keyframes psUxbFlipX      { from { opacity: 0; transform: perspective(800px) rotateX(60deg); } to { opacity: 1; transform: perspective(800px) rotateX(0); } }
@keyframes psUxbFlipY      { from { opacity: 0; transform: perspective(800px) rotateY(60deg); } to { opacity: 1; transform: perspective(800px) rotateY(0); } }
@keyframes psUxbRotateIn   { from { opacity: 0; transform: rotate(-180deg) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes psUxbRotateLeft { from { opacity: 0; transform: rotate(-25deg) translate3d(-40px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes psUxbRotateRight { from { opacity: 0; transform: rotate(25deg) translate3d(40px, 0, 0); }  to { opacity: 1; transform: none; } }
@keyframes psUxbBlurIn     { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } }
@keyframes psUxbSkewIn     { from { opacity: 0; transform: skewX(-14deg) translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }

@keyframes psUxbBounceIn {
	0%   { opacity: 0; transform: scale3d(.3, .3, .3); }
	40%  { opacity: 1; transform: scale3d(1.08, 1.08, 1.08); }
	70%  { transform: scale3d(.96, .96, .96); }
	100% { opacity: 1; transform: none; }
}

@keyframes psUxbBounceUp {
	0%   { opacity: 0; transform: translate3d(0, 60px, 0); }
	55%  { opacity: 1; transform: translate3d(0, -12px, 0); }
	75%  { transform: translate3d(0, 6px, 0); }
	100% { opacity: 1; transform: none; }
}

@keyframes psUxbAnimateBounce {
	0%, 20%, 53%, 80%, 100% { opacity: 1; transform: translate3d(0, 0, 0); }
	40%, 43% { transform: translate3d(0, -30px, 0); }
	70% { transform: translate3d(0, -15px, 0); }
	90% { transform: translate3d(0, -4px, 0); }
}

@keyframes psUxbAnimateFlash {
	0%, 50%, 100% { opacity: 1; }
	25%, 75% { opacity: 0; }
}

@keyframes psUxbAnimatePulse {
	0% { opacity: 1; transform: scale3d(1, 1, 1); }
	50% { transform: scale3d(1.05, 1.05, 1.05); }
	100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes psUxbAnimateRubberBand {
	0% { opacity: 1; transform: scale3d(1, 1, 1); }
	30% { transform: scale3d(1.25, .75, 1); }
	40% { transform: scale3d(.75, 1.25, 1); }
	50% { transform: scale3d(1.15, .85, 1); }
	65% { transform: scale3d(.95, 1.05, 1); }
	75% { transform: scale3d(1.05, .95, 1); }
	100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes psUxbAnimateShakeX {
	0%, 100% { opacity: 1; transform: translate3d(0, 0, 0); }
	10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); }
	20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); }
}

@keyframes psUxbAnimateShakeY {
	0%, 100% { opacity: 1; transform: translate3d(0, 0, 0); }
	10%, 30%, 50%, 70%, 90% { transform: translate3d(0, -10px, 0); }
	20%, 40%, 60%, 80% { transform: translate3d(0, 10px, 0); }
}

@keyframes psUxbAnimateSwing {
	0% { opacity: 1; transform: rotate3d(0, 0, 1, 0deg); }
	20% { transform: rotate3d(0, 0, 1, 15deg); }
	40% { transform: rotate3d(0, 0, 1, -10deg); }
	60% { transform: rotate3d(0, 0, 1, 5deg); }
	80% { transform: rotate3d(0, 0, 1, -5deg); }
	100% { opacity: 1; transform: rotate3d(0, 0, 1, 0deg); }
}

@keyframes psUxbAnimateTada {
	0% { opacity: 1; transform: scale3d(1, 1, 1); }
	10%, 20% { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); }
	30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
	40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
	100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes psUxbAnimateWobble {
	0% { opacity: 1; transform: translate3d(0, 0, 0); }
	15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
	30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
	45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
	60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
	75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
	100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes psUxbAnimateHeartBeat {
	0% { opacity: 1; transform: scale(1); }
	14% { transform: scale(1.3); }
	28% { transform: scale(1); }
	42% { transform: scale(1.3); }
	70%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes psUxbAnimateBackInDown {
	0% { opacity: .7; transform: translateY(-1200px) scale(.7); }
	80% { opacity: .7; transform: translateY(0) scale(.7); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes psUxbAnimateBackInLeft {
	0% { opacity: .7; transform: translateX(-1200px) scale(.7); }
	80% { opacity: .7; transform: translateX(0) scale(.7); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes psUxbAnimateBackInRight {
	0% { opacity: .7; transform: translateX(1200px) scale(.7); }
	80% { opacity: .7; transform: translateX(0) scale(.7); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes psUxbAnimateBackInUp {
	0% { opacity: .7; transform: translateY(1200px) scale(.7); }
	80% { opacity: .7; transform: translateY(0) scale(.7); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes psUxbAnimateBounceInLeft {
	0% { opacity: 0; transform: translateX(-3000px) scale(.1); }
	60% { opacity: 1; transform: translateX(25px) scale(.9); }
	80% { transform: translateX(-10px) scale(.95); }
	100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes psUxbAnimateBounceInRight {
	0% { opacity: 0; transform: translateX(3000px) scale(.1); }
	60% { opacity: 1; transform: translateX(-25px) scale(.9); }
	80% { transform: translateX(10px) scale(.95); }
	100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes psUxbAnimateFadeInDownBig {
	0% { opacity: 0; transform: translate3d(0, -2000px, 0); }
	100% { opacity: 1; transform: none; }
}

@keyframes psUxbAnimateFadeInLeftBig {
	0% { opacity: 0; transform: translate3d(-2000px, 0, 0); }
	100% { opacity: 1; transform: none; }
}

@keyframes psUxbAnimateFadeInRightBig {
	0% { opacity: 0; transform: translate3d(2000px, 0, 0); }
	100% { opacity: 1; transform: none; }
}

@keyframes psUxbAnimateFadeInUpBig {
	0% { opacity: 0; transform: translate3d(0, 2000px, 0); }
	100% { opacity: 1; transform: none; }
}

@keyframes psUxbAnimateFlipInX {
	0% { opacity: 0; transform: perspective(400px) rotate3d(1, 0, 0, 90deg); }
	40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); }
	60% { opacity: 1; transform: perspective(400px) rotate3d(1, 0, 0, 10deg); }
	80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
	100% { opacity: 1; transform: perspective(400px); }
}

@keyframes psUxbAnimateFlipInY {
	0% { opacity: 0; transform: perspective(400px) rotate3d(0, 1, 0, 90deg); }
	40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); }
	60% { opacity: 1; transform: perspective(400px) rotate3d(0, 1, 0, 10deg); }
	80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
	100% { opacity: 1; transform: perspective(400px); }
}

@keyframes psUxbAnimateLightSpeedInLeft {
	0% { opacity: 0; transform: translate3d(-100%, 0, 0) skewX(30deg); }
	60% { opacity: 1; transform: skewX(-20deg); }
	80% { transform: skewX(5deg); }
	100% { opacity: 1; transform: none; }
}

@keyframes psUxbAnimateLightSpeedInRight {
	0% { opacity: 0; transform: translate3d(100%, 0, 0) skewX(-30deg); }
	60% { opacity: 1; transform: skewX(20deg); }
	80% { transform: skewX(-5deg); }
	100% { opacity: 1; transform: none; }
}

@keyframes psUxbAnimateRotateInDownLeft {
	0% { opacity: 0; transform: rotate3d(0, 0, 1, -45deg); transform-origin: left bottom; }
	100% { opacity: 1; transform: none; transform-origin: center; }
}

@keyframes psUxbAnimateRotateInDownRight {
	0% { opacity: 0; transform: rotate3d(0, 0, 1, 45deg); transform-origin: right bottom; }
	100% { opacity: 1; transform: none; transform-origin: center; }
}

@keyframes psUxbAnimateRotateInUpLeft {
	0% { opacity: 0; transform: rotate3d(0, 0, 1, 45deg); transform-origin: left bottom; }
	100% { opacity: 1; transform: none; transform-origin: center; }
}

@keyframes psUxbAnimateRotateInUpRight {
	0% { opacity: 0; transform: rotate3d(0, 0, 1, -90deg); transform-origin: right bottom; }
	100% { opacity: 1; transform: none; transform-origin: center; }
}

@keyframes psUxbAnimateJackInTheBox {
	0% { opacity: 0; transform: scale(.1) rotate(30deg); transform-origin: center bottom; }
	50% { transform: rotate(-10deg); }
	70% { transform: rotate(3deg); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes psUxbAnimateRollIn {
	0% { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
	100% { opacity: 1; transform: none; }
}

@keyframes psUxbAnimateZoomInDown {
	0% { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); }
	60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); }
	100% { opacity: 1; transform: none; }
}

@keyframes psUxbAnimateZoomInLeft {
	0% { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); }
	60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); }
	100% { opacity: 1; transform: none; }
}

@keyframes psUxbAnimateZoomInRight {
	0% { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); }
	60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); }
	100% { opacity: 1; transform: none; }
}

@keyframes psUxbAnimateZoomInUp {
	0% { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); }
	60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); }
	100% { opacity: 1; transform: none; }
}

@keyframes psUxbAnimateSlideInDown {
	0% { opacity: 0; transform: translate3d(0, -100%, 0); visibility: visible; }
	100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes psUxbAnimateSlideInLeft {
	0% { opacity: 0; transform: translate3d(-100%, 0, 0); visibility: visible; }
	100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes psUxbAnimateSlideInRight {
	0% { opacity: 0; transform: translate3d(100%, 0, 0); visibility: visible; }
	100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes psUxbAnimateSlideInUp {
	0% { opacity: 0; transform: translate3d(0, 100%, 0); visibility: visible; }
	100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---------- Hover ---------- */

.ps-uxb-hover-grow,
.ps-uxb-hover-shrink,
.ps-uxb-hover-float,
.ps-uxb-hover-sink,
.ps-uxb-hover-rotate,
.ps-uxb-hover-tilt,
.ps-uxb-hover-shadow {
	transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
}

.ps-uxb-hover-grow:hover   { transform: scale(1.06); }
.ps-uxb-hover-shrink:hover { transform: scale(.94); }
.ps-uxb-hover-float:hover  { transform: translateY(-8px); }
.ps-uxb-hover-sink:hover   { transform: translateY(8px); }
.ps-uxb-hover-rotate:hover { transform: rotate(3deg); }
.ps-uxb-hover-tilt:hover   { transform: perspective(800px) rotateX(6deg) rotateY(-6deg) scale(1.02); }
.ps-uxb-hover-shadow:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, .18); }
.ps-uxb-hover-pulse:hover  { animation: psUxbPulse .9s ease-in-out infinite; }
.ps-uxb-hover-wobble:hover { animation: psUxbWobble .8s ease-in-out; }

.ps-uxb-hover-shine {
	position: relative;
	overflow: hidden;
}

.ps-uxb-hover-shine::after {
	content: "";
	position: absolute;
	top: 0;
	left: -75%;
	width: 50%;
	height: 100%;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-20deg);
}

.ps-uxb-hover-shine:hover::after { animation: psUxbShine .9s ease; }

@keyframes psUxbPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes psUxbShine { 100% { left: 130%; } }
@keyframes psUxbWobble {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-8px) rotate(-3deg); }
	40% { transform: translateX(6px) rotate(2deg); }
	60% { transform: translateX(-4px) rotate(-1deg); }
	80% { transform: translateX(2px); }
}

/* ---------- Text animation ---------- */

.ps-uxb-split__unit {
	display: inline-block;
	white-space: pre-wrap;
	opacity: 0;
	transform: translate3d(0, .55em, 0);
}

.ps-uxb-anim--run .ps-uxb-split__unit,
.ps-uxb-text--run .ps-uxb-split__unit {
	animation: psUxbSplitIn .6s var(--ps-anim-easing, ease-out) both;
	animation-delay: var(--ps-unit-delay, 0ms);
}

.ps-uxb-split--split-lines-up .ps-uxb-split__unit { transform: translate3d(0, 1em, 0); }

@keyframes psUxbSplitIn { to { opacity: 1; transform: none; } }

.ps-uxb-typing__caret {
	display: inline-block;
	width: 1px;
	height: 1em;
	margin-left: 2px;
	vertical-align: -.12em;
	background: currentColor;
	animation: psUxbCaret 1s step-end infinite;
}

@keyframes psUxbCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.ps-uxb-text-fx { position: relative; display: inline; }

.ps-uxb-text-fx--highlight {
	background-image: linear-gradient(var(--ps-fx-color, rgba(255, 214, 0, .55)), var(--ps-fx-color, rgba(255, 214, 0, .55)));
	background-repeat: no-repeat;
	background-position: 0 88%;
	background-size: 0 .55em;
	transition: background-size var(--ps-anim-duration, 700ms) var(--ps-anim-easing, ease-out);
}

.ps-uxb-text--run.ps-uxb-text-fx--highlight,
.ps-uxb-anim--run .ps-uxb-text-fx--highlight { background-size: 100% .55em; }

.ps-uxb-text-fx--underline-draw::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -.1em;
	height: 2px;
	width: 0;
	background: var(--ps-fx-color, currentColor);
	transition: width var(--ps-anim-duration, 700ms) var(--ps-anim-easing, ease-out);
}

.ps-uxb-text--run.ps-uxb-text-fx--underline-draw::after,
.ps-uxb-anim--run .ps-uxb-text-fx--underline-draw::after { width: 100%; }

/* ---------- Parallax ---------- */

.ps-uxb-parallax { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
	html.ps-uxb-js .ps-uxb-anim--pending,
	.ps-uxb-split__unit {
		opacity: 1 !important;
		transform: none !important;
	}

	.ps-uxb-anim--run,
	.ps-uxb-anim--run .ps-uxb-split__unit {
		animation: none !important;
	}

	.ps-uxb-parallax { transform: none !important; }
}