/**
 * Scroll Animations — entrance keyframes ported from animate.css.
 * Keyframe names are prefixed with `leScroll` to avoid colliding with
 * animate.css if a plugin happens to load it.
 *
 * Pre-animation hidden state must exist in CSS (not JS) so elements are
 * invisible from the very first painted frame. JS only flips `is-animating`
 * on at the right moment.
 */

.has-scroll-animation {
	opacity: 0;
}

.has-scroll-animation.is-animating {
	animation-duration: var(--le-scroll-duration, 600ms);
	animation-delay: var(--le-scroll-delay, 0s);
	animation-timing-function: var(--le-scroll-easing, ease-out);
	animation-fill-mode: forwards;
}

@media (prefers-reduced-motion: reduce) {
	.has-scroll-animation,
	.has-scroll-animation.is-animating {
		opacity: 1 !important;
		animation: none !important;
	}
}

/* ── Back ─────────────────────────────────────────────────────────────── */

.has-scroll-animation.is-animation-back-in-down.is-animating  { animation-name: leScrollBackInDown; }
.has-scroll-animation.is-animation-back-in-left.is-animating  { animation-name: leScrollBackInLeft; }
.has-scroll-animation.is-animation-back-in-right.is-animating { animation-name: leScrollBackInRight; }
.has-scroll-animation.is-animation-back-in-up.is-animating    { animation-name: leScrollBackInUp; }

@keyframes leScrollBackInDown {
	0%   { transform: translateY(-1200px) scale(0.7); opacity: 0.7; }
	80%  { transform: translateY(0px)     scale(0.7); opacity: 0.7; }
	100% { transform: scale(1);                       opacity: 1; }
}
@keyframes leScrollBackInLeft {
	0%   { transform: translateX(-2000px) scale(0.7); opacity: 0.7; }
	80%  { transform: translateX(0px)     scale(0.7); opacity: 0.7; }
	100% { transform: scale(1);                       opacity: 1; }
}
@keyframes leScrollBackInRight {
	0%   { transform: translateX(2000px) scale(0.7); opacity: 0.7; }
	80%  { transform: translateX(0px)    scale(0.7); opacity: 0.7; }
	100% { transform: scale(1);                      opacity: 1; }
}
@keyframes leScrollBackInUp {
	0%   { transform: translateY(1200px) scale(0.7); opacity: 0.7; }
	80%  { transform: translateY(0px)    scale(0.7); opacity: 0.7; }
	100% { transform: scale(1);                      opacity: 1; }
}

/* ── Bounce ───────────────────────────────────────────────────────────── */

.has-scroll-animation.is-animation-bounce-in.is-animating       { animation-name: leScrollBounceIn; }
.has-scroll-animation.is-animation-bounce-in-down.is-animating  { animation-name: leScrollBounceInDown; }
.has-scroll-animation.is-animation-bounce-in-left.is-animating  { animation-name: leScrollBounceInLeft; }
.has-scroll-animation.is-animation-bounce-in-right.is-animating { animation-name: leScrollBounceInRight; }
.has-scroll-animation.is-animation-bounce-in-up.is-animating    { animation-name: leScrollBounceInUp; }

@keyframes leScrollBounceIn {
	from, 20%, 40%, 60%, 80%, to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0%   { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
	20%  { transform: scale3d(1.1, 1.1, 1.1); }
	40%  { transform: scale3d(0.9, 0.9, 0.9); }
	60%  { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
	80%  { transform: scale3d(0.97, 0.97, 0.97); }
	to   { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes leScrollBounceInDown {
	from, 60%, 75%, 90%, to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0%   { opacity: 0; transform: translate3d(0, -3000px, 0) scaleY(3); }
	60%  { opacity: 1; transform: translate3d(0, 25px, 0)    scaleY(0.9); }
	75%  { transform: translate3d(0, -10px, 0) scaleY(0.95); }
	90%  { transform: translate3d(0, 5px, 0)   scaleY(0.985); }
	to   { transform: translate3d(0, 0, 0); }
}
@keyframes leScrollBounceInLeft {
	from, 60%, 75%, 90%, to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0%   { opacity: 0; transform: translate3d(-3000px, 0, 0) scaleX(3); }
	60%  { opacity: 1; transform: translate3d(25px, 0, 0)    scaleX(1); }
	75%  { transform: translate3d(-10px, 0, 0) scaleX(0.98); }
	90%  { transform: translate3d(5px, 0, 0)   scaleX(0.995); }
	to   { transform: translate3d(0, 0, 0); }
}
@keyframes leScrollBounceInRight {
	from, 60%, 75%, 90%, to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0%   { opacity: 0; transform: translate3d(3000px, 0, 0) scaleX(3); }
	60%  { opacity: 1; transform: translate3d(-25px, 0, 0)  scaleX(1); }
	75%  { transform: translate3d(10px, 0, 0)  scaleX(0.98); }
	90%  { transform: translate3d(-5px, 0, 0)  scaleX(0.995); }
	to   { transform: translate3d(0, 0, 0); }
}
@keyframes leScrollBounceInUp {
	from, 60%, 75%, 90%, to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0%   { opacity: 0; transform: translate3d(0, 3000px, 0)  scaleY(5); }
	60%  { opacity: 1; transform: translate3d(0, -20px, 0)   scaleY(0.9); }
	75%  { transform: translate3d(0, 10px, 0)  scaleY(0.95); }
	90%  { transform: translate3d(0, -5px, 0)  scaleY(0.985); }
	to   { transform: translate3d(0, 0, 0); }
}

/* ── Fade ─────────────────────────────────────────────────────────────── */

.has-scroll-animation.is-animation-fade-in.is-animating              { animation-name: leScrollFadeIn; }
.has-scroll-animation.is-animation-fade-in-down.is-animating         { animation-name: leScrollFadeInDown; }
.has-scroll-animation.is-animation-fade-in-down-big.is-animating     { animation-name: leScrollFadeInDownBig; }
.has-scroll-animation.is-animation-fade-in-left.is-animating         { animation-name: leScrollFadeInLeft; }
.has-scroll-animation.is-animation-fade-in-left-big.is-animating     { animation-name: leScrollFadeInLeftBig; }
.has-scroll-animation.is-animation-fade-in-right.is-animating        { animation-name: leScrollFadeInRight; }
.has-scroll-animation.is-animation-fade-in-right-big.is-animating    { animation-name: leScrollFadeInRightBig; }
.has-scroll-animation.is-animation-fade-in-up.is-animating           { animation-name: leScrollFadeInUp; }
.has-scroll-animation.is-animation-fade-in-up-big.is-animating       { animation-name: leScrollFadeInUpBig; }
.has-scroll-animation.is-animation-fade-in-top-left.is-animating     { animation-name: leScrollFadeInTopLeft; }
.has-scroll-animation.is-animation-fade-in-top-right.is-animating    { animation-name: leScrollFadeInTopRight; }
.has-scroll-animation.is-animation-fade-in-bottom-left.is-animating  { animation-name: leScrollFadeInBottomLeft; }
.has-scroll-animation.is-animation-fade-in-bottom-right.is-animating { animation-name: leScrollFadeInBottomRight; }

@keyframes leScrollFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes leScrollFadeInDown {
	from { opacity: 0; transform: translate3d(0, -100%, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes leScrollFadeInDownBig {
	from { opacity: 0; transform: translate3d(0, -2000px, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes leScrollFadeInLeft {
	from { opacity: 0; transform: translate3d(-100%, 0, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes leScrollFadeInLeftBig {
	from { opacity: 0; transform: translate3d(-2000px, 0, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes leScrollFadeInRight {
	from { opacity: 0; transform: translate3d(100%, 0, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes leScrollFadeInRightBig {
	from { opacity: 0; transform: translate3d(2000px, 0, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes leScrollFadeInUp {
	from { opacity: 0; transform: translate3d(0, 100%, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes leScrollFadeInUpBig {
	from { opacity: 0; transform: translate3d(0, 2000px, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes leScrollFadeInTopLeft {
	from { opacity: 0; transform: translate3d(-100%, -100%, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes leScrollFadeInTopRight {
	from { opacity: 0; transform: translate3d(100%, -100%, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes leScrollFadeInBottomLeft {
	from { opacity: 0; transform: translate3d(-100%, 100%, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes leScrollFadeInBottomRight {
	from { opacity: 0; transform: translate3d(100%, 100%, 0); }
	to   { opacity: 1; transform: none; }
}

/* ── Flip ─────────────────────────────────────────────────────────────── */

.has-scroll-animation.is-animation-flip-in-x.is-animating { animation-name: leScrollFlipInX; }
.has-scroll-animation.is-animation-flip-in-y.is-animating { animation-name: leScrollFlipInY; }

@keyframes leScrollFlipInX {
	from {
		opacity: 0;
		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		animation-timing-function: ease-in;
	}
	40% {
		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		animation-timing-function: ease-in;
	}
	60% {
		opacity: 1;
		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
	}
	80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
	to  { transform: perspective(400px); }
}
@keyframes leScrollFlipInY {
	from {
		opacity: 0;
		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		animation-timing-function: ease-in;
	}
	40% {
		transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
		animation-timing-function: ease-in;
	}
	60% {
		opacity: 1;
		transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
	}
	80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
	to  { transform: perspective(400px); }
}

/* ── Light Speed ──────────────────────────────────────────────────────── */

.has-scroll-animation.is-animation-light-speed-in-right.is-animating { animation-name: leScrollLightSpeedInRight; }
.has-scroll-animation.is-animation-light-speed-in-left.is-animating  { animation-name: leScrollLightSpeedInLeft; }

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

/* ── Roll ─────────────────────────────────────────────────────────────── */

.has-scroll-animation.is-animation-roll-in.is-animating { animation-name: leScrollRollIn; }

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

/* ── Rotate ───────────────────────────────────────────────────────────── */

.has-scroll-animation.is-animation-rotate-in.is-animating            { animation-name: leScrollRotateIn; }
.has-scroll-animation.is-animation-rotate-in-down-left.is-animating  { animation-name: leScrollRotateInDownLeft; }
.has-scroll-animation.is-animation-rotate-in-down-right.is-animating { animation-name: leScrollRotateInDownRight; }
.has-scroll-animation.is-animation-rotate-in-up-left.is-animating    { animation-name: leScrollRotateInUpLeft; }
.has-scroll-animation.is-animation-rotate-in-up-right.is-animating   { animation-name: leScrollRotateInUpRight; }

@keyframes leScrollRotateIn {
	from { opacity: 0; transform: rotate3d(0, 0, 1, -200deg); transform-origin: center; }
	to   { opacity: 1; transform: translate3d(0, 0, 0);        transform-origin: center; }
}
@keyframes leScrollRotateInDownLeft {
	from { opacity: 0; transform: rotate3d(0, 0, 1, -45deg);  transform-origin: left bottom; }
	to   { opacity: 1; transform: translate3d(0, 0, 0);        transform-origin: left bottom; }
}
@keyframes leScrollRotateInDownRight {
	from { opacity: 0; transform: rotate3d(0, 0, 1, 45deg);   transform-origin: right bottom; }
	to   { opacity: 1; transform: translate3d(0, 0, 0);        transform-origin: right bottom; }
}
@keyframes leScrollRotateInUpLeft {
	from { opacity: 0; transform: rotate3d(0, 0, 1, 45deg);   transform-origin: left bottom; }
	to   { opacity: 1; transform: translate3d(0, 0, 0);        transform-origin: left bottom; }
}
@keyframes leScrollRotateInUpRight {
	from { opacity: 0; transform: rotate3d(0, 0, 1, -90deg);  transform-origin: right bottom; }
	to   { opacity: 1; transform: translate3d(0, 0, 0);        transform-origin: right bottom; }
}

/* ── Slide ────────────────────────────────────────────────────────────── */

.has-scroll-animation.is-animation-slide-in-down.is-animating  { animation-name: leScrollSlideInDown; }
.has-scroll-animation.is-animation-slide-in-left.is-animating  { animation-name: leScrollSlideInLeft; }
.has-scroll-animation.is-animation-slide-in-right.is-animating { animation-name: leScrollSlideInRight; }
.has-scroll-animation.is-animation-slide-in-up.is-animating    { animation-name: leScrollSlideInUp; }

@keyframes leScrollSlideInDown {
	from { opacity: 0; transform: translate3d(0, -100%, 0); visibility: visible; }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes leScrollSlideInLeft {
	from { opacity: 0; transform: translate3d(-100%, 0, 0); visibility: visible; }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes leScrollSlideInRight {
	from { opacity: 0; transform: translate3d(100%, 0, 0); visibility: visible; }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes leScrollSlideInUp {
	from { opacity: 0; transform: translate3d(0, 100%, 0); visibility: visible; }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ── Zoom ─────────────────────────────────────────────────────────────── */

.has-scroll-animation.is-animation-zoom-in.is-animating       { animation-name: leScrollZoomIn; }
.has-scroll-animation.is-animation-zoom-in-down.is-animating  { animation-name: leScrollZoomInDown; }
.has-scroll-animation.is-animation-zoom-in-left.is-animating  { animation-name: leScrollZoomInLeft; }
.has-scroll-animation.is-animation-zoom-in-right.is-animating { animation-name: leScrollZoomInRight; }
.has-scroll-animation.is-animation-zoom-in-up.is-animating    { animation-name: leScrollZoomInUp; }

@keyframes leScrollZoomIn {
	from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
	50%  { opacity: 1; }
	to   { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes leScrollZoomInDown {
	from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
	60%  { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); }
	to   { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes leScrollZoomInLeft {
	from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
	60%  { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); }
	to   { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes leScrollZoomInRight {
	from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
	60%  { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); }
	to   { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes leScrollZoomInUp {
	from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
	60%  { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); }
	to   { opacity: 1; transform: scale3d(1, 1, 1); }
}