/*
 * Fade in up voor de blokken van elke sectie (gedrag in js/00-animatie.js).
 *
 * Een blok is een tekstblok in de hoofdkolom van een sectie, of een kolom (kaart, stap, vak) van een binnenrij. Het komt
 * onzichtbaar en --fm-anim-y lager binnen en schuift in 1,6 s (ease-out cubic) op zijn plaats zodra het in beeld komt;
 * blokken die samen in beeld komen (kaarten naast elkaar) na elkaar, met 0,12 s ertussen. De achtergrond van de sectie beweegt niet.
 * De hero doet het meteen bij het laden, zonder script: titel, intro en knoppen elk apart, na elkaar. De header komt op elke pagina
 * binnen met alleen een fade in, zonder beweging (hij staat vast bovenaan). De footer doet mee op elke pagina, de secties alleen
 * op de homepage (niet op de documentpagina's).
 *
 * Met de eigenschap translate, niet transform: een transform op hetzelfde element blijft zo ongemoeid. 00-ankers.js trekt die
 * verschuiving af, zodat een ankerlink landt waar het onderwerp staat als de animatie klaar is.
 * Verborgen alleen met JavaScript (Salient haalt no-js van <html> voor de inhoud getekend wordt). Draait 00-animatie.js niet
 * (geen .fm-anim-js op <html>), dan komt alles na 4 s toch tevoorschijn. Bij 'minder beweging' en bij afdrukken: geen animatie.
 */
:root {
	--fm-anim-y: 40px;
	--fm-anim-duur: 1.6s;
	--fm-anim-curve: cubic-bezier(.215, .61, .355, 1);
}
@media (max-width: 690px) {
	:root { --fm-anim-y: 24px; }
}

@keyframes fm-fade-in-up {
	from { opacity: 0; translate: 0 var(--fm-anim-y); }
}
@keyframes fm-fade-in {
	from { opacity: 0; }
}
@keyframes fm-vangnet {
	to { opacity: 1; translate: none; }
}

@media screen and (prefers-reduced-motion: no-preference) {
	/* header: alleen fade in, op elke pagina */
	#header-outer {
		animation: fm-fade-in var(--fm-anim-duur) var(--fm-anim-curve) backwards;
	}
	/* hero: meteen bij het laden; titel, intro en knoppen elk apart, na elkaar (de tekstkolom zelf beweegt niet, anders telt het op) */
	body.home .wpb_row.fm-s01 .fm-s01-tekst > * {
		animation: fm-fade-in-up var(--fm-anim-duur) var(--fm-anim-curve) backwards;
	}
	body.home .wpb_row.fm-s01 .fm-s01-tekst > :nth-child(2) { animation-delay: .12s; }
	body.home .wpb_row.fm-s01 .fm-s01-tekst > :nth-child(3) { animation-delay: .24s; }

	/* de andere secties en de footer: verborgen tot ze in beeld komen (.fm-in) */
	html:not(.no-js) body.home .wpb_row.fm:not(.fm-s01) > .row_col_wrap_12 > .wpb_column > .vc_column-inner > .wpb_wrapper > :not(.inner_row):not(.fm-in),
	html:not(.no-js) body.home .wpb_row.fm .inner_row > .row_col_wrap_12_inner > .wpb_column:not(.fm-in),
	html:not(.no-js) .wpb_row.fm-footer > .row_col_wrap_12 > .wpb_column > .vc_column-inner > .wpb_wrapper > :not(.inner_row):not(.fm-in) {
		opacity: 0;
		translate: 0 var(--fm-anim-y);
	}
	/* tot de animatie klaar is (.fm-klaar); daarna geldt weer de eigen transition van het blok */
	html:not(.no-js) body.home .wpb_row.fm:not(.fm-s01) > .row_col_wrap_12 > .wpb_column > .vc_column-inner > .wpb_wrapper > :not(.inner_row):not(.fm-klaar),
	html:not(.no-js) body.home .wpb_row.fm .inner_row > .row_col_wrap_12_inner > .wpb_column:not(.fm-klaar),
	html:not(.no-js) .wpb_row.fm-footer > .row_col_wrap_12 > .wpb_column > .vc_column-inner > .wpb_wrapper > :not(.inner_row):not(.fm-klaar) {
		transition: opacity var(--fm-anim-duur) var(--fm-anim-curve) var(--fm-anim-wacht, 0s),
			translate var(--fm-anim-duur) var(--fm-anim-curve) var(--fm-anim-wacht, 0s);
	}
	/* een ankerpunt (div.fm-anker, 00-ankers.js) in een blok schuift tegengesteld mee, met dezelfde timing (de wachttijd erft
	   het van het blok): het staat zo tijdens de hele animatie stil. Salient leest het punt één keer uit en scrolt dan naar die
	   vaste plek; bij een hash in de URL (/#employers) gebeurde dat terwijl de kaart al binnenschoof, en dat scheelde 3 tot 7px. */
	html.fm-anim-js:not(.no-js) body.home .wpb_row.fm:not(.fm-s01) > .row_col_wrap_12 > .wpb_column > .vc_column-inner > .wpb_wrapper > :not(.inner_row):not(.fm-in) .fm-anker,
	html.fm-anim-js:not(.no-js) body.home .wpb_row.fm .inner_row > .row_col_wrap_12_inner > .wpb_column:not(.fm-in) .fm-anker {
		translate: 0 calc(-1 * var(--fm-anim-y));
	}
	html.fm-anim-js:not(.no-js) body.home .wpb_row.fm:not(.fm-s01) > .row_col_wrap_12 > .wpb_column > .vc_column-inner > .wpb_wrapper > :not(.inner_row):not(.fm-klaar) .fm-anker,
	html.fm-anim-js:not(.no-js) body.home .wpb_row.fm .inner_row > .row_col_wrap_12_inner > .wpb_column:not(.fm-klaar) .fm-anker {
		transition: translate var(--fm-anim-duur) var(--fm-anim-curve) var(--fm-anim-wacht, 0s);
	}
	/* vangnet zonder script */
	html:not(.no-js):not(.fm-anim-js) body.home .wpb_row.fm:not(.fm-s01) > .row_col_wrap_12 > .wpb_column > .vc_column-inner > .wpb_wrapper > :not(.inner_row),
	html:not(.no-js):not(.fm-anim-js) body.home .wpb_row.fm .inner_row > .row_col_wrap_12_inner > .wpb_column,
	html:not(.no-js):not(.fm-anim-js) .wpb_row.fm-footer > .row_col_wrap_12 > .wpb_column > .vc_column-inner > .wpb_wrapper > :not(.inner_row) {
		animation: fm-vangnet 0s 4s forwards;
	}
}