/* neusta integrate – Scroll-Effekte (nur Frontend).
   Browser ohne Scroll-Timeline-Unterstützung zeigen alles statisch im Endzustand. */

@keyframes ni-rise { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: none; } }
@keyframes ni-fill { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes ni-grow { from { transform: scale(0.86); border-radius: 36px; } to { transform: scale(1); border-radius: 0; } }
@keyframes ni-drift { from { transform: translateX(3%); } to { transform: translateX(-14%); } }
@keyframes ni-parallax { from { transform: translateY(-10%) scale(1.18); } to { transform: translateY(10%) scale(1.18); } }
@keyframes ni-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ni-check { from { background-color: transparent; } to { background-color: var(--ni-green); } }
@keyframes ni-step { from { opacity: 0.28; } to { opacity: 1; } }
@keyframes ni-line { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ni-net { from { transform: scale(0.9); opacity: 0.55; } to { transform: scale(1.04); opacity: 1; } }
@keyframes ni-hero-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-70px); } }

@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {

	.is-style-ni-rise,
	.ni-tl-item {
		animation: ni-rise linear both;
		animation-timeline: view();
		animation-range: entry 5% entry 100%;
	}

	.is-style-ni-fill {
		--ni-fill-on: #ffffff;
		--ni-fill-off: rgba(255, 255, 255, 0.2);
		color: transparent !important;
		background-image: linear-gradient(90deg, var(--ni-fill-on) 0 50%, var(--ni-fill-off) 50% 100%);
		background-size: 200% 100%;
		background-position: 100% 0;
		-webkit-background-clip: text;
		background-clip: text;
		animation: ni-fill linear both;
		animation-timeline: view();
		animation-range: entry 100% cover 55%;
	}

	.wp-block-image.is-style-ni-grow img {
		animation: ni-grow linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 45%;
	}

	.ni-net {
		animation: ni-net linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 50%;
	}

	.ni-hero > :not(.ni-net) {
		animation: ni-hero-out linear both;
		animation-timeline: scroll(root);
		animation-range: 60px 560px;
	}

	.is-style-ni-parallax .wp-block-cover__image-background {
		animation: ni-parallax linear both;
		animation-timeline: view();
		animation-range: cover 0% cover 100%;
	}

	/* Timeline: Linie füllt sich mit dem Lesefortschritt */
	.ni-timeline { view-timeline-name: --ni-tl; }
	.ni-timeline::after {
		animation: ni-line linear both;
		animation-timeline: --ni-tl;
		animation-range: entry 70% exit 30%;
	}

	/* Arbeitsweise: Balken und Haken folgen dem jeweiligen Schritt (Timeline-Name inline) */
	.ni-panel__bar {
		transform-origin: left center;
		animation: ni-bar linear both;
		animation-range: entry 25% entry 100%;
	}
	.ni-panel__check {
		animation: ni-check linear both;
		animation-range: entry 90% entry 100%;
	}
	.ni-step {
		animation: ni-step linear both;
		animation-timeline: view();
		animation-range: entry 20% entry 100%;
	}

	@media (min-width: 782px) {
		.wp-block-group.is-style-ni-drift {
			animation: ni-drift linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
	}
}
}