/* bhb-effecten (17-09-2026): kleine effecten, zie functions.php. Uitzetten: filter bhb_effecten. */

/* In beeld komen bij het scrollen (klassen zet effecten.js, alleen onder de vouw). */
.bhb-in-beeld {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.bhb-in-beeld.bhb-zichtbaar {
	opacity: 1;
	transform: none;
}
/* Knoppen hebben hieronder een eigen (zwaardere) overgang; tijdens het in beeld komen deze. */
#content .fusion-button.bhb-in-beeld {
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Foto's met een vaste verhouding: zacht inzoomen bij aanwijzen (niet de golf in de slider). */
#content .fusion-imageframe.has-aspect-ratio:not(.bhb-golf) {
	overflow: hidden;
	isolation: isolate; /* Safari: afgeronde hoeken blijven rond tijdens het zoomen */
}
#content .fusion-imageframe.has-aspect-ratio:not(.bhb-golf) img {
	transition: transform 0.7s ease;
}
#content .fusion-imageframe.has-aspect-ratio:not(.bhb-golf):hover img {
	transform: scale(1.04);
}

/* Knoppen: iets omhoog met een lichte schaduw. */
#content .fusion-button,
.bhb-chat .fusion-button {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
#content .fusion-button:hover,
.bhb-chat .fusion-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(25, 51, 95, 0.18);
}

/* Chatknop: twee keer zacht pulseren na drie seconden, iets groter bij aanwijzen. */
.bhb-chatknop {
	transition: transform 0.2s ease;
	animation: bhb-puls 2s ease-out 3s 2;
}
.bhb-chatknop:hover {
	transform: scale(1.07);
}
@keyframes bhb-puls {
	0% { box-shadow: 0 0 0 0 rgba(155, 195, 32, 0.55); }
	70% { box-shadow: 0 0 0 16px rgba(155, 195, 32, 0); }
	100% { box-shadow: 0 0 0 0 rgba(155, 195, 32, 0); }
}

/* Minder beweging: niets. */
@media (prefers-reduced-motion: reduce) {
	.bhb-in-beeld,
	#content .fusion-imageframe img,
	#content .fusion-button,
	.bhb-chat .fusion-button,
	.bhb-chatknop {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
}