/**
 * Interactieve/dynamische UI-elementen: scroll-voortgangsbalk, ticker,
 * WhatsApp-knop, cursor-gloed en versterkte hover-animaties.
 */

/* --- Scroll-voortgangsbalk: vult naarmate je verder naar beneden scrollt --- */
.scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: var(--color-border);
	z-index: 200;
}

.scroll-progress__fill {
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, var(--color-accent-dark), var(--color-accent));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 100ms linear;
}

/* --- Cursor-gloed: volgt de muis met lichte vertraging (via JS lerp) --- */
.cursor-glow {
	position: fixed;
	top: 0;
	left: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 9999;
	background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 55%, transparent) 0%, transparent 70%);
	opacity: 0;
	mix-blend-mode: multiply;
	transition: opacity var(--duration-medium) var(--ease-calm), width var(--duration-medium) var(--ease-calm), height var(--duration-medium) var(--ease-calm), background var(--duration-medium) var(--ease-calm);
	will-change: transform;
}

.cursor-glow.is-visible {
	opacity: 0.8;
}

.cursor-glow.is-active {
	width: 64px;
	height: 64px;
	background: radial-gradient(circle, color-mix(in srgb, var(--color-highlight) 55%, transparent) 0%, transparent 70%);
}

/* --- Magnetische primaire knoppen --- */
.cta-button.is-magnetic {
	transition: transform 0.2s var(--ease-calm), background-color var(--duration-fast) var(--ease-calm), box-shadow var(--duration-fast) var(--ease-calm);
}

/* --- Diensten-ticker --- */
.ticker {
	background-color: color-mix(in srgb, var(--color-vitality) 88%, var(--color-bg));
	overflow: hidden;
	padding-block: var(--space-xs);
}

.ticker__track {
	display: flex;
	width: max-content;
	animation: ticker-scroll 70s linear infinite;
}

.ticker:hover .ticker__track {
	animation-play-state: paused;
}

.ticker__group {
	display: flex;
	flex-shrink: 0;
}

.ticker__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-md);
	padding-inline: var(--space-md);
	color: color-mix(in srgb, var(--color-bg) 92%, transparent);
	font-weight: 500;
	font-size: 0.95rem;
	white-space: nowrap;
}

.ticker__dot {
	color: color-mix(in srgb, var(--color-highlight) 75%, var(--color-vitality));
	font-size: 0.7rem;
}

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

/* Direct onder de (sticky) header: compact houden op kleine schermen. */
@media (max-width: 560px) {
	.ticker {
		padding-block: var(--space-2xs);
	}

	.ticker__item {
		font-size: 0.9rem;
		gap: var(--space-sm);
		padding-inline: var(--space-sm);
	}
}

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

	.ticker__group[aria-hidden='true'] {
		display: none;
	}
}

/* --- Zwevende WhatsApp-knop --- */
.whatsapp-button {
	position: fixed;
	right: var(--space-md);
	bottom: var(--space-md);
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #25d366;
	color: #ffffff;
	border-radius: 50%;
	box-shadow: 0 8px 22px rgba(37, 211, 102, 0.45);
	z-index: 500;
	animation: whatsapp-pop 0.4s var(--ease-calm) 1.2s backwards;
	transition: transform var(--duration-fast) var(--ease-calm), box-shadow var(--duration-fast) var(--ease-calm);
}

.whatsapp-button:hover,
.whatsapp-button:focus-visible {
	transform: scale(1.08);
	box-shadow: 0 12px 28px rgba(37, 211, 102, 0.55);
}

.whatsapp-button__icon {
	width: 28px;
	height: 28px;
}

@keyframes whatsapp-pop {
	from {
		transform: scale(0);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

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