/* Base: shared transitions and configurable defaults */
[data-aoe] {
	--_aoe-distance: 45px;
	--_aoe-t-transform: 600ms;
	--_aoe-t-opacity: 900ms;
	transition:
		transform var(--_aoe-t-transform),
		opacity var(--_aoe-t-opacity);
}

/* Speed modifiers */
[data-aoe$='-fast'] {
	--_aoe-t-transform: 370ms;
	--_aoe-t-opacity: 555ms;
}

[data-aoe$='-slow'] {
	--_aoe-t-transform: 975ms;
	--_aoe-t-opacity: 1500ms;
}

/* Direction: initial displaced state */
[data-aoe*='up'] {
	transform: translateY(var(--_aoe-distance));
}

[data-aoe*='right'] {
	transform: translateX(calc(-1 * var(--_aoe-distance)));
}

[data-aoe*='down'] {
	transform: translateY(calc(-1 * var(--_aoe-distance)));
}

[data-aoe*='left'] {
	transform: translateX(var(--_aoe-distance));
}

/* Opacity: initial hidden state */
[data-aoe^='fade'] {
	opacity: 0;
}

[data-aoe^='partial-fade'] {
	opacity: 0.25;
}

/* Animated state */
[data-aoe].aoe {
	transition-delay: 0s;
}

[data-aoe*='up'].aoe,
[data-aoe*='down'].aoe {
	transform: translateY(0);
}

[data-aoe*='right'].aoe,
[data-aoe*='left'].aoe {
	transform: translateX(0);
}

[data-aoe^='fade'].aoe,
[data-aoe^='partial-fade'].aoe {
	opacity: 1;
}

/** You can add your own animations by following the same pattern in your own CSS file
[data-aoe='your-animation'] {
	transform: translateX(-45px);
	transition:
		transform 600ms,
		opacity 900ms;

	&.aoe {
		transform: translateX(0);
		transition-delay: 0s;
	}
}
**/