/**
 * Home SPIRO CONNECT infographic — staged SVG animation.
 * CMS include: connectivity.inc.php
 */

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

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

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

/* Stray duplicate arrow fragments from source SVG — never shown */
.spiro-connectivity__svg .spiro-conn-skip {
	display: none;
}

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

.spiro-connectivity__svg .spiro-conn-el[data-step].is-visible {
	opacity: 1;
}

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

.spiro-connectivity__svg .spiro-conn-el[data-step="1"].is-visible {
	transition: opacity 0.7s ease;
}

.spiro-connectivity__svg .spiro-conn-el[data-step="2"].is-visible,
.spiro-connectivity__svg .spiro-conn-el[data-step="5"].is-visible,
.spiro-connectivity__svg .spiro-conn-el[data-step="7"].is-visible,

.spiro-connectivity__svg .spiro-conn-el[data-step="3"].is-visible,
.spiro-connectivity__svg .spiro-conn-el[data-step="4"].is-visible,
.spiro-connectivity__svg .spiro-conn-el[data-step="6"].is-visible {
	transition: opacity 0.35s ease;
}

/* Stroke draw — forward (top → down) and reverse (bottom → up) */
.spiro-connectivity__svg .spiro-conn-draw {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.spiro-connectivity__svg .spiro-conn-draw-reverse {
	stroke-dasharray: 1;
	stroke-dashoffset: -1;
}

.spiro-connectivity__svg .spiro-conn-draw.is-visible {
	animation: spiro-conn-draw 1.4s ease forwards;
}

.spiro-connectivity__svg .spiro-conn-draw-reverse.is-visible {
	animation: spiro-conn-draw-reverse 1.4s ease forwards;
}

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

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

/* Step 8 — light blue band + SPIRO MACHINE reveal together */
.spiro-connectivity__svg .spiro-conn-el[data-anim="grow"] {
	opacity: 0;
	transform: scaleY(0);
	transform-origin: 50% 100%;
	transform-box: fill-box;
}

.spiro-connectivity__svg .spiro-conn-el[data-anim="grow"].is-visible {
	animation: spiro-conn-grow 0.9s ease forwards;
}

@keyframes spiro-conn-grow {
	to {
		opacity: 1;
		transform: scaleY(1);
	}
}

.spiro-connectivity__svg .spiro-conn-el[data-anim="reveal-down"] {
	opacity: 0;
	transform: translateY(-72px);
	transform-box: fill-box;
}

.spiro-connectivity__svg .spiro-conn-el[data-anim="reveal-down"].is-visible {
	animation: spiro-conn-reveal-down 0.9s ease forwards;
}

@keyframes spiro-conn-reveal-down {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

	.spiro-connectivity__svg .spiro-conn-draw,
	.spiro-connectivity__svg .spiro-conn-draw-reverse {
		stroke-dashoffset: 0;
		animation: none;
	}

	.spiro-connectivity__svg .spiro-conn-el[data-anim="grow"],
	.spiro-connectivity__svg .spiro-conn-el[data-anim="reveal-down"] {
		transform: none;
		animation: none;
	}
}