/**
 * Scroll Animations — entrance keyframes ported from animate.css.
 * Keyframe names are prefixed with `shScroll` 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(--sh-scroll-duration, 600ms);
	animation-delay: var(--sh-scroll-delay, 0s);
	animation-timing-function: var(--sh-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: shScrollBackInDown; }
.has-scroll-animation.is-animation-back-in-left.is-animating  { animation-name: shScrollBackInLeft; }
.has-scroll-animation.is-animation-back-in-right.is-animating { animation-name: shScrollBackInRight; }
.has-scroll-animation.is-animation-back-in-up.is-animating    { animation-name: shScrollBackInUp; }

@keyframes shScrollBackInDown {
	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 shScrollBackInLeft {
	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 shScrollBackInRight {
	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 shScrollBackInUp {
	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: shScrollBounceIn; }
.has-scroll-animation.is-animation-bounce-in-down.is-animating  { animation-name: shScrollBounceInDown; }
.has-scroll-animation.is-animation-bounce-in-left.is-animating  { animation-name: shScrollBounceInLeft; }
.has-scroll-animation.is-animation-bounce-in-right.is-animating { animation-name: shScrollBounceInRight; }
.has-scroll-animation.is-animation-bounce-in-up.is-animating    { animation-name: shScrollBounceInUp; }

@keyframes shScrollBounceIn {
	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 shScrollBounceInDown {
	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 shScrollBounceInLeft {
	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 shScrollBounceInRight {
	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 shScrollBounceInUp {
	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: shScrollFadeIn; }
.has-scroll-animation.is-animation-fade-in-down.is-animating         { animation-name: shScrollFadeInDown; }
.has-scroll-animation.is-animation-fade-in-down-big.is-animating     { animation-name: shScrollFadeInDownBig; }
.has-scroll-animation.is-animation-fade-in-left.is-animating         { animation-name: shScrollFadeInLeft; }
.has-scroll-animation.is-animation-fade-in-left-big.is-animating     { animation-name: shScrollFadeInLeftBig; }
.has-scroll-animation.is-animation-fade-in-right.is-animating        { animation-name: shScrollFadeInRight; }
.has-scroll-animation.is-animation-fade-in-right-big.is-animating    { animation-name: shScrollFadeInRightBig; }
.has-scroll-animation.is-animation-fade-in-up.is-animating           { animation-name: shScrollFadeInUp; }
.has-scroll-animation.is-animation-fade-in-up-big.is-animating       { animation-name: shScrollFadeInUpBig; }
.has-scroll-animation.is-animation-fade-in-top-left.is-animating     { animation-name: shScrollFadeInTopLeft; }
.has-scroll-animation.is-animation-fade-in-top-right.is-animating    { animation-name: shScrollFadeInTopRight; }
.has-scroll-animation.is-animation-fade-in-bottom-left.is-animating  { animation-name: shScrollFadeInBottomLeft; }
.has-scroll-animation.is-animation-fade-in-bottom-right.is-animating { animation-name: shScrollFadeInBottomRight; }

@keyframes shScrollFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes shScrollFadeInDown {
	from { opacity: 0; transform: translate3d(0, -100%, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes shScrollFadeInDownBig {
	from { opacity: 0; transform: translate3d(0, -2000px, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes shScrollFadeInLeft {
	from { opacity: 0; transform: translate3d(-100%, 0, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes shScrollFadeInLeftBig {
	from { opacity: 0; transform: translate3d(-2000px, 0, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes shScrollFadeInRight {
	from { opacity: 0; transform: translate3d(100%, 0, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes shScrollFadeInRightBig {
	from { opacity: 0; transform: translate3d(2000px, 0, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes shScrollFadeInUp {
	from { opacity: 0; transform: translate3d(0, 100%, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes shScrollFadeInUpBig {
	from { opacity: 0; transform: translate3d(0, 2000px, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes shScrollFadeInTopLeft {
	from { opacity: 0; transform: translate3d(-100%, -100%, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes shScrollFadeInTopRight {
	from { opacity: 0; transform: translate3d(100%, -100%, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes shScrollFadeInBottomLeft {
	from { opacity: 0; transform: translate3d(-100%, 100%, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes shScrollFadeInBottomRight {
	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: shScrollFlipInX; }
.has-scroll-animation.is-animation-flip-in-y.is-animating { animation-name: shScrollFlipInY; }

@keyframes shScrollFlipInX {
	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 shScrollFlipInY {
	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: shScrollLightSpeedInRight; }
.has-scroll-animation.is-animation-light-speed-in-left.is-animating  { animation-name: shScrollLightSpeedInLeft; }

@keyframes shScrollLightSpeedInRight {
	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 shScrollLightSpeedInLeft {
	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: shScrollRollIn; }

@keyframes shScrollRollIn {
	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: shScrollRotateIn; }
.has-scroll-animation.is-animation-rotate-in-down-left.is-animating  { animation-name: shScrollRotateInDownLeft; }
.has-scroll-animation.is-animation-rotate-in-down-right.is-animating { animation-name: shScrollRotateInDownRight; }
.has-scroll-animation.is-animation-rotate-in-up-left.is-animating    { animation-name: shScrollRotateInUpLeft; }
.has-scroll-animation.is-animation-rotate-in-up-right.is-animating   { animation-name: shScrollRotateInUpRight; }

@keyframes shScrollRotateIn {
	from { opacity: 0; transform: rotate3d(0, 0, 1, -200deg); transform-origin: center; }
	to   { opacity: 1; transform: translate3d(0, 0, 0);        transform-origin: center; }
}
@keyframes shScrollRotateInDownLeft {
	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 shScrollRotateInDownRight {
	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 shScrollRotateInUpLeft {
	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 shScrollRotateInUpRight {
	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: shScrollSlideInDown; }
.has-scroll-animation.is-animation-slide-in-left.is-animating  { animation-name: shScrollSlideInLeft; }
.has-scroll-animation.is-animation-slide-in-right.is-animating { animation-name: shScrollSlideInRight; }
.has-scroll-animation.is-animation-slide-in-up.is-animating    { animation-name: shScrollSlideInUp; }

@keyframes shScrollSlideInDown {
	from { opacity: 0; transform: translate3d(0, -100%, 0); visibility: visible; }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes shScrollSlideInLeft {
	from { opacity: 0; transform: translate3d(-100%, 0, 0); visibility: visible; }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes shScrollSlideInRight {
	from { opacity: 0; transform: translate3d(100%, 0, 0); visibility: visible; }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes shScrollSlideInUp {
	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: shScrollZoomIn; }
.has-scroll-animation.is-animation-zoom-in-down.is-animating  { animation-name: shScrollZoomInDown; }
.has-scroll-animation.is-animation-zoom-in-left.is-animating  { animation-name: shScrollZoomInLeft; }
.has-scroll-animation.is-animation-zoom-in-right.is-animating { animation-name: shScrollZoomInRight; }
.has-scroll-animation.is-animation-zoom-in-up.is-animating    { animation-name: shScrollZoomInUp; }

@keyframes shScrollZoomIn {
	from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
	50%  { opacity: 1; }
	to   { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes shScrollZoomInDown {
	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 shScrollZoomInLeft {
	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 shScrollZoomInRight {
	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 shScrollZoomInUp {
	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); }
}