/* Webbaukasten – Scroll-Animationen (Ausgangszustand nur, wenn JavaScript aktiv ist) */
.wbk-motion [data-wbk-anim] {
	transition:
		opacity var(--m-dur, 650ms) ease,
		transform var(--m-dur, 650ms) cubic-bezier(.2, .7, .2, 1),
		filter var(--m-dur, 650ms) ease,
		clip-path calc(var(--m-dur, 650ms) * 1.2) cubic-bezier(.65, 0, .35, 1);
	transition-delay: var(--m-delay, 0ms);
	will-change: opacity, transform;
}
.wbk-motion [data-wbk-anim="fade"] { opacity: 0; }
.wbk-motion [data-wbk-anim="fade-up"] { opacity: 0; transform: translateY(var(--m-dist, 30px)); }
.wbk-motion [data-wbk-anim="slide-left"] { opacity: 0; transform: translateX(calc(var(--m-dist, 30px) * -1.4)); }
.wbk-motion [data-wbk-anim="slide-right"] { opacity: 0; transform: translateX(calc(var(--m-dist, 30px) * 1.4)); }
.wbk-motion [data-wbk-anim="zoom"] { opacity: 0; transform: scale(var(--m-scale, .93)); }
.wbk-motion [data-wbk-anim="blur"] { opacity: 0; filter: blur(var(--m-blur, 8px)); }
.wbk-motion [data-wbk-anim="flip"] { opacity: 0; transform: perspective(900px) rotateX(var(--m-rot, 15deg)) translateY(calc(var(--m-dist, 30px) / 2)); transform-origin: 50% 100%; }
.wbk-motion [data-wbk-anim="reveal"] { clip-path: inset(0 100% 0 0); }
.wbk-motion [data-wbk-anim="pop"] { opacity: 0; transform: scale(.8); transition-timing-function: ease, cubic-bezier(.34, 1.56, .64, 1); }
.wbk-motion [data-wbk-anim].wbk-in { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); }
.wbk-motion .wbk-float.wbk-in { animation: wbk-float 6s ease-in-out calc(var(--m-dur, 650ms) + 200ms) infinite; }
@keyframes wbk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Parallax nur mit CSS (scroll-gesteuerte Animation), ältere Browser zeigen die Grafik einfach normal */
@supports (animation-timeline: view()) {
	.wbk-parallax .wbk-illustration svg, .wbk-parallax .wp-block-image img {
		animation: wbk-parallax linear both;
		animation-timeline: view();
		animation-range: cover;
	}
	@keyframes wbk-parallax { from { transform: translateY(32px); } to { transform: translateY(-32px); } }
}

@media (prefers-reduced-motion: reduce) {
	.wbk-motion [data-wbk-anim] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; animation: none !important; }
}