/* Foto-lagen: crossfade + trage zoom-drift op de actieve laag */
.gm-about-photo {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 0; transform: scale(1);
	transition: opacity 1.6s ease;
	will-change: opacity, transform;
}
.gm-about-photo.is-active { opacity: 1; }
.gm-about-photo.is-drifting { transform: scale(1.06); }

/* Pijlers: klikbare knoppen; inactieve gedimd, actieve met rode kantlijn */
.gm-about-pillar {
	background: none; border: 0; padding: 0; margin: 0;
	text-align: left; cursor: pointer;
	border-left: 2px solid rgba(255, 255, 255, .2);
	padding-left: 14px; padding-right: 8px;
	opacity: .45;
	transition: opacity .5s ease, border-color .5s ease;
}
.gm-about-pillar:hover { opacity: .8; }
.gm-about-pillar.is-active {
	opacity: 1;
	border-left-color: var(--color-primary);
}
.gm-about-pillar:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
	border-radius: 2px;
}

/* Eén progress bar: vult over de intervalduur, dan verspringt de foto */
.gm-about-progress {
	position: relative; height: 3px; max-width: 280px;
	border-radius: 2px; background: rgba(255, 255, 255, .15);
	overflow: hidden;
}
.gm-about-progress-fill {
	position: absolute; inset: 0 auto 0 0; width: 0;
	border-radius: 2px; background: var(--color-primary);
}
.gm-about-progress-fill.is-running {
	animation: gm-about-fill var(--gm-about-interval, 8000ms) linear forwards;
}
.gm-about.is-paused .gm-about-progress-fill.is-running { animation-play-state: paused; }
@keyframes gm-about-fill { from { width: 0 } to { width: 100% } }

/* Zonder JS of met reduced motion: eerste foto vast, pijlers allebei vol */
@media (prefers-reduced-motion: reduce) {
	.gm-about-photo { transition: none; }
	.gm-about-photo.is-drifting { transform: none; }
	.gm-about-pillar { opacity: 1; border-left-color: var(--color-primary); transition: none; }
	.gm-about-progress { display: none; }
}