/* Sekcija "Prilagodjen vama" - 3 koraka: brojevi 01 -> 02 -> 03 se pale
   redom, a izmedju njih se iscrtava tanka vertikalna linija (putanja).
   Klase i linije dodaje koraci.js. */

/* Vertikalna linija izmedju brojeva */
.av-step-line {
	position: absolute;
	width: 2px;
	margin-left: -1px;
	background: linear-gradient(180deg, #007aea 0%, rgba(0, 122, 234, 0.35) 100%);
	border-radius: 2px;
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
	pointer-events: none;
	z-index: 2;
}
.av-step-line.av-on {
	transform: scaleY(1);
}

/* Broj koraka: pre paljenja je ugasen, pa se upali uz blagi sjaj */
.av-steps-anim .av-step-badge {
	opacity: 0.3;
	filter: grayscale(1);
	transform: scale(0.88);
	transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.av-steps-anim .av-step-badge.av-on {
	opacity: 1;
	filter: none;
	transform: none;
	animation: avStepGlow 1.2s ease-out 1;
}
@keyframes avStepGlow {
	0% { box-shadow: 0 0 0 0 rgba(0, 122, 234, 0.45); }
	100% { box-shadow: 0 0 0 14px rgba(0, 122, 234, 0); }
}

/* Tekst koraka postaje jasan kad mu se upali broj */
.av-steps-anim .av-step-text {
	opacity: 0.35;
	transition: opacity 0.7s ease;
}
.av-steps-anim .av-step-text.av-on {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.av-step-line {
		transform: none;
		transition: none;
	}
}