[data-mod-grid-entrance] {
	--mod-grid-entrance-x: 0px;
	--mod-grid-entrance-y: 0px;
	--mod-grid-entrance-scale: 1;
	--mod-grid-entrance-rotate: 0deg;
	--mod-grid-entrance-skew: 0deg;
	--mod-grid-entrance-duration: 1000ms;
	--mod-grid-entrance-easing: cubic-bezier(.2, .75, .25, 1);
}
[data-mod-grid-entrance-duration="slow"] { --mod-grid-entrance-duration: 2000ms; }
[data-mod-grid-entrance-duration="fast"] { --mod-grid-entrance-duration: 750ms; }

[data-mod-grid-entrance-family="fade"] { --mod-grid-entrance-distance: 34px; }
[data-mod-grid-entrance-family="slide"] { --mod-grid-entrance-distance: 72px; }
[data-mod-grid-entrance-family="zoom"] { --mod-grid-entrance-distance: 24px; --mod-grid-entrance-scale: .72; }
[data-mod-grid-entrance-family="bounce"] { --mod-grid-entrance-distance: 42px; --mod-grid-entrance-scale: .88; --mod-grid-entrance-easing: cubic-bezier(.2, .9, .25, 1.25); }
[data-mod-grid-entrance-family="rotate"] { --mod-grid-entrance-distance: 28px; --mod-grid-entrance-rotate: -16deg; }
[data-mod-grid-entrance-family="lightspeed"] { --mod-grid-entrance-distance: 90px; --mod-grid-entrance-skew: -12deg; --mod-grid-entrance-easing: cubic-bezier(.18, .8, .3, 1); }
[data-mod-grid-entrance-family="roll"] { --mod-grid-entrance-distance: 80px; --mod-grid-entrance-rotate: -90deg; }
[data-mod-grid-entrance-family="attention"] { --mod-grid-entrance-distance: 0px; }

[data-mod-grid-entrance-direction="up"] { --mod-grid-entrance-y: var(--mod-grid-entrance-distance); }
[data-mod-grid-entrance-direction="down"] { --mod-grid-entrance-y: calc(var(--mod-grid-entrance-distance) * -1); }
[data-mod-grid-entrance-direction="left"] { --mod-grid-entrance-x: calc(var(--mod-grid-entrance-distance) * -1); }
[data-mod-grid-entrance-direction="right"] { --mod-grid-entrance-x: var(--mod-grid-entrance-distance); --mod-grid-entrance-rotate: calc(var(--mod-grid-entrance-rotate) * -1); --mod-grid-entrance-skew: calc(var(--mod-grid-entrance-skew) * -1); }
[data-mod-grid-entrance-direction="up-left"] { --mod-grid-entrance-x: calc(var(--mod-grid-entrance-distance) * -1); --mod-grid-entrance-y: var(--mod-grid-entrance-distance); }
[data-mod-grid-entrance-direction="up-right"] { --mod-grid-entrance-x: var(--mod-grid-entrance-distance); --mod-grid-entrance-y: var(--mod-grid-entrance-distance); --mod-grid-entrance-rotate: calc(var(--mod-grid-entrance-rotate) * -1); }
[data-mod-grid-entrance-direction="down-left"] { --mod-grid-entrance-x: calc(var(--mod-grid-entrance-distance) * -1); --mod-grid-entrance-y: calc(var(--mod-grid-entrance-distance) * -1); }
[data-mod-grid-entrance-direction="down-right"] { --mod-grid-entrance-x: var(--mod-grid-entrance-distance); --mod-grid-entrance-y: calc(var(--mod-grid-entrance-distance) * -1); --mod-grid-entrance-rotate: calc(var(--mod-grid-entrance-rotate) * -1); }

.mod-grid-entrance--pending [data-mod-grid-entrance-item] {
	opacity: 0;
	transform: translate3d(var(--mod-grid-entrance-x), var(--mod-grid-entrance-y), 0) scale(var(--mod-grid-entrance-scale)) rotate(var(--mod-grid-entrance-rotate)) skewX(var(--mod-grid-entrance-skew));
	transform-origin: center;
	will-change: transform, opacity;
}
.mod-grid-entrance--pending.mod-grid-entrance--visible [data-mod-grid-entrance-item] {
	animation-name: mod-grid-entrance-item;
	animation-duration: var(--mod-grid-entrance-duration);
	animation-delay: var(--mod-grid-entrance-delay, 0ms);
	animation-timing-function: var(--mod-grid-entrance-easing);
	animation-fill-mode: both;
}
[data-mod-grid-entrance-family="attention"].mod-grid-entrance--pending [data-mod-grid-entrance-item] { opacity: 1; }
[data-mod-grid-entrance-effect="flash"].mod-grid-entrance--visible [data-mod-grid-entrance-item] { animation-name: mod-grid-entrance-flash; }
[data-mod-grid-entrance-effect="pulse"].mod-grid-entrance--visible [data-mod-grid-entrance-item] { animation-name: mod-grid-entrance-pulse; }
[data-mod-grid-entrance-effect="rubberBand"].mod-grid-entrance--visible [data-mod-grid-entrance-item] { animation-name: mod-grid-entrance-rubber-band; }
[data-mod-grid-entrance-effect="shake"].mod-grid-entrance--visible [data-mod-grid-entrance-item],
[data-mod-grid-entrance-effect="headShake"].mod-grid-entrance--visible [data-mod-grid-entrance-item] { animation-name: mod-grid-entrance-shake; }
[data-mod-grid-entrance-effect="swing"].mod-grid-entrance--visible [data-mod-grid-entrance-item] { animation-name: mod-grid-entrance-swing; transform-origin: top center; }
[data-mod-grid-entrance-effect="tada"].mod-grid-entrance--visible [data-mod-grid-entrance-item] { animation-name: mod-grid-entrance-tada; }
[data-mod-grid-entrance-effect="wobble"].mod-grid-entrance--visible [data-mod-grid-entrance-item] { animation-name: mod-grid-entrance-wobble; }
[data-mod-grid-entrance-effect="jello"].mod-grid-entrance--visible [data-mod-grid-entrance-item] { animation-name: mod-grid-entrance-jello; transform-origin: center; }
.mod-grid-entrance--pending [data-mod-grid-entrance-item].mod-grid-entrance-item--complete {
	opacity: 1;
	transform: none;
	animation: none;
	will-change: auto;
}

@keyframes mod-grid-entrance-item {
	0% { opacity: 0; transform: translate3d(var(--mod-grid-entrance-x), var(--mod-grid-entrance-y), 0) scale(var(--mod-grid-entrance-scale)) rotate(var(--mod-grid-entrance-rotate)) skewX(var(--mod-grid-entrance-skew)); }
	100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0) skewX(0); }
}
@keyframes mod-grid-entrance-flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } }
@keyframes mod-grid-entrance-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes mod-grid-entrance-rubber-band { 0%, 100% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.22, .78, 1); } 45% { transform: scale3d(.88, 1.12, 1); } 60% { transform: scale3d(1.06, .94, 1); } 75% { transform: scale3d(.98, 1.02, 1); } }
@keyframes mod-grid-entrance-shake { 0%, 100% { transform: translateX(0); } 15%, 45%, 75% { transform: translateX(-9px); } 30%, 60%, 90% { transform: translateX(9px); } }
@keyframes mod-grid-entrance-swing { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(12deg); } 40% { transform: rotate(-9deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-3deg); } }
@keyframes mod-grid-entrance-tada { 0%, 100% { transform: scale(1) rotate(0); } 10%, 20% { transform: scale(.92) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.08) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.08) rotate(-3deg); } }
@keyframes mod-grid-entrance-wobble { 0%, 100% { transform: translateX(0) rotate(0); } 15% { transform: translateX(-22px) rotate(-4deg); } 30% { transform: translateX(18px) rotate(3deg); } 45% { transform: translateX(-13px) rotate(-2deg); } 60% { transform: translateX(8px) rotate(1deg); } 75% { transform: translateX(-4px) rotate(-1deg); } }
@keyframes mod-grid-entrance-jello { 0%, 100% { transform: skew(0); } 22% { transform: skew(-9deg, -9deg); } 33% { transform: skew(6deg, 6deg); } 44% { transform: skew(-3deg, -3deg); } 55% { transform: skew(2deg, 2deg); } 66% { transform: skew(-1deg, -1deg); } }

@media (prefers-reduced-motion: reduce) {
	.mod-grid-entrance--pending [data-mod-grid-entrance-item],
	.mod-grid-entrance--pending.mod-grid-entrance--visible [data-mod-grid-entrance-item] {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		will-change: auto !important;
	}
}