/* Alleen actief naast .fb-motion-preview; zonder queryparameter verandert niets. */

.fb-motion-preview #intro .fb-motion-word {
	display: inline-block;
	white-space: nowrap;
}

.fb-motion-preview #intro .fb-motion-char {
	display: inline-block;
	transform-origin: 50% 85%;
}

.fb-motion-preview.fb-motion-ready #intro .fb-motion-title-char {
	opacity: 0;
	filter: blur(3px);
	transform: translate3d(0, .5em, 0) rotateX(-18deg);
	animation: fb-char-in 520ms cubic-bezier(.16, 1, .3, 1) forwards;
}

.fb-motion-preview.fb-motion-ready #intro .fb-motion-title-char {
	animation-delay: calc(50ms + (var(--fb-char-index) * 12ms));
}

/* Ondertitel volgens het goedgekeurde ontwerp: richtinggevend, maar rustig. */
.fb-motion-preview #intro .intro-links .layout-kop.layout-1 {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	column-gap: 16px;
	align-items: center;
	text-align: left;
}

.fb-motion-preview #intro .fb-motion-subtitle-arrow {
	width: 42px;
	height: 42px;
	overflow: visible;
	color: #1f2141;
}

.fb-motion-preview #intro .fb-motion-subtitle-arrow path {
	fill: none;
	stroke: currentColor;
	stroke-width: 12;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fb-motion-preview.fb-motion-ready #intro .fb-motion-subtitle-arrow path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.fb-motion-preview.fb-motion-ready #intro .fb-motion-arrow-stem {
	animation: fb-draw-arrow 560ms cubic-bezier(.45, 0, .25, 1) var(--fb-arrow-delay, 1600ms) forwards;
}

.fb-motion-preview.fb-motion-ready #intro .fb-motion-arrow-head {
	animation: fb-draw-arrow 280ms cubic-bezier(.45, 0, .25, 1) calc(var(--fb-arrow-delay, 1600ms) + 500ms) forwards;
}

.fb-motion-preview.fb-motion-ready #intro .intro-links .layout-kop.layout-1 h2 {
	opacity: 0;
	clip-path: inset(0 100% 0 0);
	transform: skewX(-3deg);
	transform-origin: 0 50%;
	animation: fb-subtitle-unfold 620ms cubic-bezier(.16, 1, .3, 1) var(--fb-subtitle-delay, 2450ms) forwards;
}

@keyframes fb-char-in {
	to {
		opacity: 1;
		filter: blur(0);
		transform: translate3d(0, 0, 0) rotateX(0);
	}
}

@keyframes fb-draw-arrow {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes fb-subtitle-unfold {
	60% {
		opacity: 1;
	}

	to {
		opacity: 1;
		clip-path: inset(0 0 0 0);
		transform: skewX(0);
	}
}

@keyframes fb-subtitle-unfold-center {
	60% {
		opacity: 1;
	}

	to {
		opacity: 1;
		clip-path: inset(0 0 0 0);
		transform: scale(1);
	}
}

@media (max-width: 767.98px) {
	.fb-motion-preview #intro .intro-links .layout-kop.layout-1 {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
		text-align: center;
	}

	.fb-motion-preview #intro .fb-motion-subtitle-arrow {
		display: none;
	}

	.fb-motion-preview.fb-motion-ready #intro .fb-motion-title-char {
		animation-duration: 440ms;
		animation-delay: calc(30ms + (var(--fb-char-index) * 8ms));
	}

	.fb-motion-preview.fb-motion-ready #intro .intro-links .layout-kop.layout-1 h2 {
		clip-path: inset(0 50% 0 50%);
		transform: scale(.98);
		transform-origin: 50% 50%;
		animation-name: fb-subtitle-unfold-center;
		animation-duration: 560ms;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fb-motion-preview #intro .fb-motion-char,
	.fb-motion-preview #intro .fb-motion-subtitle-arrow path,
	.fb-motion-preview #intro .intro-links .layout-kop.layout-1 h2 {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		filter: none !important;
		transform: none !important;
		clip-path: none !important;
	}

	.fb-motion-preview #intro .fb-motion-subtitle-arrow path {
		stroke-dashoffset: 0 !important;
	}
}

/* Alleen zichtbaar in de afgeschermde iconenpreview: ?fb_icons=1. */
.fb-icons-preview #intro .contact-knopje img {
	content: url('../img/intro-icons/contact.svg');
}

.fb-icons-preview #intro .intro-kaarten .col:nth-child(1) .card-icon img {
	content: url('../img/intro-icons/communicatie.svg');
}

.fb-icons-preview #intro .intro-kaarten .col:nth-child(2) .card-icon img {
	content: url('../img/intro-icons/planning-budget.svg');
}

.fb-icons-preview #intro .intro-kaarten .col:nth-child(3) .card-icon img {
	content: url('../img/intro-icons/kwaliteit.svg');
}