/*
* 
* This abomination below
* Allows you to craft animations using only CSS classes on your html code
* 
* Do you want a slow linear animation for opacity?
* animated-slow-linear-opacity
*
* Do you want a fast animation using a cubic curve?
* animated-fast-cubic-all has your back
*
* This has to cause troubles in some way, I refuse to believe this "just works"
* In theory this won't interfere with anything that doesn't contain "animated-"
* So conflicts should not happen I guess?
*
* Avoid using keywords that affect the same property and you should be fine
*
* After setting this all you need to do is set an "on and off" state for your animated elements
*
* If this confuses you (and it should) just ignore it and do it your way
*
* - Flan
*
*/

[class*="animated-"] {
	/* Speed Variants */
	&[class*="-slow"] {
		transition-duration: 1s;
	}

	&[class*="-normal"] {
		transition-duration: 0.6s;
	}

	&[class*="-fast"] {
		transition-duration: 0.2s;
	}

	/* Easing Variants */
	&[class*="-ease"] {
		transition-timing-function: ease;
	}

	&[class*="-linear"] {
		transition-timing-function: linear;
	}

	&[class*="-ease-in"] {
		transition-timing-function: ease-in;
	}

	&[class*="-ease-out"] {
		transition-timing-function: ease-out;
	}

	&[class*="-ease-in-out"] {
		transition-timing-function: ease-in-out;
	}

	&[class*="-cubic"] {
		transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* custom cubic bezier */
	}

	/* Property Variants */
	&[class*="-all"] {
		transition-property: all;
	}

	&[class*="-opacity"] {
		transition-property: opacity;
	}

	&[class*="-transform"] {
		transition-property: transform;
	}

	&[class*="-background"] {
		transition-property: background-color;
	}

	&[class*="-color"] {
		transition-property: color;
	}

	&[class*="-size"] {
		transition-property: width, height;
	}

	&[class*="-position"] {
		transition-property: top, left, right, bottom;
	}

	&[class*="-filter"] {
		transition-property: filter;
	}

	&[class*="-greyscale"] {
		filter: grayscale(100%);
		transition-property: filter;

		&:hover {
			filter: grayscale(0%);
		}
	}
}

.animation-delay-short
{
	transition-delay: 0.5s;
}

.animation-delay-medium
{
	transition-delay: 0.8s;
}

.animation-delay-long
{
	transition-delay: 1.5s;
}

.transition-opacity
{
	opacity: 1;
	
	&.first-load
	{
		transition: none;
	}

	&.transitioning
	{ 
		opacity: 0;
	}
}

.shine-animation
{
	position: relative;
	overflow: hidden;

	&::before
	{
		content: "";
		position: absolute;
		top: -200%;
		left: -200%;
		width: 200%;
		height: 200%;
		background: linear-gradient(
			120deg,
			rgba(255, 255, 255, 0) 45%,
			rgba(255, 255, 255, 0.05) 50%,
			rgba(255, 255, 255, 0) 55%
			);
		transform: rotate(15deg);
		animation: shine 4s 1 ease;
	}
}

@keyframes shine {
	0% {
		top: -200%;
		left: -200%;
	}
	100% {
		top: 200%;
		left: 200%;
	}
}