/*! Cakery Topbar. Instelbare waarden komen als custom properties binnen op
 *  .ctick, zodat dit bestand statisch blijft. Geen JavaScript: de band loopt
 *  op CSS keyframes. Laadt bewust geen fonts. */

.ctick {
	--ctick-bg1: #241C13;
	--ctick-bg2: #1A130B;
	--ctick-gold: #C9BE9E;
	--ctick-cream: #F4EEE2;
	--ctick-gap: 34px;
	--ctick-speed: 44s;
	--ctick-pad: 11px;
	--ctick-fade: 7%;
	--ctick-glow: rgba(201, 190, 158, .16);
	--ctick-rule: rgba(201, 190, 158, .22);
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--ctick-bg1) 0%, var(--ctick-bg2) 100%);
	color: var(--ctick-cream);
	box-shadow: inset 0 -1px 0 var(--ctick-rule);
}

/* Warme gloed in het midden, een echo van de hero. */
.ctick--glow::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(680px 100px at 50% 120%, var(--ctick-glow), rgba(201, 190, 158, 0) 70%);
	pointer-events: none;
}

.ctick__rail {
	position: relative;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ctick-fade), #000 calc(100% - var(--ctick-fade)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--ctick-fade), #000 calc(100% - var(--ctick-fade)), transparent 100%);
}

/* De reeks staat er twee keer in, vandaar -50%. De halve gap-correctie zit in
   de padding rechts, niet in de keyframe. */
.ctick__track {
	display: flex;
	align-items: center;
	gap: var(--ctick-gap);
	width: max-content;
	padding: var(--ctick-pad) var(--ctick-gap) var(--ctick-pad) 0;
	animation: ctickDrift var(--ctick-speed) linear infinite;
}

.ctick--rtl .ctick__track { animation-direction: reverse; }

.ctick--pause:hover .ctick__track,
.ctick--pause:focus-within .ctick__track {
	animation-play-state: paused;
}

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

.ctick__i {
	color: rgba(244, 238, 226, .82);
	font-size: 10.5px;
	letter-spacing: .26em;
	text-transform: uppercase;
	white-space: nowrap;
}

a.ctick__i {
	color: rgba(244, 238, 226, .82);
	text-decoration: none;
	transition: color .3s ease;
}

a.ctick__i:hover,
a.ctick__i:focus-visible {
	color: var(--ctick-gold);
	outline: none;
}

.ctick__sep {
	flex: none;
	width: 9px;
	height: 9px;
	color: rgba(201, 190, 158, .5);
}

.ctick__sep--dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
}

.ctick__sep--slash {
	width: auto;
	height: auto;
	font-size: 10.5px;
	line-height: 1;
}

@media (max-width: 700px) {
	.ctick {
		--ctick-gap: 24px;
		--ctick-speed: 32s;
		--ctick-pad: 9px;
	}

	.ctick__i {
		font-size: 9.5px;
		letter-spacing: .22em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ctick__track { animation: none; }
	.ctick__rail { overflow-x: auto; }
}