/*
 * Scroll-Effekte (inc/motion.php, assets/js/motion.js).
 * Nur Bewegung und Deckkraft, keine Farben: Farben kommen aus theme.json.
 * Ohne JavaScript bleibt alles sichtbar, weil js-motion nur dann gesetzt wird.
 */

/* Abschnitte blenden ein */
.js-motion [data-reveal] {
	transition: opacity .8s ease, transform .8s ease;
}

.js-motion [data-reveal]:not(.is-in) {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
}

.js-motion [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* Karten und Schritte innerhalb eines Abschnitts, gestaffelt über --d */
.js-motion .is-stagger {
	transition: opacity .6s ease var(--d, 0ms), transform .6s ease var(--d, 0ms);
}

.js-motion .is-stagger:not(.is-in) {
	opacity: 0;
	transform: translate3d(0, 20px, 0);
}

.js-motion .is-stagger.is-in {
	opacity: 1;
	transform: none;
}

/* Hero: Bild wird größer gezeichnet, damit der Parallax-Versatz keinen Rand zeigt */
.diconsus-hero {
	overflow: hidden;
}

.js-motion .diconsus-hero__image {
	transform: scale(1.12);
	will-change: transform;
}

/* Buttons heben sich beim Hover und Fokus leicht an */
.wp-block-button__link {
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.js-motion [data-reveal],
	.js-motion .is-stagger,
	.wp-block-button__link {
		transition: none !important;
	}

	.wp-block-button__link:hover,
	.wp-block-button__link:focus-visible {
		transform: none;
	}
}