/********************************************************/
/*
/*      Animation CSS
/*
/********************************************************/

/******************************/
/* Scroll-triggered animations
/******************************/
.st {
	/* Default state */
	&:not(.target-selector, .target-before, .target-after),
	&:not(.target-selector).target-before::before,
	&:not(.target-selector).target-after::after,
	&.target-selector:not(.target-before, .target-after) .target,
	&.target-selector.target-before .target::before,
	&.target-selector.target-after .target::after {
		opacity: var(--st-initial-opacity, 1) !important;
		transform: translate(var(--st-initial-translation-h, 0%), var(--st-initial-translation-v, 0%)) rotate(var(--st-initial-rotation, 0deg)) scale(var(--st-initial-scale, 1)) !important;
	}
	
	/* Initial state */
	&:not(.revealed, .active) {
		&:not(.target-selector, .target-before, .target-after),
		&:not(.target-selector).target-before::before,
		&:not(.target-selector).target-after::after,
		&.target-selector:not(.target-before, .target-after) .target,
		&.target-selector.target-before .target::before,
		&.target-selector.target-after .target::after {
			transition-property: unset !important;
			transition-duration: unset !important;
			transition-delay: unset !important;
			transition-timing-function: unset !important;
		}
	}
	
	/* Active & Final states */
	&:is(.active, .revealed) {
		&:not(.target-selector, .target-before, .target-after),
		&:not(.target-selector).target-before::before,
		&:not(.target-selector).target-after::after,
		&.target-selector:not(.target-before, .target-after) .target,
		&.target-selector.target-before .target::before,
		&.target-selector.target-after .target::after {
			visibility: visible !important;
			opacity: var(--st-final-opacity, 1) !important;
			transform: translate(var(--st-final-translation-h, 0%), var(--st-final-translation-v, 0%)) rotate(var(--st-final-rotation, 0deg)) scale(var(--st-final-scale, 1)) !important;
		}
		
		/* Active state only */
		&:not(.target-selector, .target-before, .target-after).active,
		&:not(.target-selector).target-before.active::before,
		&:not(.target-selector).target-after.active::after,
		&.target-selector:not(.target-before, .target-after).active .target,
		&.target-selector.target-before.active .target::before,
		&.target-selector.target-after.active .target::after {
			pointer-events: none !important;
			transition-property: opacity, transform !important;
			transition-duration: var(--st-duration, 1250ms) !important;
			transition-delay: var(--st-delay, 0ms) !important;
			transition-timing-function: var(--st-timing-function, cubic-bezier(0.5, 0, 0, 1)) !important;
		}
	}
	
	/* Unless specified, hide animated elements once animation has ended */
	&:not(.stay-visible) {
		&:not(.target-selector, .target-before, .target-after),
		&:not(.stay-visible):not(.target-selector).target-before::before,
		&:not(.stay-visible):not(.target-selector).target-after::after,
		&:not(.stay-visible).target-selector .target,
		&:not(.stay-visible).target-selector.target-before .target::before,
		&:not(.stay-visible).target-selector.target-after .target::after {
			visibility: hidden !important;
		}
	}
}