/*
 * Service Flow Animation — styles
 * Same visual language and timing as Cloud Flow Animation (circle icons +
 * drawing connector arrows). Colours are driven by CSS custom properties
 * set inline per shortcode instance (see service-flow-animation.php).
 */

.sfa-wrap {
	--sfa-icon: #00C9A7;
	--sfa-heading: #143140;
	--sfa-desc: #565656;
	--sfa-bg: #FFFFFF;

	background: var(--sfa-bg);
	padding: 56px 20px;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.sfa-wrap *,
.sfa-wrap *::before,
.sfa-wrap *::after {
	box-sizing: border-box;
}

.sfa-flow {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	max-width: 1080px;
	margin: 0 auto;
	flex-wrap: wrap;
}

/* ---------- Steps ---------- */

.sfa-step {
	flex: 1 1 200px;
	max-width: 260px;
	text-align: center;
	padding: 0 12px;
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .6s ease, transform .6s ease;
}

.sfa-wrap.sfa-in-view .sfa-step[data-sfa-step="1"] { opacity: 1; transform: translateY(0); transition-delay: .05s; }
.sfa-wrap.sfa-in-view .sfa-step[data-sfa-step="2"] { opacity: 1; transform: translateY(0); transition-delay: .55s; }
.sfa-wrap.sfa-in-view .sfa-step[data-sfa-step="3"] { opacity: 1; transform: translateY(0); transition-delay: 1.05s; }

.sfa-icon-circle {
	position: relative;
	width: 84px;
	height: 84px;
	margin: 0 auto 18px;
	border-radius: 50%;
	border: 2px solid var(--sfa-icon);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sfa-bg);
	transform: scale(.35);
	opacity: 0;
	transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .4s ease;
}

.sfa-wrap.sfa-in-view .sfa-step[data-sfa-step="1"] .sfa-icon-circle { transform: scale(1); opacity: 1; transition-delay: .05s; }
.sfa-wrap.sfa-in-view .sfa-step[data-sfa-step="2"] .sfa-icon-circle { transform: scale(1); opacity: 1; transition-delay: .55s; }
.sfa-wrap.sfa-in-view .sfa-step[data-sfa-step="3"] .sfa-icon-circle { transform: scale(1); opacity: 1; transition-delay: 1.05s; }

/* soft radiating pulse ring, once per icon, right as it lands */
.sfa-icon-pulse {
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 2px solid var(--sfa-icon);
	opacity: 0;
	transform: scale(1);
	pointer-events: none;
}

.sfa-wrap.sfa-in-view .sfa-step[data-sfa-step="1"] .sfa-icon-pulse { animation: sfa-pulse 1s ease-out .35s 1; }
.sfa-wrap.sfa-in-view .sfa-step[data-sfa-step="2"] .sfa-icon-pulse { animation: sfa-pulse 1s ease-out .85s 1; }
.sfa-wrap.sfa-in-view .sfa-step[data-sfa-step="3"] .sfa-icon-pulse { animation: sfa-pulse 1s ease-out 1.35s 1; }

@keyframes sfa-pulse {
	0%   { opacity: .55; transform: scale(.85); }
	100% { opacity: 0;   transform: scale(1.55); }
}

.sfa-icon {
	width: 40px;
	height: 40px;
	color: var(--sfa-icon);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.sfa-icon-svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.sfa-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--sfa-heading);
	letter-spacing: .01em;
}

.sfa-desc {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--sfa-desc);
}

/* ---------- Idle micro-animations, once each icon has landed ---------- */

/* Operate: the gear keeps slowly turning */
.sfa-gear {
	transform-origin: 12px 12px;
}
.sfa-wrap.sfa-in-view .sfa-step[data-sfa-step="1"] .sfa-gear {
	animation: sfa-spin 7s linear .5s infinite;
}
@keyframes sfa-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* Monitor: the pulse line sweeps like a live reading */
.sfa-pulse {
	stroke-dasharray: 26;
	stroke-dashoffset: 0;
}
.sfa-wrap.sfa-in-view .sfa-step[data-sfa-step="2"] .sfa-pulse {
	animation: sfa-sweep 2.2s ease-in-out 1s infinite;
}
@keyframes sfa-sweep {
	0%   { stroke-dashoffset: 26; opacity: .3; }
	50%  { stroke-dashoffset: 0;  opacity: 1; }
	100% { stroke-dashoffset: -26; opacity: .3; }
}

/* Support: a calm, reassuring "listening" breathe */
.sfa-wrap.sfa-in-view .sfa-step[data-sfa-step="3"] .sfa-icon-support {
	animation: sfa-breathe 3s ease-in-out 1.5s infinite;
	transform-origin: 12px 12px;
}
@keyframes sfa-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.06); }
}

.sfa-title,
.sfa-desc {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .5s ease, transform .5s ease;
}

.sfa-wrap.sfa-in-view .sfa-step[data-sfa-step="1"] .sfa-title,
.sfa-wrap.sfa-in-view .sfa-step[data-sfa-step="1"] .sfa-desc { opacity: 1; transform: translateY(0); transition-delay: .22s; }
.sfa-wrap.sfa-in-view .sfa-step[data-sfa-step="2"] .sfa-title,
.sfa-wrap.sfa-in-view .sfa-step[data-sfa-step="2"] .sfa-desc { opacity: 1; transform: translateY(0); transition-delay: .72s; }
.sfa-wrap.sfa-in-view .sfa-step[data-sfa-step="3"] .sfa-title,
.sfa-wrap.sfa-in-view .sfa-step[data-sfa-step="3"] .sfa-desc { opacity: 1; transform: translateY(0); transition-delay: 1.22s; }

/* ---------- Connectors ---------- */

.sfa-connector {
	flex: 0 1 70px;
	width: 70px;
	min-width: 34px;
	height: 84px; /* matches icon circle so the line aligns to its centre */
	display: flex;
	align-items: center;
}

.sfa-connector svg {
	width: 100%;
	height: 20px;
	overflow: visible;
}

.sfa-connector-track,
.sfa-connector-line {
	stroke: var(--sfa-icon);
	stroke-width: 2;
}

.sfa-connector-track {
	opacity: .18;
}

.sfa-connector-line {
	stroke-dasharray: 96;
	stroke-dashoffset: 96;
	transition: stroke-dashoffset .7s ease;
}

.sfa-connector-arrow {
	fill: var(--sfa-icon);
	opacity: 0;
	transition: opacity .3s ease;
}

.sfa-connector-dot {
	fill: var(--sfa-icon);
	opacity: 0;
}

/* first connector (Operate → Monitor) draws in after step 1 lands */
.sfa-wrap.sfa-in-view .sfa-step[data-sfa-step="1"] ~ .sfa-connector .sfa-connector-line { stroke-dashoffset: 0; transition-delay: .45s; }
.sfa-wrap.sfa-in-view .sfa-step[data-sfa-step="1"] ~ .sfa-connector .sfa-connector-arrow { opacity: 1; transition-delay: 1.05s; }

/* second connector (Monitor → Support) draws in after step 2 lands */
.sfa-wrap.sfa-in-view .sfa-step[data-sfa-step="2"] ~ .sfa-connector .sfa-connector-line { stroke-dashoffset: 0; transition-delay: .95s; }
.sfa-wrap.sfa-in-view .sfa-step[data-sfa-step="2"] ~ .sfa-connector .sfa-connector-arrow { opacity: 1; transition-delay: 1.55s; }

/* travelling dot loops along each connector once it has drawn in, giving a
   continuous "flowing" feel from Operate → Monitor → Support; disabled
   automatically if data-sfa-loop="no" */
.sfa-wrap.sfa-in-view[data-sfa-loop="yes"] .sfa-step[data-sfa-step="1"] ~ .sfa-connector .sfa-connector-dot { animation: sfa-flow 2.2s linear 1.2s infinite; }
.sfa-wrap.sfa-in-view[data-sfa-loop="yes"] .sfa-step[data-sfa-step="2"] ~ .sfa-connector .sfa-connector-dot { animation: sfa-flow 2.2s linear 1.7s infinite; }

@keyframes sfa-flow {
	0%   { opacity: 0;  transform: translateX(0); }
	8%   { opacity: 1; }
	85%  { opacity: 1; }
	100% { opacity: 0;  transform: translateX(94px); }
}

/* ---------- Responsive ---------- */

@media (max-width: 760px) {
	.sfa-flow {
		flex-direction: column;
		align-items: center;
	}

	.sfa-step {
		max-width: 320px;
	}

	.sfa-connector {
		width: 2px;
		height: 40px;
		margin: 4px 0;
	}

	.sfa-connector svg {
		width: 20px;
		height: 100%;
		transform: rotate(90deg);
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.sfa-wrap .sfa-step,
	.sfa-wrap .sfa-icon-circle,
	.sfa-wrap .sfa-title,
	.sfa-wrap .sfa-desc,
	.sfa-wrap .sfa-connector-line,
	.sfa-wrap .sfa-connector-arrow {
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
	.sfa-wrap .sfa-icon-pulse,
	.sfa-wrap .sfa-gear,
	.sfa-wrap .sfa-pulse,
	.sfa-wrap .sfa-icon-support,
	.sfa-wrap .sfa-connector-dot {
		animation: none !important;
	}
	.sfa-wrap.sfa-in-view .sfa-step,
	.sfa-wrap.sfa-in-view .sfa-icon-circle,
	.sfa-wrap.sfa-in-view .sfa-title,
	.sfa-wrap.sfa-in-view .sfa-desc {
		opacity: 1;
		transform: none;
	}
}