/**
 * Elite Kit — Image Animation.
 *
 * A picture with the animation switched on starts hidden, so it never shows
 * in place and then jumps back to play. The script takes it over as soon as it
 * runs; if it never does, the picture is shown after three seconds anyway.
 */

.ek-img-anim-yes {
	position: relative;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
}

.ek-img-anim-yes:not(.ek-img-anim-running) {
	animation: ek-img-anim-safety-net 0s linear 3s forwards;
}

@keyframes ek-img-anim-safety-net {
	to {
		visibility: visible;
		opacity: 1;
	}
}

.ek-img-anim-yes img {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, clip-path;
}

.ek-img-anim-slice {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	background-repeat: no-repeat;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform;
}

/* Anyone who has asked for less motion gets the picture as it ends up. */
@media (prefers-reduced-motion: reduce) {
	.ek-img-anim-yes {
		visibility: visible !important;
		opacity: 1 !important;
		-webkit-clip-path: none !important;
		clip-path: none !important;
	}

	.ek-img-anim-yes img {
		transform: none !important;
	}

	.ek-img-anim-slice {
		display: none !important;
	}
}