/**
 * How It Works Animation – osadzony SVG
 * Główna baza to plik how-it-works.svg – edytuj go, żeby zmieniać diagram.
 */

.hiw--embed {
	background: #fff;
	padding: 2rem 0;
}

.hiw__embed {
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	line-height: 0;
}

/* SVG responsywne: zachowuje proporcje 1920×1080 */
.hiw__embed .hiw__svg,
.hiw__embed svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.hiw__error {
	padding: 2rem;
	text-align: center;
	color: #5e5e63;
}

/* Kulki – ping pulse (rozchodząca się fala), środek = center center */
.hiw__embed .hiw-kulka-ping {
	transform-box: fill-box;
	transform-origin: center center;
	animation: hiw-kulka-ping 1.4s ease-out infinite;
	pointer-events: none;
}

@keyframes hiw-kulka-ping {
	0% {
		transform: scale(1);
		opacity: 0.55;
	}
	100% {
		transform: scale(2.4);
		opacity: 0;
	}
}