/*
 * 01 — ANIMATIES (hele site)
 * Subtiel en vloeiend: één timing voor alles, zachte hovers, en secties die
 * bij het scrollen zacht in beeld komen (klasse mi-reveal wordt door
 * animaties.js in vv-site-core gezet; zonder JS staat alles gewoon in beeld).
 * Regels:
 *  - Alleen opacity, kleur, achtergrond, marge/padding en background-size
 *    animeren. Geen schaduwen (wens van Loïc). Geen transform op klikvlak-blokken of links
 *    (WERKWIJZE §9); transform alleen op beelden (img) en op de reveal,
 *    die na afloop weer op "none" staat.
 *  - Bezoekers met "minder beweging" (prefers-reduced-motion) krijgen niets
 *    dat beweegt, enkel kleurovergangen.
 */

:root {
	--mi-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--mi-snel: 0.2s;
	--mi-traag: 0.6s;
}

/* Basisovergangen op alles wat van kleur of vorm verandert. */
a,
button,
.wp-element-button,
.mi-nummer,
.mi-reviews-pijl,
.mi-reviews-dot {
	transition:
		color var(--mi-snel) var(--mi-ease),
		background-color var(--mi-snel) var(--mi-ease),
		border-color var(--mi-snel) var(--mi-ease),
		opacity var(--mi-snel) var(--mi-ease),
		padding var(--mi-snel) var(--mi-ease),
		background-size var(--mi-snel) var(--mi-ease);
}

/* Knoppen: alleen kleur en achtergrond gaan zacht over, geen lift of schaduw. */
.wp-block-button__link.wp-element-button {
	transition:
		background-color var(--mi-snel) var(--mi-ease),
		color var(--mi-snel) var(--mi-ease);
}

/* Tekstlinks met limoen onderlijn: de lijn wordt iets dikker bij hover. */
.mi-link a,
.mi-onderlijn {
	border-bottom-color: transparent;
	background-image: linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 2px;
	transition: background-size var(--mi-snel) var(--mi-ease);
}

.mi-link a:hover,
.mi-onderlijn:hover {
	opacity: 1;
	background-size: 100% 3px;
}

/* Navigatielinks: limoen lijntje groeit van links naar rechts. */
.mi-nav .wp-block-navigation a {
	background-image: linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 2px;
	padding-bottom: 3px;
	transition: background-size 0.3s var(--mi-ease), opacity var(--mi-snel) var(--mi-ease);
}

.mi-nav .wp-block-navigation a:hover,
.mi-nav .wp-block-navigation .current-menu-item > a {
	opacity: 1;
	background-size: 100% 2px;
}

/* Header: wordt iets compacter zodra de bezoeker scrolt (animaties.js). */
.mi-header {
	transition: padding 0.3s var(--mi-ease);
}

header.wp-block-template-part.is-gescrold .mi-header {
	padding-top: 12px;
	padding-bottom: 12px;
}

/* Logo: geen hover-effect. */
.wp-block-site-logo a:hover,
.wp-block-site-logo a:hover img {
	opacity: 1;
}

/* Beelden: trage, kleine zoom in hun kader bij hover. */
.mi-hero-beeld,
.mi-project-beeld,
.wp-block-post-featured-image {
	overflow: hidden;
}

.mi-hero-beeld img,
.mi-project-beeld img,
.wp-block-post-featured-image img {
	transition: transform 1.2s var(--mi-ease), opacity 0.4s var(--mi-ease);
}

.mi-hero-beeld:hover img,
.vv-klikvlak:hover .mi-project-beeld img,
.wp-block-post:hover .wp-block-post-featured-image img,
.mi-project-beeld a:hover img {
	transform: scale(1.03);
}

/* Formuliervelden: randkleur gaat zacht over bij focus. */
.forminator-input,
.forminator-textarea,
.mi-formulierkaart select {
	transition: border-color var(--mi-snel) var(--mi-ease);
}

/* Reveal bij scrollen: van iets lager en onzichtbaar naar zijn plek. */
.mi-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--mi-traag) var(--mi-ease), transform var(--mi-traag) var(--mi-ease);
	transition-delay: var(--mi-vertraging, 0s);
}

.mi-reveal.is-zichtbaar {
	opacity: 1;
	transform: none;
}

/* Reviews: nieuwe slide vloeit in (de track scrolt al smooth). */
.mi-reviews .wp-block-post {
	transition: opacity 0.4s var(--mi-ease);
}

/* Minder beweging: niets verschuift, alleen kleuren gaan zacht over. */
@media (prefers-reduced-motion: reduce) {
	.mi-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.mi-hero-beeld:hover img,
	.wp-block-post:hover .wp-block-post-featured-image img,
	.mi-project-beeld a:hover img {
		transform: none;
	}

	.mi-reviews .wp-block-post-template {
		scroll-behavior: auto;
	}
}