/**
 * SPIRO Services ring infographic — staged SVG animation.
 * CMS include: services_graphic.inc.php
 */

.spiro-services-graphic {
	width: 100%;
	margin: 0 auto;
}

.spiro-services-graphic__frame {
	width: 100%;
	max-width: var(--spiro-content-max, 1630px);
	margin: 0 auto;
}

.spiro-services-graphic__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Hide every primitive until a step reveals it (also covered by inline critical CSS in the include) */
.spiro-services-graphic__svg path,
.spiro-services-graphic__svg line,
.spiro-services-graphic__svg rect,
.spiro-services-graphic__svg circle,
.spiro-services-graphic__svg ellipse,
.spiro-services-graphic__svg polygon,
.spiro-services-graphic__svg polyline,
.spiro-services-graphic__svg text {
	opacity: 0;
}

.spiro-services-graphic__svg .spiro-svc-el[data-step].is-visible {
	opacity: 1;
}

/* Only reveal untagged leftovers — do not re-opacity all paths (causes end blur) */
.spiro-services-graphic.is-complete .spiro-services-graphic__svg path:not([data-step]),
.spiro-services-graphic.is-complete .spiro-services-graphic__svg line:not([data-step]),
.spiro-services-graphic.is-complete .spiro-services-graphic__svg rect:not([data-step]),
.spiro-services-graphic.is-complete .spiro-services-graphic__svg circle:not([data-step]),
.spiro-services-graphic.is-complete .spiro-services-graphic__svg ellipse:not([data-step]),
.spiro-services-graphic.is-complete .spiro-services-graphic__svg polygon:not([data-step]),
.spiro-services-graphic.is-complete .spiro-services-graphic__svg polyline:not([data-step]),
.spiro-services-graphic.is-complete .spiro-services-graphic__svg text:not([data-step]) {
	opacity: 1;
}

.spiro-services-graphic__svg .spiro-svc-el[data-step="1"].is-visible,
.spiro-services-graphic__svg .spiro-svc-el[data-step="3"].is-visible,
.spiro-services-graphic__svg .spiro-svc-el[data-step="5"].is-visible,
.spiro-services-graphic__svg .spiro-svc-el[data-step="7"].is-visible,
.spiro-services-graphic__svg .spiro-svc-el[data-step="9"].is-visible,
.spiro-services-graphic__svg .spiro-svc-el[data-step="11"].is-visible,
.spiro-services-graphic__svg .spiro-svc-el[data-step="13"].is-visible,
.spiro-services-graphic__svg .spiro-svc-el[data-step="15"].is-visible {
	transition: opacity 0.3s ease;
}

.spiro-services-graphic__svg .spiro-svc-draw {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.spiro-services-graphic__svg .spiro-svc-draw-reverse {
	stroke-dasharray: 1;
	stroke-dashoffset: -1;
}

.spiro-services-graphic__svg .spiro-svc-draw.is-visible {
	animation: spiro-svc-draw 0.5s ease forwards;
}

.spiro-services-graphic__svg .spiro-svc-draw-reverse.is-visible {
	animation: spiro-svc-draw-reverse 0.5s ease forwards;
}

@keyframes spiro-svc-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes spiro-svc-draw-reverse {
	to {
		stroke-dashoffset: 0;
	}
}

/* Center SPIRO SERVICES — 2 fast blinks (~0.24s), then 1s fade-in */
.spiro-services-graphic__svg .spiro-svc-el[data-step="17"].is-visible {
	animation: spiro-svc-blink 1.24s ease forwards;
}

.spiro-services-graphic__svg .spiro-svc-el[data-step="17"].is-settled {
	animation: none;
	opacity: 1;
}

@keyframes spiro-svc-blink {
	0%,
	3% {
		opacity: 0;
	}
	5%,
	9% {
		opacity: 1;
	}
	11%,
	15% {
		opacity: 0;
	}
	17%,
	19% {
		opacity: 1;
	}
	/* 19.4%→100% of 1.24s ≈ 1s final fade-in */
	19.4% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spiro-services-graphic__svg path,
	.spiro-services-graphic__svg line,
	.spiro-services-graphic__svg rect,
	.spiro-services-graphic__svg circle,
	.spiro-services-graphic__svg ellipse,
	.spiro-services-graphic__svg polygon,
	.spiro-services-graphic__svg polyline,
	.spiro-services-graphic__svg text {
		opacity: 1;
	}

	.spiro-services-graphic__svg .spiro-svc-draw,
	.spiro-services-graphic__svg .spiro-svc-draw-reverse {
		stroke-dashoffset: 0;
		animation: none;
	}

	.spiro-services-graphic__svg .spiro-svc-el[data-step="17"].is-visible {
		animation: none;
	}
}