/* 
   @ UserAnimations.css
   @ Author: HumansCanWinElves
   @ Allows creating basic animated motions from inline.

`   Example usage:
   <span class="ua-animation ua-up">Jumping text</span>
*/
@media (prefers-reduced-motion: no-preference) {
	@property --ua-distance {
	  syntax: "<length> | <percentage>";
	  inherits: false;
	  initial-value: 100%;
	}

	@property --ua-scale-factor {
	  syntax: "<number>";
	  inherits: false;
	  initial-value: 1;
	}

	/* General helper classes */
	.ua-animation {
	  animation-duration: 3s; /* An arbitrary default... */
	  animation-iteration-count: infinite;
	  --ua-distance: 100%;
	}

	/* Altering the display mode:
	   display:inline mode (which is the default for <span> elements and some more)
	   does not allow transformations.
	   
	   display:block mode (which is the default for <div> elements and some more)
	   takes the whole available width which may give weird results with images
	   or short text.
	   
	   The compromise here is to use display:inline-block for both <div> and <span>.
	   <p> elements remain in block mode which is appropriate for paragraphs.
	   Tables and lists keep their special display modes.
	*/
	div.ua-animation,
	span.ua-animation {
	  display: inline-block;
	}

	.ua-animation.ua-hover-pause:hover,
	.ua-animation.ua-hover-play:not(:hover) {
	  animation-play-state: paused;
	}

	.ua-animation.ua-hover-only:not(:hover) {
	  animation: none !important;
	}

	@keyframes ua-up {
	  to {
	    transform: translateY(-100%);
	    transform: translateY(calc(var(--ua-distance, 100%) * -1));
	  }
	}

	.ua-animation.ua-up {
	  animation-name: ua-up;
	  animation-direction: alternate;
	}

	@keyframes ua-down {
	  to {
	    transform: translateY(100%);
	    transform: translateY(var(--ua-distance, 100%));
	  }
	}

	.ua-animation.ua-down {
	  animation-name: ua-down;
	  animation-direction: alternate;
	}

	/* @noflip comments prevent MediaWiki ResourceLoader from flipping properties
	   when using a right-to-left language */
	/* @noflip */
	@keyframes ua-right {
	  to {
	    transform: translateX(100);
	    transform: translateX(var(--ua-distance, 100%));
	  }
	}

	.ua-animation.ua-right {
	  animation-name: ua-right;
	  animation-direction: alternate;
	}

	/* @noflip */
	@keyframes ua-left {
	  to {
	    transform: translateX(-100%);
	    transform: translateX(calc(var(--ua-distance, 100%) * -1));
	  }
	}

	.ua-animation.ua-left {
	  animation-name: ua-left;
	  animation-direction: alternate;
	}

	@keyframes ua-updown {
	  25% {
	    transform: translateY(-50%);
	    transform: translateY(calc(var(--ua-distance, 100%) * -0.5));
	  }

	  75% {
	    transform: translateY(50%);
	    transform: translateY(calc(var(--ua-distance, 100%) * 0.5));
	  }
	}

	.ua-animation.ua-updown {
	  animation-name: ua-updown;
	  animation-timing-function: linear;
	}

	.ua-animation.ua-downup {
	  animation-name: ua-updown;
	  animation-timing-function: linear;
	  animation-direction: reverse;
	}

	/* @noflip */
	@keyframes ua-rightleft {
	  25% {
	    transform: translateX(50%);
	    transform: translateX(calc(var(--ua-distance, 100%) * 0.5));
	  }

	  75% {
	    transform: translateX(-50%);
	    transform: translateX(calc(var(--ua-distance, 100%) * -0.5));
	  }
	}

	.ua-animation.ua-rightleft {
	  animation-name: ua-rightleft;
	  animation-timing-function: linear;
	}

	.ua-animation.ua-leftright {
	  animation-name: ua-rightleft;
	  animation-timing-function: linear;
	  animation-direction: reverse;
	}

	@keyframes ua-swing {
	  25% {
	    transform: rotate(25deg);
	  }

	  75% {
	    transform: rotate(-25deg);
	  }
	}

	.ua-animation.ua-swing {
	  animation-name: ua-swing;
	  animation-timing-function: linear;
	}

	@keyframes ua-spin {
	  to {
	    transform: rotate(360deg);
	  }
	}

	.ua-animation.ua-spin,
	.ua-animation.ua-spin-clockwise {
	  animation-name: ua-spin;
	  animation-timing-function: linear;
	}

	.ua-animation.ua-spin-counterclockwise {
	  animation-name: ua-spin;
	  animation-timing-function: linear;
	  animation-direction: reverse;
	}

	@keyframes ua-grow {
	  to {
	    transform: scale(2);
	    transform: scale(var(--ua-scale-factor, 2));
	  }
	}

	.ua-animation.ua-grow {
	  --ua-scale-factor: 2;
	  animation-name: ua-grow;
	  animation-timing-function: ease-in-out;
	  animation-direction: alternate;
	}

	@keyframes ua-shrink {
	  to {
	    transform: scale(0.1);
	    transform: scale(var(--ua-scale-factor, 0.1));
	  }
	}

	.ua-animation.ua-shrink {
	  --ua-scale-factor: 0.1;
	  animation-name: ua-shrink;
	  animation-timing-function: ease-in-out;
	  animation-direction: alternate;
	}

	@keyframes ua-growshrink {
	  25% {
	    transform: scale(1.5);
	    transform: scale(calc(1 + var(--ua-scale-factor, 0.5)));
	  }

	  75% {
	    transform: scale(0.5);
	    transform: scale(calc(1 - var(--ua-scale-factor, 0.5)));
	  }
	}

	.ua-animation.ua-growshrink {
	  --ua-scale-factor: 0.5;
	  animation-name: ua-growshrink;
	  animation-timing-function: linear;
	}

	.ua-animation.ua-shrinkgrow {
	  --ua-scale-factor: 0.5;
	  animation-name: ua-growshrink;
	  animation-timing-function: linear;
	  animation-direction: reverse;
	}

	/* Generic animations - 
	   allow setting tranformations and relative position from inline */
	@keyframes ua-to {
	  from {
	    transform: none;
	    top: 0;
	    /* @noflip */
	    left: 0;
	  }
	}

	.ua-animation.ua-to,
	.ua-animation.ua-from,
	.ua-animation.ua-fromto,
	.ua-animation.ua-toandback {
	  animation-name: ua-to;
	  animation-fill-mode: both;
	  position: relative;
	}

	.ua-animation.ua-from {
	  animation-direction: reverse;
	}

	.ua-animation.ua-fromto {
	  animation-direction: alternate-reverse;
	}

	.ua-animation.ua-toandback {
	  animation-direction: alternate;
	}
}