/* ==========================================================================
   BAAN Showroom — animaties (paneel "Animatie") en knop-hover.
   Waarden per blok komen als CSS-variabelen binnen; standaarden uit theme.json
   (settings.custom.motion → --wp--custom--motion--*).
   ========================================================================== */

:root {
	--baan-ease: var(--wp--custom--motion--easing, cubic-bezier(0.22, 1, 0.36, 1));
}

/* ---------- Knoppen: vulling van links naar rechts ----------------------- */
.wp-block-button__link {
	--baan-button-fill-default: var(--wp--preset--color--contrast);
	background-image: linear-gradient(
		var(--baan-button-fill, var(--baan-button-fill-default)),
		var(--baan-button-fill, var(--baan-button-fill-default))
	);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 0% 100%;
	transition:
		background-size var(--wp--custom--motion--button-duration, 450ms) var(--baan-ease),
		color 250ms ease;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	background-size: 100% 100%;
	color: var(--baan-button-text, var(--wp--preset--color--base)) !important;
}

/* ---------- Verschijnen bij scrollen -------------------------------------- */
.baan-reveal {
	--_d: var(--baan-distance, var(--wp--custom--motion--distance, 40px));
	transition-property: opacity, translate, scale, clip-path;
	transition-duration: var(--baan-duration, var(--wp--custom--motion--duration, 800ms));
	transition-delay: var(--baan-delay, 0ms);
	transition-timing-function: var(--baan-ease);
}
.baan-js .baan-reveal:not(.is-inview) { opacity: 0; }
.baan-js .baan-reveal--fade-up:not(.is-inview) { translate: 0 var(--_d); }
.baan-js .baan-reveal--from-left:not(.is-inview) { translate: calc(-1 * var(--_d)) 0; }
.baan-js .baan-reveal--from-right:not(.is-inview) { translate: var(--_d) 0; }
.baan-js .baan-reveal--zoom-in:not(.is-inview) { scale: 0.92; }
/* Onthullen: de kinderen worden geclipt, niet het blok zelf — een geclipt doel
   wordt door IntersectionObserver nooit als zichtbaar gemeld. */
.baan-js .baan-reveal--unveil:not(.is-inview) { opacity: 1; }
.baan-reveal--unveil > * {
	clip-path: inset(0 0 0 0);
	transition: clip-path var(--baan-duration, var(--wp--custom--motion--duration, 800ms)) var(--baan-ease) var(--baan-delay, 0ms);
}
.baan-js .baan-reveal--unveil:not(.is-inview) > * { clip-path: inset(100% 0 0 0); }

/* ---------- Parallax (JS zet --baan-py) ------------------------------------ */
[data-baan-parallax] {
	transform: translate3d(0, var(--baan-py, 0px), 0);
	will-change: transform;
}

/* ---------- Hover op afbeeldingen ---------------------------------------- */
.wp-block-media-text.baan-hover--zoom .wp-block-media-text__media { overflow: hidden; }
.baan-hover--zoom img,
.baan-hover--lift img,
.baan-hover--tilt img,
.wp-block-cover.baan-hover--zoom .wp-block-cover__image-background {
	transition: scale 700ms var(--baan-ease), rotate 700ms var(--baan-ease), translate 500ms var(--baan-ease), filter 500ms ease;
}
.baan-hover--zoom img:hover,
.wp-block-cover.baan-hover--zoom:hover .wp-block-cover__image-background { scale: 1.05; }
.baan-hover--lift img:hover {
	translate: 0 -8px;
	filter: drop-shadow(0 18px 24px rgb(11 19 32 / 0.22));
}
.baan-hover--tilt img:hover { rotate: -2deg; scale: 1.03; }

/* ---------- Minder beweging ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.baan-js .baan-reveal:not(.is-inview) { opacity: 1; translate: none; scale: none; clip-path: none; }
	.baan-js .baan-reveal--unveil:not(.is-inview) > * { clip-path: none; }
	*, *::before, *::after {
		animation: none !important;
		transition-duration: 1ms !important;
	}
	[data-baan-parallax] { transform: none; }
}

/* Inkomende blokken van links/rechts mogen geen horizontale scroll veroorzaken. */
html, body { overflow-x: clip; }