/* ==========================================================================
   FINI — motion: scroll-in reveals, hero intro, reduced-motion guardrails
   Hover effects live next to their components; this file holds the system.

   How reveals work: assets/js/fini.js adds .fini-reveal to sections that are
   below the fold, then .is-inview once they scroll into view. Without
   JavaScript nothing is ever hidden.
   ========================================================================== */

.js .fini-reveal {
	opacity: 0;
	transform: translateY(var(--wp--custom--motion--afstand));
	transition:
		opacity var(--fini-rustig) var(--fini-ease),
		transform var(--fini-rustig) var(--fini-ease);
	transition-delay: calc(var(--fini-i, 0) * var(--wp--custom--motion--stagger));
}

.js .fini-reveal.fini-reveal--links {
	transform: translateX(calc(-2 * var(--wp--custom--motion--afstand)));
}

.js .fini-reveal.fini-reveal--rechts {
	transform: translateX(calc(2 * var(--wp--custom--motion--afstand)));
}

.js .fini-reveal.is-inview {
	opacity: 1;
	transform: none;
}

/* Once revealed, drop the delay so hover transitions on children stay snappy. */
.js .fini-reveal.is-done {
	transition-delay: 0s;
}

/* Hero text: short fade-up on page load (never scroll-driven; protects LCP). */
.js .wp-block-cover[class*="is-style-fini-hero"] .wp-block-cover__inner-container > * {
	animation: fini-hero-in var(--fini-rustig) var(--fini-ease) both;
}

.js .wp-block-cover[class*="is-style-fini-hero"] .wp-block-cover__inner-container > :nth-child(2) { animation-delay: 90ms; }
.js .wp-block-cover[class*="is-style-fini-hero"] .wp-block-cover__inner-container > :nth-child(3) { animation-delay: 180ms; }
.js .wp-block-cover[class*="is-style-fini-hero"] .wp-block-cover__inner-container > :nth-child(n+4) { animation-delay: 260ms; }

@keyframes fini-hero-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

/* Mix & Match "+" badges give one small pulse when the row appears. */
.js .is-inview .fini-products--mixmatch .fini-card::after,
.js .fini-products--mixmatch.is-inview .fini-card::after {
	animation: fini-pulse 600ms var(--fini-ease) 500ms 1 both;
}

@keyframes fini-pulse {
	0% { scale: 1; }
	45% { scale: 1.18; }
	100% { scale: 1; }
}

/* Cross-fade used by tabs and filtered grids. */
.fini-fade-swap {
	animation: fini-fade-in var(--fini-normaal) var(--fini-ease) both;
}

@keyframes fini-fade-in {
	from { opacity: 0; }
}

/* Visitors who prefer reduced motion: no movement, no zoom, no smooth scroll. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}

	.js .fini-reveal {
		opacity: 1;
		transform: none;
	}

	.fini-card:hover .fini-card__img,
	.wp-block-group.is-style-fini-kaart:hover > .wp-block-image img,
	.fini-products--mixmatch .fini-card:hover .fini-card__tile,
	.fini-products--compact .fini-card:hover,
	.wp-block-button .wp-block-button__link:hover,
	.wp-block-group.is-style-fini-paneel:hover,
	.wp-block-group.is-style-fini-banner:hover {
		transform: none;
	}
}