/*
Entrance animations, ported from the Wix Studio "motion" presets used in the design.
The keyframes are the ones Wix generates; only the names of the custom properties were
kept so the timing can be compared 1:1.

Usage: <el data-motion="tilt|glide|slide-up|reveal-left">. v2/js/motion.js adds .in when
the element enters the viewport (once), which starts the animation. Without JavaScript
every element is simply visible.
*/

html.js [data-motion] { opacity: 0; }
html.js [data-motion].in { opacity: 1; }

/* ---- Keyframes (Wix) ---- */
@keyframes motion-fadeIn {
	0%   { opacity: 0; }
	100% { opacity: var(--comp-opacity, 1); }
}

@keyframes motion-tiltInRotate {
	0% { animation-timing-function: step-end; transform: perspective(800px); }
	0.0001% { transform: perspective(800px) translateZ(calc((var(--motion-height, 200px) / 2) * -1)) rotateX(-90deg) translateZ(calc(var(--motion-height, 200px) / 2)) rotate(var(--comp-rotate-z, 0deg)); }
	100% { transform: perspective(800px) translateZ(calc((var(--motion-height, 200px) / 2) * -1)) rotateX(0deg) translateZ(calc(var(--motion-height, 200px) / 2)) rotate(var(--comp-rotate-z, 0deg)); }
}

@keyframes motion-tiltInClip {
	0.0001% { clip-path: var(--motion-clip-start, polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)); transform: rotateZ(var(--motion-rotate-z, 0deg)); }
	100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transform: rotateZ(0deg); }
}

@keyframes motion-glideIn {
	0% { opacity: 0; animation-timing-function: step-end; }
	0.0001% { opacity: var(--comp-opacity, 1); transform: translate(var(--motion-translate-x), var(--motion-translate-y)) rotate(var(--comp-rotate-z, 0deg)); }
	100% { opacity: var(--comp-opacity, 1); transform: translate(0, 0) rotate(var(--comp-rotate-z, 0deg)); }
}

@keyframes motion-slideIn {
	0.0001% { opacity: var(--comp-opacity, 1); transform: rotate(var(--comp-rotate-z, 0deg)) translate(var(--motion-translate-x, -100%), var(--motion-translate-y, 0%)); clip-path: var(--motion-clip-start, polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)); }
	100% { transform: rotate(var(--comp-rotate-z, 0deg)) translate(0px, 0px); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}

@keyframes motion-revealIn {
	0% { opacity: 0; animation-timing-function: step-end; }
	0.0001% { opacity: var(--comp-opacity, 1); clip-path: var(--motion-clip-start, polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)); }
	100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}

/* ---- Presets as used on the homepage ---- */

/* Section headings: fade 0.28s + 3D tilt 1.4s + clip 1.12s, ease-out cubic */
html.js [data-motion="tilt"].in {
	--motion-clip-start: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
	--motion-rotate-z: 30deg;   /* Wix: #comp:not([data-motion-enter=done]) { --motion-rotate-z: 30deg } */
	animation-name: motion-fadeIn, motion-tiltInRotate, motion-tiltInClip;
	animation-duration: .28s, 1.4s, 1.12s;
	animation-timing-function: var(--ease-out-cubic), var(--ease-out-cubic), var(--ease-out-cubic);
	animation-fill-mode: backwards, backwards, backwards;
	/* Wix composites the clip animation's rotateZ ON TOP of the 3D rotateX instead of replacing it:
	   that is what gives the "swinging in from far away" look */
	animation-composition: replace, replace, add;
}

/* "INTELLIGENCE EVERYWHERE": glide in horizontally from beyond the left page edge, 1.2s ease-in-out cubic.
   Wix: --motion-translate-x = -(element left + 100%), translate-y = 0 */
html.js [data-motion="glide"].in {
	--motion-translate-x: calc(-100% - 86 * var(--u));
	--motion-translate-y: 0px;
	animation: motion-glideIn 1.2s var(--ease-in-out-cubic) backwards;
}

/* Stat rows and figures: slide up out of a clip, with a fade, 1.2s */
html.js [data-motion="slide-up"].in {
	--motion-clip-start: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);   /* Wix: clip opens from the bottom edge */
	--motion-translate-x: 0%;
	--motion-translate-y: 100%;
	animation-name: motion-slideIn, motion-fadeIn;
	animation-duration: 1.2s, 1.2s;
	animation-timing-function: var(--ease-in-out-cubic), var(--ease-in-out-cubic);
	animation-fill-mode: backwards, backwards;
}

/* Rules and labels: wipe in from the left, 1.2s */
html.js [data-motion="reveal-left"].in {
	--motion-clip-start: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
	animation: motion-revealIn 1.2s var(--ease-in-out-cubic) backwards;
}

@media (prefers-reduced-motion: reduce) {
	html.js [data-motion] { opacity: 1; }
	html.js [data-motion].in { animation: none !important; }
}