/*
 * Scroll animations (js/animations.js).
 *
 * Markup: class="animated fadeInUp delay-200ms" on any element (blocks use abefactors_anim_class()).
 * Effects: fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, zoomIn, bounceInUp,
 *          drawCorner (only for the yellow corner shape, see below).
 *
 * Accessibility
 * - Nothing is hidden by CSS alone: without JavaScript every element is visible and nothing moves.
 * - Waiting elements are only transparent (opacity), never visibility:hidden or display:none, so screen
 *   readers and find-in-page always reach the text.
 * - No movement at all for prefers-reduced-motion (WCAG 2.3.3) and in print.
 */

/* Waiting to scroll into view (set by the script only for elements below the first screen). */
.animated.anim-wait {
	opacity: 0;
}

/* Playing. The effect class sets animation-name, the delay-* class (or the script) sets animation-delay. */
.animated.anim-run {
	animation-duration: 0.7s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.fadeIn { animation-name: abeFadeIn; }
.fadeInUp { animation-name: fadeInUp; }
.fadeInDown { animation-name: fadeInDown; }
.fadeInLeft { animation-name: fadeInLeft; }
.fadeInRight { animation-name: fadeInRight; }
.zoomIn { animation-name: abeZoomIn; }
.bounceInUp { animation-name: bounceInUp; }

/* Short distances, so big elements (cards, photos) do not travel across the screen. */
@keyframes abeFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fadeInUp {
	from { opacity: 0; transform: translate3d(0, 40px, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes fadeInDown {
	from { opacity: 0; transform: translate3d(0, -40px, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes fadeInLeft {
	from { opacity: 0; transform: translate3d(-40px, 0, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes fadeInRight {
	from { opacity: 0; transform: translate3d(40px, 0, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes abeZoomIn {
	from { opacity: 0; transform: scale3d(0.94, 0.94, 0.94); }
	to { opacity: 1; transform: none; }
}

@keyframes bounceInUp {
	0%, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
	0% { opacity: 0; transform: translate3d(0, 60px, 0); }
	60% { opacity: 1; transform: translate3d(0, -12px, 0); }
	75% { transform: translate3d(0, 6px, 0); }
	90% { transform: translate3d(0, -3px, 0); }
	100% { transform: none; }
}

/*
 * drawCorner: a yellow corner shape "draws" itself like a route: the upright arm grows up from the bottom,
 * turns on the inner corner (its outer end running along the cut) and runs out to the right edge.
 * The arms keep their full width all the time.
 *
 * Markup: <svg class="... animated drawCorner" style or class setting --dc-x / --dc-y><path …/></svg>
 * The animation runs on the <path>, so the percentages are those of the shape itself, even where the SVG box
 * is wider or taller than the shape (preserveAspectRatio "meet"). A mirrored shape (scaleX(-1)) draws mirrored.
 *   --dc-x  arm width / shape width     --dc-y  arm width / shape height
 * Shapes in the theme (viewBox, arm width):
 *   home banner 490 x 435, 190 · page title 359 x 223, 122 · parallax banner 556 x 433, 188 ·
 *   testimonial slider 475 x 565, 189
 */
.home_banner_shape { --dc-x: 38.78%; --dc-y: 43.68%; }
.page_title_shape { --dc-x: 33.98%; --dc-y: 54.71%; }
.parallax_banner_shape { --dc-x: 33.81%; --dc-y: 43.42%; }
.testimonial_slider_shape { --dc-x: 39.79%; --dc-y: 33.45%; }

.drawCorner.anim-run > path {
	animation: abeDrawCorner 1.3s linear both;
	animation-delay: inherit;
}

@keyframes abeDrawCorner {
	/* Points: outer corner, front edge (outer end), top arm end (top), top arm end (bottom), inner corner,
	 * bottom of the upright (inside), bottom of the upright (outside). Same 7 points in every step, so the
	 * browser moves them smoothly. Steps are timed by length (upright, corner, top arm). */
	0% {
		clip-path: polygon(0 100%, 0 100%, 0 100%, var(--dc-x) 100%, var(--dc-x) 100%, var(--dc-x) 100%, 0 100%);
		animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
	}
	/* Upright arm up to the cut corner. */
	44% {
		clip-path: polygon(0 var(--dc-y), 0 var(--dc-y), 0 var(--dc-y), var(--dc-x) var(--dc-y), var(--dc-x) var(--dc-y), var(--dc-x) 100%, 0 100%);
		animation-timing-function: linear;
	}
	/* The front edge turns on the inner corner; its outer end runs along the cut. */
	66% {
		clip-path: polygon(0 var(--dc-y), var(--dc-x) 0, var(--dc-x) 0, var(--dc-x) var(--dc-y), var(--dc-x) var(--dc-y), var(--dc-x) 100%, 0 100%);
		animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);
	}
	/* Top arm out to the right edge. */
	100% {
		clip-path: polygon(0 var(--dc-y), var(--dc-x) 0, 100% 0, 100% var(--dc-y), var(--dc-x) var(--dc-y), var(--dc-x) 100%, 0 100%);
	}
}

/* Stagger delays used by the blocks (other values are set by the script). */
.animated.delay-100ms { animation-delay: 0.1s; }
.animated.delay-200ms { animation-delay: 0.2s; }
.animated.delay-300ms { animation-delay: 0.3s; }
.animated.delay-400ms { animation-delay: 0.4s; }
.animated.delay-500ms { animation-delay: 0.5s; }
.animated.delay-600ms { animation-delay: 0.6s; }
.animated.delay-700ms { animation-delay: 0.7s; }
.animated.delay-800ms { animation-delay: 0.8s; }

/* Before the script runs (and in the editor) the effect classes must not play on their own. */
.animated:not(.anim-run) {
	animation-name: none;
}

@media (prefers-reduced-motion: reduce), print {
	.animated,
	.animated.anim-wait,
	.animated.anim-run,
	.drawCorner.anim-run > path {
		opacity: 1;
		transform: none;
		animation: none;
	}
}