/*! Cakery Marquee. Instelbare waarden komen als custom properties binnen op
 *  .cmarq, zodat dit bestand statisch blijft. Laadt bewust geen fonts. */

.cmarq {
	--cmarq-h: 360px;
	--cmarq-land: .76;
	--cmarq-gap: 18px;
	--cmarq-speed: 64s;
	--cmarq-cut: 12px;
	--cmarq-cut-line: 7px;
	--cmarq-zoom: 1.05;
	--cmarq-sat: .94;
	--cmarq-bright: .97;
	--cmarq-line-color: rgba(251, 248, 242, .65);
	--cmarq-line-inset: 11px;
	--cmarq-fade: 8%;
	--cmarq-bg-top: #EBE6D9;
	--cmarq-bg-bottom: #EBE6D9;
	--cmarq-glow: rgba(169, 160, 131, 0);
	--cmarq-glow-x: 50%;
	--cmarq-rule: rgba(169, 160, 131, .45);
	--cmarq-cap: #FFF8EA;
	--cmarq-handle: #877E63;
	--cmarq-handle-line: rgba(169, 160, 131, .45);
	--cmarq-handle-hover: #2A2117;
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(1100px 420px at var(--cmarq-glow-x) 100%, var(--cmarq-glow), rgba(169, 160, 131, 0) 70%),
		linear-gradient(180deg, var(--cmarq-bg-top) 0%, var(--cmarq-bg-bottom) 100%);
	/* Verticale rustmaat: de instelling van de site wint, met de
	   ontwerpwaarde van deze sectie als terugval. */
	padding-top: var(--cakery-space-top, 74px);
	padding-bottom: var(--cakery-space-bottom, 80px);
}

.cmarq--rules::before,
.cmarq--rules::after {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(169, 160, 131, 0), var(--cmarq-rule) 18%, var(--cmarq-rule) 82%, rgba(169, 160, 131, 0));
}

.cmarq--rules::before { top: 0; }
.cmarq--rules::after { bottom: 0; }

.cmarq__head {
	width: min(1240px, 100%);
	margin: 0 auto 32px;
	padding: 0 24px;
	text-align: center;
}

.cmarq__title {
	margin: 0;
	font-family: "Myorie", Georgia, serif;
	font-size: clamp(28px, 3.6vw, 42px);
	font-weight: 400;
	line-height: 1.15;
}

.cmarq__handle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 13px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--cmarq-handle-line);
	color: var(--cmarq-handle);
	font-size: 11.5px;
	letter-spacing: .2em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color .35s ease, border-color .35s ease;
}

.cmarq__handle svg {
	width: 15px;
	height: 15px;
}

.cmarq__handle:hover,
.cmarq__handle:focus-visible {
	border-color: var(--cmarq-handle-hover);
	color: var(--cmarq-handle-hover);
}

.cmarq__rail {
	position: relative;
	overflow: hidden;
}

/* Zachte randen, zodat er niets hard in beeld schiet. */
.cmarq--fade .cmarq__rail {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--cmarq-fade), #000 calc(100% - var(--cmarq-fade)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--cmarq-fade), #000 calc(100% - var(--cmarq-fade)), transparent 100%);
}

/* De reeks staat er twee keer in; -50% min een halve gap valt daardoor precies
   samen met het beginpunt. Zonder die correctie zie je een sprong. */
.cmarq__track {
	display: flex;
	align-items: center;
	gap: var(--cmarq-gap);
	width: max-content;
	animation: cmarqDrift var(--cmarq-speed) linear infinite;
}

.cmarq--rtl .cmarq__track { animation-direction: reverse; }

.cmarq--pause .cmarq__rail:hover .cmarq__track,
.cmarq--pause .cmarq__rail:focus-within .cmarq__track {
	animation-play-state: paused;
}

@keyframes cmarqDrift {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(calc(-50% - var(--cmarq-gap) / 2), 0, 0); }
}

/* Het ongelijke ritme van staand en liggend is het idee; niet gelijktrekken. */
.cmarq-tile {
	--c: var(--cmarq-cut);
	position: relative;
	flex: none;
	height: var(--cmarq-h);
	overflow: hidden;
	margin: 0;
	background: #EDE6D9;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.cmarq-tile--port { width: calc(var(--cmarq-h) * .8); }

.cmarq-tile--land {
	height: calc(var(--cmarq-h) * var(--cmarq-land));
	width: calc(var(--cmarq-h) * var(--cmarq-land) * 1.25);
}

.cmarq-tile img,
.cmarq-tile video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(var(--cmarq-sat)) brightness(var(--cmarq-bright));
	transition: transform 1.2s cubic-bezier(.2, .7, .3, 1), filter .7s ease;
}

.cmarq-tile:hover img,
.cmarq-tile:hover video,
.cmarq-tile:focus-within img,
.cmarq-tile:focus-within video {
	filter: none;
	transform: scale(var(--cmarq-zoom));
}

.cmarq-tile__line {
	--c: var(--cmarq-cut-line);
	position: absolute;
	inset: var(--cmarq-line-inset);
	border: 1px solid var(--cmarq-line-color);
	opacity: 0;
	pointer-events: none;
	transform: scale(1.015);
	transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.cmarq-tile__cap {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 42px 20px 18px;
	background: linear-gradient(180deg, rgba(26, 19, 11, 0), rgba(26, 19, 11, .82));
	color: var(--cmarq-cap);
	font-size: 12px;
	letter-spacing: .02em;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .5s ease, transform .55s cubic-bezier(.2, .7, .3, 1);
}

/* Ook bij toetsenbordfocus, anders is een bijschrift onbereikbaar. */
.cmarq-tile:hover .cmarq-tile__line,
.cmarq-tile:hover .cmarq-tile__cap,
.cmarq-tile:focus-within .cmarq-tile__line,
.cmarq-tile:focus-within .cmarq-tile__cap {
	opacity: 1;
	transform: none;
}

@media (max-width: 700px) {
	.cmarq {
		--cmarq-h: 230px;
		--cmarq-gap: 10px;
		/* Shorthand zou de instelling van de site overschrijven, dus ook hier
		   longhand met een eigen terugval voor smalle schermen. */
		padding-top: var(--cakery-space-top, 50px);
		padding-bottom: var(--cakery-space-bottom, 56px);
	}

	.cmarq-tile__cap {
		padding: 28px 12px 12px;
		font-size: 11px;
	}
}

/* Geen animatie: dan wordt het een gewone scrollbare strook en staan de
   bijschriften vast aan, want hover bestaat dan als interactie niet meer. */
@media (prefers-reduced-motion: reduce) {
	.cmarq__track { animation: none; }
	.cmarq__rail { overflow-x: auto; }

	.cmarq-tile img,
	.cmarq-tile video {
		filter: none;
		transition: none;
	}

	.cmarq-tile:hover img,
	.cmarq-tile:hover video {
		transform: none;
	}

	.cmarq-tile__line,
	.cmarq-tile__cap {
		opacity: 1;
		transform: none;
		transition: none;
	}
}