/*
 * Capability Flow Animation — styles
 * Same visual language as Cloud Flow Animation (circle icons + drawing
 * connector arrows), extended to 5 steps. Colours are driven by CSS custom
 * properties set inline per shortcode instance (see
 * capability-flow-animation.php).
 */

.cpf-wrap {
	--cpf-icon: #00C9A7;
	--cpf-heading: #000000;
	--cpf-desc: #000000;
	--cpf-bg: #FFFFFF;

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

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

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

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

.cpf-step {
	flex: 1 1 150px;
	max-width: 200px;
	text-align: center;
	padding: 0 8px;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .6s ease, transform .6s ease;
}

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

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

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

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

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

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

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

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

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

.cpf-desc {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--cpf-desc);
}

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

/* Develop: the hexagon outline gives a soft breathing pulse */
.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="1"] .cpf-icon-svg polygon {
	animation: cpf-breathe 3s ease-in-out .7s infinite;
	transform-origin: 12px 12px;
}
@keyframes cpf-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.06); }
}

/* Integrate: the cloud gently floats, like it's live/connected */
.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="2"] .cpf-cloud {
	animation: cpf-float 2.6s ease-in-out 1.2s infinite;
	transform-origin: 12px 12px;
}
@keyframes cpf-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-2px); }
}

/* Modernise: the two chevrons flash in sequence, like a fast-forward ripple */
.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="3"] .cpf-chevron-1 {
	animation: cpf-ripple 1.6s ease-in-out 1.7s infinite;
}
.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="3"] .cpf-chevron-2 {
	animation: cpf-ripple 1.6s ease-in-out 1.9s infinite;
}
@keyframes cpf-ripple {
	0%, 70%, 100% { opacity: 1; }
	35%           { opacity: .35; }
}

/* Security: a slow reassuring "locked" heartbeat */
.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="4"] .cpf-icon-svg {
	animation: cpf-heartbeat 3.4s ease-in-out 2.2s infinite;
	transform-origin: 12px 12px;
}
@keyframes cpf-heartbeat {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.05); }
}

/* Real Time AI: the minute hand keeps ticking round */
.cpf-clock-minute {
	transform-origin: 12px 12px;
}
.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="5"] .cpf-clock-minute {
	animation: cpf-tick 4.5s linear 2.7s infinite;
}
@keyframes cpf-tick {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

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

.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="1"] .cpf-title { opacity: 1; transform: translateY(0); transition-delay: .22s; }
.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="1"] .cpf-desc  { opacity: 1; transform: translateY(0); transition-delay: .30s; }
.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="2"] .cpf-title { opacity: 1; transform: translateY(0); transition-delay: .72s; }
.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="2"] .cpf-desc  { opacity: 1; transform: translateY(0); transition-delay: .80s; }
.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="3"] .cpf-title { opacity: 1; transform: translateY(0); transition-delay: 1.22s; }
.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="3"] .cpf-desc  { opacity: 1; transform: translateY(0); transition-delay: 1.30s; }
.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="4"] .cpf-title { opacity: 1; transform: translateY(0); transition-delay: 1.72s; }
.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="4"] .cpf-desc  { opacity: 1; transform: translateY(0); transition-delay: 1.80s; }
.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="5"] .cpf-title { opacity: 1; transform: translateY(0); transition-delay: 2.22s; }
.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="5"] .cpf-desc  { opacity: 1; transform: translateY(0); transition-delay: 2.30s; }

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

.cpf-connector {
	flex: 0 1 44px;
	width: 44px;
	min-width: 22px;
	height: 68px; /* matches icon circle so the line aligns to its centre */
	display: flex;
	align-items: center;
}

.cpf-connector svg {
	width: 100%;
	height: 16px;
	overflow: visible;
}

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

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

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

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

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

/* each connector draws in once the step before it has landed, then the
   arrowhead appears, then (if looping) a dot travels along it — same
   choreography as Cloud Flow Animation, extended across all 4 gaps */
.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="1"] ~ .cpf-connector .cpf-connector-line { stroke-dashoffset: 0; transition-delay: .45s; }
.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="1"] ~ .cpf-connector .cpf-connector-arrow { opacity: 1; transition-delay: 1.05s; }

.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="2"] ~ .cpf-connector .cpf-connector-line { stroke-dashoffset: 0; transition-delay: .95s; }
.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="2"] ~ .cpf-connector .cpf-connector-arrow { opacity: 1; transition-delay: 1.55s; }

.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="3"] ~ .cpf-connector .cpf-connector-line { stroke-dashoffset: 0; transition-delay: 1.45s; }
.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="3"] ~ .cpf-connector .cpf-connector-arrow { opacity: 1; transition-delay: 2.05s; }

.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="4"] ~ .cpf-connector .cpf-connector-line { stroke-dashoffset: 0; transition-delay: 1.95s; }
.cpf-wrap.cpf-in-view .cpf-step[data-cpf-step="4"] ~ .cpf-connector .cpf-connector-arrow { opacity: 1; transition-delay: 2.55s; }

/* travelling dot loops along each connector once it has drawn in, giving a
   continuous "flowing" feel from Develop → Integrate → Modernise →
   Security → Real Time AI; disabled automatically if data-cpf-loop="no" */
.cpf-wrap.cpf-in-view[data-cpf-loop="yes"] .cpf-step[data-cpf-step="1"] ~ .cpf-connector .cpf-connector-dot { animation: cpf-flow 2.2s linear 1.2s infinite; }
.cpf-wrap.cpf-in-view[data-cpf-loop="yes"] .cpf-step[data-cpf-step="2"] ~ .cpf-connector .cpf-connector-dot { animation: cpf-flow 2.2s linear 1.7s infinite; }
.cpf-wrap.cpf-in-view[data-cpf-loop="yes"] .cpf-step[data-cpf-step="3"] ~ .cpf-connector .cpf-connector-dot { animation: cpf-flow 2.2s linear 2.2s infinite; }
.cpf-wrap.cpf-in-view[data-cpf-loop="yes"] .cpf-step[data-cpf-step="4"] ~ .cpf-connector .cpf-connector-dot { animation: cpf-flow 2.2s linear 2.7s infinite; }

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

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

/* Tablet: two columns still read fine side-by-side, connectors just shrink a little */
@media (max-width: 980px) and (min-width: 761px) {
	.cpf-step {
		flex: 1 1 140px;
	}
	.cpf-connector {
		flex: 0 1 30px;
		width: 30px;
	}
}

/* Phone: stack every step vertically, connectors rotate to vertical */
@media (max-width: 760px) {
	.cpf-flow {
		flex-direction: column;
		align-items: center;
		max-width: 340px;
	}
	.cpf-step {
		flex: none;
		width: 100%;
		max-width: 320px;
	}
	.cpf-connector {
		flex: none;
		width: 2px;
		height: 40px;
		margin: 6px 0;
	}
	.cpf-connector svg {
		width: 20px;
		height: 100%;
		transform: rotate(90deg);
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.cpf-wrap .cpf-step,
	.cpf-wrap .cpf-icon-circle,
	.cpf-wrap .cpf-title,
	.cpf-wrap .cpf-desc,
	.cpf-wrap .cpf-connector-line,
	.cpf-wrap .cpf-connector-arrow {
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
	.cpf-wrap .cpf-icon-pulse,
	.cpf-wrap .cpf-icon-svg polygon,
	.cpf-wrap .cpf-cloud,
	.cpf-wrap .cpf-chevron-1,
	.cpf-wrap .cpf-chevron-2,
	.cpf-wrap .cpf-icon-svg,
	.cpf-wrap .cpf-clock-minute,
	.cpf-wrap .cpf-connector-dot {
		animation: none !important;
	}
	.cpf-wrap.cpf-in-view .cpf-step,
	.cpf-wrap.cpf-in-view .cpf-icon-circle,
	.cpf-wrap.cpf-in-view .cpf-title,
	.cpf-wrap.cpf-in-view .cpf-desc {
		opacity: 1;
		transform: none;
	}
}