/* Animation Options

	repeat: bool
	fade-in: bool
	scale: grow, shrink, none
	speed: slow, medium, fast
	direction: slide-up, slide-down, slide-left, slide-right, none

*/

/* Apply this class to parent section to avoid scrollbars when items are animated outside of wrapper */
.contains-animation{
	overflow:hidden;
}

/* Base state for all animated elements */
.animate-children .animate-me {
	/* Defaults */
	--translate-x: 0;
	--translate-y: 0;
	--scale: 1;

	opacity: 0;
	transform: translateX(var(--translate-x)) translateY(var(--translate-y)) scale(var(--scale));
	transition: transform 0.6s ease, opacity 0.6s ease;
}

/* Activated animation state */
.animate-children.animate .animate-me {
	--translate-x: 0 !important;
	--translate-y: 0 !important;
	--scale: 1 !important;
	opacity: 1 !important;
}

/* Speed modifiers */
.animate-children.slow .animate-me   { transition-duration: 1.2s; }
.animate-children.medium .animate-me { transition-duration: 0.8s; }
.animate-children.fast .animate-me   { transition-duration: 0.4s; }

/* Fade effect (initial only) */
.animate-children.fade-in .animate-me {
	opacity: 0;
}

/* Slide directions — override individual components */
.animate-children.slide-left .animate-me  { --translate-x: -50%; }
.animate-children.slide-right .animate-me { --translate-x: 50%; }
.animate-children.slide-up .animate-me    { --translate-y: 28px; }
.animate-children.slide-down .animate-me  { --translate-y: -28px; }

/* Scale options */
.animate-children.grow .animate-me   { --scale: 0.85; }
.animate-children.shrink .animate-me { --scale: 1.15; }

/* OTHER ANIMATION STYLES (JUST GENERIC) */

.radial-pulse{
	position:relative;
}

.radial-pulse *{
	z-index:10;
}

.radial-pulse:before,
.radial-pulse:after{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;

	border-radius:50%;
}
.radial-pulse:before{
	background:rgba(255,255,255,0);
	z-index:0;
	transform:scale(1);
	box-shadow:0 0 0 1px transparent;
}
.radial-pulse:after{
	background:rgba(255,255,255,0);
	box-shadow:0 0 0 1px var(--copper-color);
	z-index:5;

}

/* Animation Keyframes */
@keyframes pulseEffect {
	0% {
		background: rgba(255,255,255,0);
		transform: scale(1);
		box-shadow:0 0 0 1px var(--copper-color);
	}
	50% {
		background: rgba(255,255,255,0);
		transform: scale(1.5);
		box-shadow:0 0 0 1px transparent;
	}
	100% {
		background: rgba(255,255,255,0);
		transform: scale(1);
		box-shadow:0 0 0 1px transparent;
	}
}

/* Trigger on hover */
.radial-pulse:hover::before {
	animation: pulseEffect 0.6s ease-out 0s 2 forwards;
}