/* Contact — wit met zwarte reuzentypo, centrale scrollende e-mailband
   die ook tijdens hover blijft bewegen. Hover: vulling blurt. */
* {
	box-sizing: border-box;
}

body.contact {
	position: static;
	top: auto;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	background: #fff;
	color: #000;
	display: flex;
	flex-direction: column;
}

body.contact mark {
	background: #000;
	color: #fff;
}

body.contact ::selection {
	background: #000;
	color: #fff;
}

/* midden: gecentreerde stapel */
.contact-plate {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: clamp(18px, 3.4vh, 34px);
	padding: clamp(70px, 10vh, 110px) 0 clamp(70px, 10vh, 110px);
}

.kicker {
	margin: 0;
	font: 700 clamp(11px, 1vw, 14px) "scandia-web", sans-serif;
	text-transform: uppercase;
	letter-spacing: .22em;
}

.sub {
	margin: 0;
	font: 500 clamp(13px, 1.2vw, 17px) "scandia-web", sans-serif;
}

/* centrale band met scrollend e-mailadres */
.mailband {
	position: relative;
	display: block;
	width: 100vw;
	padding: clamp(26px, 6vh, 60px) 0;
	border-top: 1px solid rgba(0, 0, 0, .4);
	border-bottom: 1px solid rgba(0, 0, 0, .4);
	overflow: hidden;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}

.scroll {
	display: inline-flex;
	white-space: nowrap;
	will-change: transform;
	animation: mailscroll 30s linear infinite;
}

.chunk {
	font: 700 clamp(40px, 9vw, 160px)/1.05 "scandia-line-web", sans-serif;
	letter-spacing: .005em;
}

.scroll.fill .chunk {
	color: #000;
	transition: filter .25s ease;
}

/* hover: vulling blurt, band scrolt door */
.mailband:hover .scroll.fill .chunk {
	filter: blur(7px);
}

@keyframes mailscroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.scroll {
		animation: none;
	}
	.scroll.fill .chunk {
		transition: none;
	}
}