:root {
	--motyp-default-duration: 0.7s;
	--swapfade-default-duration: 0.20s;
}

.motion {
	transition: all 1s;
	transition-delay: inherit;
}

/*cat: fadein*/
.motionParent[data-motionclass="fadein"] > * {
	opacity: 0.0;
}
.motion.fadein,
.motion[data-efx="fadein"] {
	opacity: 0.0;
}
.motion.fadein[data-isvisible="true"],
.motion.fadein[data-enablefx="true"],
.motion[data-efx="fadein"][data-enablefx="true"] {
	opacity: 1.0;
}

/*cat: upvisible*/
.motionParent[data-motionclass="upvisible"] > * {
	opacity: 0.0;
}
.motion.upvisible,
.motion[data-efx="upvisible"] {
	opacity: 0.0;
	transform: translateY(1em);
}
.motion.upvisible[data-isvisible="true"],
.motion.upvisible[data-enablefx="true"],
.motion[data-efx="upvisible"][data-enablefx="true"] {
	opacity: 1.0;
	transform: translateY(0em);
}

/*cat: downhidden*/
.motionParent[data-motionclass="downhidden"] > * {
	opacity: 0.0;
}
.motion.downhidden,
.motion[data-efx="downhidden"] {
	transform: translateY(0em);
}
.motion.downhidden[data-isvisible="true"],
.motion.downhidden[data-enablefx="true"],
.motion[data-efx="downhidden"][data-enablefx="true"] {
	transform: translateY(1em);
	opacity: 0.0;
}

/*cat: scaleup*/
.motionParent[data-motionclass="scaleup"] > * {
	opacity: 0.0;
}
.motion.scaleup,
.motion[data-efx="scaleup"] {
	opacity: 0.0;
	transform: scale(0.4);
}
.motion.scaleup[data-isvisible="true"],
.motion.scaleup[data-enablefx="true"],
.motion[data-efx="scaleup"][data-enablefx="true"] {
	opacity: 1.0;
	transform: scale(1.0);
}

/*cat: scaledown*/
.motionParent[data-motionclass="scaledown"] > * {
	opacity: 0.0;
}
.motion.scaledown,
.motion[data-efx="scaledown"] {
	opacity: 0.0;
	transform: scale(1.4);
}
.motion.scaledown[data-isvisible="true"],
.motion.scaledown[data-enablefx="true"],
.motion[data-efx="scaledown"][data-enablefx="true"] {
	opacity: 1.0;
	transform: scale(1.0);
}

/*cat: motionTypography*/
.motion-typography {
	
}
.motion-typography > * {
	font-family: inherit;
	font-weight: inherit;
	line-height: inherit;
}
.typograph-cell {
	display: inline-block;
	opacity: 0.0;
	transition: all;
	transition-duration: var(--motyp-default-duration);
}
.typograph-cell.space {
	width: 0.25em;
}
.typograph-cell[data-isvisible=""] {
	
}
.typograph-cell[data-isvisible="true"] {
	opacity: 1.0;
}

/*cat: number count*/
.number-count-visible {
	
}
.number-count-visible[data-isvisible="true"] {
	
}

/*cat: swapfade*/
.swapfade {
	position: relative;
	min-height: 1em;
}
.swapfade > * {
	position: absolute;
	top: 0;
	left: 0;
}
.swapfade > *[data-enable=""],
.swapfade > *[data-enable="false"] {
	visibility: hidden;
}
.swapfade .typograph-cell {
	opacity: 0.0;
	transition-duration: var(--swapfade-default-duration);
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}
.swapfade [data-step="standby"] .typograph-cell {
	opacity: 0.0;
	transition: none;
	transform: translateY(0.8em);
}
.swapfade [data-step="fadein"] .typograph-cell {
	opacity: 1.0;
	transform: translateY(0em);
	transition-timing-function: ease-out;
}
.swapfade [data-step="still"] .typograph-cell{
	opacity: 1.0;
}
.swapfade [data-step="fadeout"] .typograph-cell{
	opacity: 0.0;
	transform: translateY(0.8em);
	transition-timing-function: ease-in;
}

/*cat: env*/
@media not screen {
	.motionParent, .motion {
		opacity: 1.0 !important;
		transform: none !important;
	}
}

/*cat: legacy*/
[data-disableanim="true"] .motionParent,
[data-disableanim="true"] .motion {
	opacity: 1.0 !important;
	transform: none !important;
}