/**
 * Steiger scroll & load animations
 * Initial opacity: 0 prevents flash before JS triggers reveal.
 */

@media (prefers-reduced-motion: no-preference) {

	/* ── Keyframes ── */

	@keyframes steiger-fade-blur-up {
		from {
			opacity: 0;
			transform: translateY(36px);
			filter: blur(10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
			filter: blur(0);
		}
	}

	@keyframes steiger-fade-blur-left {
		from {
			opacity: 0;
			transform: translateX(40px);
			filter: blur(8px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
			filter: blur(0);
		}
	}
  
	@keyframes steiger-fade-blur-right {
		from {
			opacity: 0;
			transform: translateX(-40px);
			filter: blur(8px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
			filter: blur(0);
		}
	}

	@keyframes steiger-scale-fade-in {
		from {
			opacity: 0;
			transform: scale(0.92);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	@keyframes steiger-fade-up {
		from {
			opacity: 0;
			transform: translateY(28px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes steiger-clip-reveal {
		from {
			opacity: 0;
			transform: translateY(20px) scale(1.04);
			clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
		}
		to {
			opacity: 1;
			transform: translateY(0) scale(1);
			clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
		}
	}

	@keyframes steiger-line-grow {
		from {
			opacity: 0;
			transform: translateX(-12px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@keyframes steiger-heading-line-reveal {
		from {
			transform: scaleX(0);
		}
		to {
			transform: scaleX(1);
		}
	}

	/* ── Shared animation utilities ── */

	/* Pre-hide JS-targeted elements before data attributes are applied. */
	html.steiger-js h2.line,
	html.steiger-js h3.line,
	html.steiger-js p.pretitle,
	html.steiger-js .row3 .inner1 figure.wp-block-image,
	html.steiger-js .row3 h4,
	html.steiger-js .row3 ul.wp-block-list li,
	html.steiger-js .row5 .inner1 .wp-block-uagb-container,
	html.steiger-js .row6 .inner1 > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container,
	html.steiger-js .row7 figure.wp-block-image,
	html.steiger-js .row7 h2,
	html.steiger-js .row7 h3,
	html.steiger-js .row7 h4,
	html.steiger-js .row7 p.bdleft,
	html.steiger-js .imgleft.inner .wp-block-uagb-container.img figure,
	html.steiger-js .imgleft.inner .wp-block-uagb-container.line > .uagb-container-inner-blocks-wrap > *,
	html.steiger-js .testimonialsrow .inner1 .wp-block-uagb-container,
	html.steiger-js .cta1 h2,
	html.steiger-js .cta1 p:not(.pretitle),
	html.steiger-js .cta1 .fluentform,
	html.steiger-js .rightcolonly .contentcol > *,
	html.steiger-js .logogal figure.wp-block-image,
	html.steiger-js .counterinside .wp-block-uagb-container,
	html.steiger-js .faqs .wp-block-accordion-heading,
	html.steiger-js .entry-content .btn1,
	html.steiger-js .entry-content a.btn1,
	html.steiger-js p.greybg,
	html.steiger-js .site-above-footer-wrap .site-footer-section {
		opacity: 0;
	}

	[data-steiger-animate] {
		opacity: 0;
		will-change: opacity, transform, filter;
	}

	[data-steiger-animate].steiger-visible {
		animation-fill-mode: forwards;
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	}

	[data-steiger-animate="fade-blur-up"].steiger-visible {
		animation-name: steiger-fade-blur-up;
		animation-duration: 0.85s;
	}

	[data-steiger-animate="fade-blur-left"].steiger-visible {
		animation-name: steiger-fade-blur-left;
		animation-duration: 0.8s;
	}

	[data-steiger-animate="fade-blur-right"].steiger-visible {
		animation-name: steiger-fade-blur-right;
		animation-duration: 0.8s;
	}

	[data-steiger-animate="scale-fade"].steiger-visible {
		animation-name: steiger-scale-fade-in;
		animation-duration: 0.75s;
	}

	[data-steiger-animate="fade-up"].steiger-visible {
		animation-name: steiger-fade-up;
		animation-duration: 0.7s;
	}

	[data-steiger-animate="clip-reveal"].steiger-visible {
		animation-name: steiger-clip-reveal;
		animation-duration: 0.9s;
	}

	[data-steiger-animate="line-grow"].steiger-visible {
		animation-name: steiger-line-grow;
		animation-duration: 0.65s;
	}

	/* Stagger delay via JS-set custom property */
	[data-steiger-animate].steiger-visible {
		animation-delay: var(--steiger-delay, 0ms);
	}

	/* Decorative heading line: draw after heading text reveal */
	h2.line span.line::after,
	h3.line span.line::after {
		width: 100vw;
		transform: scaleX(0);
		transform-origin: left center;
		will-change: transform;
	}

	h2.line.steiger-visible span.line::after,
	h3.line.steiger-visible span.line::after {
		animation: steiger-heading-line-reveal 0.8s linear forwards;
		animation-delay: calc(var(--steiger-delay, 0ms) + 0.15s);
	}

	/* ── Hero (above the fold) ── */

	.home-hero h1.wp-block-heading span.hero1,
	.home-hero h1.wp-block-heading span.hero2,
	.home-hero h1.wp-block-heading span.hero3 {
		opacity: 0;
	}

	.home-hero.steiger-hero-ready h1.wp-block-heading span.hero1,
	.home-hero.steiger-hero-ready h1.wp-block-heading span.hero2,
	.home-hero.steiger-hero-ready h1.wp-block-heading span.hero3 {
		animation: steiger-fade-blur-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}

	.home-hero.steiger-hero-ready h1.wp-block-heading span.hero1 { animation-delay: 0.1s; }
	.home-hero.steiger-hero-ready h1.wp-block-heading span.hero2 { animation-delay: 0.28s; }
	.home-hero.steiger-hero-ready h1.wp-block-heading span.hero3 { animation-delay: 0.46s; }

	.home-hero p {
		opacity: 0;
	}

	.home-hero.steiger-hero-ready p {
		animation: steiger-fade-blur-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
		animation-delay: var(--steiger-hero-delay, 0.64s);
	}

	/* Hero inner pages */
	.home-hero.inner .content > * {
		opacity: 0;
	}

	.home-hero.inner.steiger-hero-ready .content > * {
		animation: steiger-fade-blur-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}

	.home-hero.inner.steiger-hero-ready .content > *:nth-child(1) { animation-delay: 0.1s; }
	.home-hero.inner.steiger-hero-ready .content > *:nth-child(2) { animation-delay: 0.25s; }
	.home-hero.inner.steiger-hero-ready .content > *:nth-child(3) { animation-delay: 0.4s; }
	.home-hero.inner.steiger-hero-ready .content > *:nth-child(4) { animation-delay: 0.55s; }

}

/* Reduced motion: show everything immediately */
@media (prefers-reduced-motion: reduce) {
	[data-steiger-animate],
	.home-hero h1.wp-block-heading span,
	.home-hero p,
	.home-hero.inner .content > * {
		opacity: 1 !important;
		animation: none !important;
	}

	h2.line span.line::after,
	h3.line span.line::after {
		transform: none !important;
	}

	.imgleft figure .steiger-img-zoom,
	.row4:not(.team) figure .steiger-img-zoom {
		transform: none !important;
		transition: none !important;
	}

	.imgleft figure img,
	.row4:not(.team) figure img,
	.row7 figure.wp-block-image img {
		transition: filter 0.3s ease !important;
	}
}

/* Interactive clipped figure overlays */
.imgleft figure, .row4:not(.team) figure {
	position: relative;
	overflow: hidden;
	clip-path: polygon(44px 0, calc( 100% - 44px) 0, 100% 44px, 100% calc( 100% - 44px), calc( 100% - 44px) 100%, 44px 100%, 0 calc( 100% - 44px), 0 44px);
}

.imgleft figure::before, .row4:not(.team) figure::before {
	content: '';
	display: block;
	width: 66%;
	height: 100%;
	position: absolute;
	background: var(--color1);
	mix-blend-mode: overlay;
	clip-path: polygon(0 0, 100% 0%, 62% 100%, 0% 100%);
	left: 0;
	top: 0;
	z-index: 1;
	pointer-events: none;
	transform: translateX(0);
	transition: transform 0.35s ease;
}

.imgleft figure.is-overlay-out::before, .row4:not(.team) figure.is-overlay-out::before {
	transform: translateX(-110%);
}

.imgleft figure img, .row4:not(.team) img {
	display: block;
	filter: grayscale(100%) brightness(0.9) contrast(1.3);
	transition: filter 0.3s ease;
}

.imgleft figure .steiger-img-zoom,
.row4:not(.team) figure .steiger-img-zoom {
	display: block;
	width: 100%;
	transform: scale(1);
	transform-origin: center center;
	transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.imgleft figure .steiger-img-zoom img,
.row4:not(.team) figure .steiger-img-zoom img {
	width: 100%;
	height: 100%;
	display: block;
}

.imgleft figure:hover img,
.imgleft figure.is-overlay-out img,
.row4:not(.team) figure:hover img,
.row4:not(.team) figure.is-overlay-out img {
	filter: grayscale(0%);
}

.imgleft figure:hover .steiger-img-zoom,
.imgleft figure.is-overlay-out .steiger-img-zoom,
.row4:not(.team) figure:hover .steiger-img-zoom,
.row4:not(.team) figure.is-overlay-out .steiger-img-zoom {
	transform: scale(1.2);
	transition: transform 20s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Row 7 — clipped figure overlays (22px corners) */
.row7 figure.wp-block-image {
	position: relative;
	overflow: hidden;
	clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
}

.row7 figure.wp-block-image::before {
	content: '';
	display: block;
	width: 66%;
	height: 100%;
	position: absolute;
	background: var(--color1);
	mix-blend-mode: overlay;
	clip-path: polygon(0 0, 100% 0%, 62% 100%, 0% 100%);
	left: 0;
	top: 0;
	z-index: 1;
	pointer-events: none;
	transform: translateX(0);
	transition: transform 0.35s ease;
}

.row7 figure.wp-block-image.is-overlay-out::before {
	transform: translateX(-110%);
}

.row7 figure.wp-block-image img {
	display: block;
	filter: grayscale(100%) brightness(0.9) contrast(1.3);
	transition: filter 0.3s ease;
}

.row7 figure.wp-block-image:hover img,
.row7 figure.wp-block-image.is-overlay-out img {
	filter: grayscale(0%);
}

/* No red overlay when section has .nored */
.imgleft.nored figure::before,
.row4.nored:not(.team) figure::before {
	display: none;
}