/* ==========================================================================
   BM Kruismarquee
   Twee schuine banden die elkaar kruisen en tegen elkaar in lopen.
   Alles begint met bmk-. Alleen CSS, geen script.
   ========================================================================== */

.bmk {
	--bmk-kop: 'BM Frama', 'PP Frama', 'Helvetica Neue', Arial, sans-serif;
	--bmk-breedte: 150vw;
	--bmk-ruimte: 96px;
	--bmk-schaal: 1;
	--bmk-tan: .07;
	--bmk-licht: #F4F1ED;
	--bmk-donker: #0A0A0B;

	position: relative;
	isolation: isolate;
	overflow: clip;
	margin: 0;
	padding: var(--bmk-ruimte) 0;
	font-family: var(--bmk-kop);
	-webkit-font-smoothing: antialiased;
}

.bmk-bg-licht     { background: var(--bmk-licht); }
.bmk-bg-donker    { background: var(--bmk-donker); }
.bmk-bg-gesplitst { background: linear-gradient(var(--bmk-licht) 50%, var(--bmk-donker) 50%); }
.bmk-bg-geen      { background: transparent; }

.bmk-sr {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* De banden: tekstgrootte hier, zodat de hoogte in em kan */
.bmk-banden {
	position: relative;
	/* bandhoogte plus wat de kanteling aan hoogte toevoegt */
	height: calc(1.42em + var(--bmk-breedte) * var(--bmk-tan));
	font-size: calc(clamp(30px, 4.6vw, 70px) * var(--bmk-schaal));
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.028em;
}

.bmk-caps .bmk-banden { text-transform: uppercase; letter-spacing: -.012em; }

.bmk-band {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--bmk-breedte);
	padding: .2em 0;
	transform: translate(-50%, -50%) rotate(var(--bmk-hoek));
	transform-origin: center;
	overflow: hidden;
	will-change: transform;
}

.bmk-band-1 {
	--bmk-hoek: var(--bmk-hoek-1);
	--bmk-duur: var(--bmk-duur-1);
	background: var(--bmk-vlak-1);
	color: var(--bmk-fg-1);
	z-index: 1;
}
.bmk-band-1 .bmk-accent { color: var(--bmk-accent-1); }

.bmk-band-2 {
	--bmk-hoek: var(--bmk-hoek-2);
	--bmk-duur: var(--bmk-duur-2);
	background: var(--bmk-vlak-2);
	color: var(--bmk-fg-2);
	z-index: 2;
	box-shadow: 0 22px 48px -22px rgba(0, 0, 0, .55);
}
.bmk-band-2 .bmk-accent { color: var(--bmk-accent-2); }

/* Dun randje licht op de voorste band, zodat hij los komt van de achterste */
.bmk-band-2::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(255, 255, 255, .04);
}

/* Het spoor: twee identieke rijen, de eerste schuift precies zijn breedte op */
.bmk-spoor {
	display: flex;
	width: max-content;
	animation: bmkLoop var(--bmk-duur, 40s) linear infinite;
}
.bmk-band[data-richting="rechts"] .bmk-spoor { animation-direction: reverse; }
.bmk-pauze .bmk-band:hover .bmk-spoor { animation-play-state: paused; }

@keyframes bmkLoop {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.bmk-rij {
	display: flex;
	align-items: center;
	flex: none;
}

.bmk-woord {
	display: inline-block;
	padding: 0 .5em;
	white-space: nowrap;
}
.bmk-woord em {
	font-style: normal;
}

/* Korte streep als scheiding, in de tekstkleur */
.bmk-streep {
	display: inline-block;
	flex: none;
	width: .62em;
	height: .13em;
	margin: 0 .16em;
	border-radius: 99px;
	background: currentColor;
	opacity: .92;
}

/* Smalle schermen: iets grotere letter dan de vw zou geven, banden breder */
@media (max-width: 760px) {
	.bmk { padding: calc(var(--bmk-ruimte) * .55) 0; }
	.bmk-banden { font-size: calc(clamp(26px, 8.2vw, 38px) * var(--bmk-schaal)); }
	.bmk { --bmk-breedte: 190vw; }
}

@media (prefers-reduced-motion: reduce) {
	.bmk-spoor { animation: none; }
}

/* In de Elementor-editor blijft alles zichtbaar en loopt het gewoon */
.elementor-editor-active .bmk { overflow: clip; }

/* PP Frama heeft een smalle woordspatie; iets ruimer leest beter. */
.bmk { word-spacing: .06em; }