/* ---------------------------------------------------------------------------
 * Blok: Hero.
 * Donkerblauwe paginakop: links h1, intro en twee knoppen, rechts een foto
 * in een schuine blauwe vorm met drie zwevende icoon-cirkels, onderaan een
 * USP-balk met deellijnen en een ronde pijl op de rand naar het volgende
 * blok. Maten uit het Figma-ontwerp (desktop 1920, mobiel 390); de mobiele
 * montage is exact de desktopmontage maal 0.39786, vandaar --hero-schaal.
 * ------------------------------------------------------------------------- */

.blok-hero {
	--hero-schaal: 1;

	position: relative;
	background: var(--c-donkerblauw);
	color: var(--c-wit);
	padding-bottom: var(--blok-pb); /* vaste blokruimte, inc/blok-ritme.php */
	/* De foto-montage loopt bewust tot (net voorbij) de schermrand, zoals in
	 * het ontwerp; zonder clip geeft dat horizontale scroll op mobiel. */
	overflow-x: clip;
}

/* --------------------------------------------------------------------------
 * Watermerk-vinkjes in de achtergrond
 * ------------------------------------------------------------------------ */

.blok-hero__decor {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	color: var(--c-blauw); /* de watermerk-SVG's kleuren mee via currentColor */
}

.blok-hero__watermerk {
	position: absolute;
	display: block;
}

.blok-hero__watermerk svg {
	width: 100%;
	height: 100%;
}

.blok-hero__watermerk--links {
	left: calc(50% - 877px);
	top: 24px;
	width: 375.9px;
	height: 346.7px;
}

.blok-hero__watermerk--rechts {
	left: calc(50% + 287px);
	top: 410px;
	width: 584.2px;
	height: 506px;
}

/* --------------------------------------------------------------------------
 * Bovenste deel: tekstkolom links, fotomontage rechts
 * ------------------------------------------------------------------------ */

.blok-hero__boven {
	/* Diepte voor de muisvolgende tilt op de montage (zie hero.js). */
	perspective: 1200px;
	position: relative;
	padding-top: 226px;
}

.blok-hero__tekst {
	max-width: 688px;
}

.blok-hero__titel {
	margin: 0;
	font-size: 56px;
	line-height: 60px;
	color: var(--c-wit);
}

/* Wisselende woorden in de titel (hero.js). Alle woorden liggen in dezelfde
   gridcel, dus de stapel is zo breed als het langste woord en de regel
   verspringt niet. Het actieve woord staat op de regel, de rest wacht er
   onder; het vertrekkende woord schuift naar boven weg. Padding plus
   negatieve marge geeft staartletters (g, p) ruimte binnen de clip. */
.titel-wissel__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.titel-wissel__stapel {
	display: inline-grid;
	padding: 0 0.06em 0.15em;
	margin: 0 -0.06em -0.15em;
	clip-path: inset(0);
}

.titel-wissel__woord {
	grid-area: 1 / 1;
	white-space: nowrap;
	transform: translateY(110%);
}

.titel-wissel__woord.is-actief,
.titel-wissel__woord.is-weg {
	transition: transform 0.7s cubic-bezier(0.65, 0, 0.25, 1);
}

.titel-wissel__woord.is-actief {
	transform: none;
}

.titel-wissel__woord.is-weg {
	transform: translateY(-110%);
}

.blok-hero__intro {
	max-width: 567px;
	margin: 23px 0 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.blok-hero__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 21px;
}

/* --------------------------------------------------------------------------
 * Fotomontage: schuine vormen, gemaskerde foto, lijnen en icoon-cirkels.
 * Alle maten schalen mee met --hero-schaal.
 * ------------------------------------------------------------------------ */

.blok-hero__montage {
	will-change: transform;
	position: absolute;
	top: -12px;
	right: 63px;
	width: calc(754.03px * var(--hero-schaal));
	height: calc(665.83px * var(--hero-schaal));
}

.blok-hero__vorm {
	position: absolute;
	display: block;
	width: calc(675.2px * var(--hero-schaal));
	height: calc(577.17px * var(--hero-schaal));
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* De vorm-SVG's staan 9.7px hoger in hun node-kader dan Figma ze rendert;
 * de top-offsets hieronder zijn daarop gecorrigeerd (gemeten op de render). */
.blok-hero__vorm--achter {
	left: calc(25.78px * var(--hero-schaal));
	top: calc(49.97px * var(--hero-schaal));
	background-image: url("../../img/hero-vorm-achter.svg");
}

.blok-hero__vorm--blauw {
	left: calc(78.83px * var(--hero-schaal));
	top: calc(85.34px * var(--hero-schaal));
	background-image: url("../../img/hero-vorm-blauw.svg");
}

/* De foto schuift bij het openen van de pagina uit het punt van het blauwe
 * vlak naar rechtsonder in beeld (zie hero.js). Het transform-origin ligt op
 * de linkerhoek van het blauwe vlak: dat punt zit op 1.2% / 48.9% van de
 * fotobox (blauw staat 8.13px rechts en 324.36px onder de fotohoek).
 * Start-toestand staat in de CSS zodat er geen flits van de eindstand is;
 * hero.js haalt hem weg zodra de pagina (en een eventuele transitie) klaar is
 * en heeft daarvoor een vangnet-timer. */
.blok-hero__montage[data-hero-uitschuif] .blok-hero__foto {
	opacity: 0;
	transform: translate(-1.6%, -2.4%) scale(0.9);
	transform-origin: 1.2% 48.9%;
	transition:
		opacity 900ms var(--ease-out),
		transform 1300ms var(--ease-out);
}

.blok-hero__montage[data-hero-uitschuif].is-uitgeschoven .blok-hero__foto {
	opacity: 1;
	transform: none;
}

/* Bewegingsarm: geen uitschuif, de foto staat meteen goed. */
@media (prefers-reduced-motion: reduce) {
	.blok-hero__montage[data-hero-uitschuif] .blok-hero__foto {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.blok-hero__foto {
	position: absolute;
	left: calc(70.7px * var(--hero-schaal));
	top: 0;
	width: calc(675.2px * var(--hero-schaal));
	height: calc(665.83px * var(--hero-schaal));
	-webkit-mask-image: url("../../img/hero-masker.svg");
	mask-image: url("../../img/hero-masker.svg");
	-webkit-mask-size: calc(675.2px * var(--hero-schaal)) calc(663.63px * var(--hero-schaal));
	mask-size: calc(675.2px * var(--hero-schaal)) calc(663.63px * var(--hero-schaal));
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.blok-hero__foto img {
	position: absolute;
	left: calc(-238.36px * var(--hero-schaal));
	top: calc(-40.85px * var(--hero-schaal));
	width: calc(1064.01px * var(--hero-schaal));
	height: calc(709.34px * var(--hero-schaal));
	max-width: none;
}

.blok-hero__lijnen {
	position: absolute;
	left: calc(30.33px * var(--hero-schaal));
	top: calc(113.55px * var(--hero-schaal));
	width: calc(133.99px * var(--hero-schaal));
	height: calc(136.24px * var(--hero-schaal));
	background: url("../../img/hero-lijnen.svg") no-repeat 0 0 / 100% 100%;
}

.blok-hero__cirkel {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #1f3a4e; /* cirkelvulling uit het ontwerp, geen token */
	box-shadow: 5px 5px 25px 0 rgb(0 0 0 / 5%);
}

.blok-hero__cirkel .icoon {
	display: flex;
}

.blok-hero__cirkel--klik {
	left: calc(101.33px * var(--hero-schaal));
	top: calc(188.79px * var(--hero-schaal));
	width: calc(122px * var(--hero-schaal));
	height: calc(122px * var(--hero-schaal));
}

.blok-hero__cirkel--klik svg {
	width: calc(68.95px * var(--hero-schaal));
	height: calc(68.95px * var(--hero-schaal));
}

.blok-hero__cirkel--bladwijzer {
	left: calc(120.2px * var(--hero-schaal));
	top: calc(74.16px * var(--hero-schaal));
	width: calc(93.7px * var(--hero-schaal));
	height: calc(93.7px * var(--hero-schaal));
}

.blok-hero__cirkel--bladwijzer svg {
	width: calc(56.45px * var(--hero-schaal));
	height: calc(56.45px * var(--hero-schaal));
}

.blok-hero__cirkel--database {
	left: 0;
	top: calc(147.54px * var(--hero-schaal));
	width: calc(87.55px * var(--hero-schaal));
	height: calc(87.55px * var(--hero-schaal));
}

.blok-hero__cirkel--database svg {
	width: calc(52.75px * var(--hero-schaal));
	height: calc(52.75px * var(--hero-schaal));
}

/* --------------------------------------------------------------------------
 * USP-balk: drie items met icoon, titel en tekst, gescheiden door lijnen
 * ------------------------------------------------------------------------ */

.blok-hero__usps {
	list-style: none;
	display: flex;
	gap: 58px;
	width: 1265px;
	max-width: 100%;
	margin: 211px auto 0;
	padding: 0;
}

.blok-hero__usp {
	position: relative;
	flex: 0 1 383px;
}

/* Verticale deellijn tussen de items. */
.blok-hero__usp:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -19px;
	width: 1px;
	height: 60px;
	transform: translateY(-50%);
	background: rgb(255 255 255 / 13%);
}

.blok-hero__usp-binnen {
	position: relative;
	display: block;
	min-height: 83px;
	padding-left: 93px;
	color: var(--c-wit);
	text-decoration: none;
}

/* Subtiele lichte kaart achter het item bij hover (uit de hover-frames). */
.blok-hero__usp-binnen::before {
	content: "";
	position: absolute;
	inset: -12px -16px;
	border-radius: var(--radius);
	background: rgb(255 255 255 / 0%);
	transition: background var(--dur-kort) var(--ease-out);
}

.blok-hero__usp-binnen:hover::before {
	background: rgb(255 255 255 / 7%);
}

.blok-hero__usp-icoon {
	position: absolute;
	left: 0;
	top: 10px;
	width: 60px;
	height: 60px;
}

.blok-hero__usp-icoon .icoon {
	display: flex;
}

.blok-hero__usp-icoon svg {
	width: 60px;
	height: 60px;
}

.blok-hero__usp-titel {
	position: relative;
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
	text-transform: uppercase;
}

.blok-hero__usp-tekst {
	position: relative;
	display: block;
	margin-top: 9px;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
 * Ronde scrollpijl, half over de rand naar het volgende blok
 * ------------------------------------------------------------------------ */

.blok-hero__pijl {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 5;
	transform: translate(-50%, 50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--c-blauw);
	color: var(--c-wit);
	cursor: pointer;
	transition: background-color var(--dur-kort) var(--ease-out), transform var(--dur-kort) var(--ease-out);
}

.blok-hero__pijl:hover {
	background: color-mix(in srgb, var(--c-blauw) 85%, var(--c-wit));
	transform: translate(-50%, calc(50% + 3px));
}

.blok-hero__pijl:focus-visible {
	outline: 2px solid var(--c-wit);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * Smallere desktops: montage iets kleiner en dichter op de rand, zodat hij
 * niet over de tekstkolom valt.
 * ------------------------------------------------------------------------ */

@media (min-width: 1200px) and (max-width: 1549px) {
	.blok-hero {
		--hero-schaal: 0.8;
	}

	.blok-hero__montage {
		top: 30px;
		right: 20px;
	}
}

/* --------------------------------------------------------------------------
 * Tablet: montage gecentreerd boven de tekst, USP's onder elkaar.
 * ------------------------------------------------------------------------ */

@media (max-width: 1199px) {
	.blok-hero {
		--hero-schaal: 0.75;
	}

	.blok-hero__decor {
		display: none;
	}

	.blok-hero__boven {
		display: flex;
		flex-direction: column;
		padding-top: 0;
	}

	.blok-hero__montage {
		/* Relative in plaats van static: de vormen en cirkels binnenin zijn
		 * absoluut gepositioneerd en moeten op de montage blijven ankeren. */
		position: relative;
		top: 0;
		right: auto;
		order: -1;
		margin: 40px auto 0;
	}

	.blok-hero__tekst {
		margin-top: 48px;
	}

	.blok-hero__titel {
		font-size: 44px;
		line-height: 50px;
	}

	.blok-hero__usps {
		flex-direction: column;
		gap: 28px;
		width: auto;
		margin-top: 56px;
	}

	.blok-hero__usp {
		flex: 0 1 auto;
	}

	.blok-hero__usp:not(:last-child)::after {
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * Mobiel (ontwerp 390): montage klein en gecentreerd, USP-balk verborgen.
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.blok-hero {
		--hero-schaal: 0.39786;
	}

	.blok-hero__montage {
		margin-top: 30px;
	}

	.blok-hero__tekst {
		margin-top: 52px;
	}

	.blok-hero__titel {
		font-size: 32px;
		line-height: 36px;
	}

	.blok-hero__intro {
		margin-top: 12px;
	}

	.blok-hero__knoppen {
		flex-direction: column;
		align-items: flex-start;
		gap: 13px;
		margin-top: 34px;
	}

	.blok-hero__usps {
		display: none;
	}

	.blok-hero__pijl {
		width: 42px;
		height: 42px;
	}

	.blok-hero__pijl svg {
		width: 16.4px;
		height: 17.8px;
	}
}

/* --------------------------------------------------------------------------
 * Videovariant: schermvullende video-achtergrond (ontwerp 40000017:5774/5775)
 * met donkere overlaylagen achter de content. Zonder content (kale variant)
 * renderen de overlays en het decor niet. Maten uit het 1920-ontwerp,
 * omgerekend naar vw: linkervlak 869px = 45.26vw, verloop 646px = 33.65vw,
 * bovenverloop 208px = 10.83vw, onderverloop 294px = 15.31vw.
 * ------------------------------------------------------------------------ */

.blok-hero--video {
	height: max(680px, 100svh);
	padding-bottom: 0;
}

.blok-hero--video .blok-hero__video {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--c-donkerblauw);
}

.blok-hero--video .blok-hero__video-speler,
.blok-hero--video .blok-hero__video-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blok-hero__overlay {
	position: absolute;
	pointer-events: none;
}

.blok-hero__overlay--links {
	left: 0;
	top: 0;
	bottom: 0;
	width: 45.26vw;
	background: rgb(0 0 0 / 85%);
}

.blok-hero__overlay--verloop {
	left: 45.26vw;
	top: 0;
	bottom: 0;
	width: 33.65vw;
	background: linear-gradient(to right, rgb(0 0 0 / 85%), rgb(0 0 0 / 0%));
}

.blok-hero__overlay--boven {
	left: 0;
	right: 0;
	top: 0;
	height: 10.83vw;
	background: linear-gradient(to bottom, rgb(0 0 0 / 85%), rgb(0 0 0 / 0%));
}

.blok-hero__overlay--onder {
	left: 0;
	right: 0;
	bottom: 0;
	height: 15.31vw;
	background: linear-gradient(to top, rgb(0 0 0 / 80%), rgb(0 0 0 / 0%));
}

/* Content bovenop de videolagen; posities gelijk aan de fotovariant. */
.blok-hero--video .blok-hero__decor,
.blok-hero--video .blok-hero__boven,
.blok-hero--video .blok-hero__usp-balk,
.blok-hero--video .blok-hero__pijl {
	z-index: 1;
}

.blok-hero--video .blok-hero__boven {
	position: relative;
}

/* USP-balk onderin het videovlak (ontwerp: y902.6 op 1080 = 95px boven de
 * onderrand), in plaats van de vaste marge uit de fotovariant. */
.blok-hero--video .blok-hero__usp-balk {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 94px;
}

.blok-hero--video .blok-hero__usps {
	margin-top: 0;
}

@media (max-width: 1199px) {
	/* Zonder tussenontwerp: linkervlak iets smaller zodat er video zichtbaar
	 * blijft, verlopen schalen mee via vw. */
	.blok-hero--video .blok-hero__usp-balk {
		position: static;
	}

	.blok-hero--video {
		height: auto;
		min-height: 100svh;
		padding-bottom: 40px;
	}
}

@media (max-width: 767px) {
	/* Mobiel: een uniform donker vlak voor leesbaarheid; de losse
	 * ontwerplagen zijn desktopmaten. */
	.blok-hero__overlay--links {
		width: 100%;
		background: rgb(0 0 0 / 62%);
	}

	.blok-hero__overlay--verloop {
		display: none;
	}
}