/*
 * Benefits Flow Animation — styles
 * Same visual language as Capability Flow Animation (circle icons, staggered
 * reveal-on-scroll) but with no connector arrows — this is a set of
 * benefits, not a sequential process. Colours are driven by CSS custom
 * properties set inline per shortcode instance (see
 * benefits-flow-animation.php).
 */

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

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

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

.bnf-flow {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
	max-width: 1000px;
	margin: 0 auto;
	flex-wrap: wrap;
}

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

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

.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="1"] { opacity: 1; transform: translateY(0); transition-delay: .05s; }
.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="2"] { opacity: 1; transform: translateY(0); transition-delay: .35s; }
.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="3"] { opacity: 1; transform: translateY(0); transition-delay: .65s; }
.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="4"] { opacity: 1; transform: translateY(0); transition-delay: .95s; }

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

.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="1"] .bnf-icon-circle { transform: scale(1); opacity: 1; transition-delay: .05s; }
.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="2"] .bnf-icon-circle { transform: scale(1); opacity: 1; transition-delay: .35s; }
.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="3"] .bnf-icon-circle { transform: scale(1); opacity: 1; transition-delay: .65s; }
.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="4"] .bnf-icon-circle { transform: scale(1); opacity: 1; transition-delay: .95s; }

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

.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="1"] .bnf-icon-pulse { animation: bnf-pulse 1s ease-out .35s 1; }
.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="2"] .bnf-icon-pulse { animation: bnf-pulse 1s ease-out .65s 1; }
.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="3"] .bnf-icon-pulse { animation: bnf-pulse 1s ease-out .95s 1; }
.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="4"] .bnf-icon-pulse { animation: bnf-pulse 1s ease-out 1.25s 1; }

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

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

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

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

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

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

/* Reduce Risk: the shield gives a slow reassuring pulse */
.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="1"] .bnf-icon-svg {
	transform-origin: 12px 12px;
}
.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="1"] .bnf-icon-svg {
	animation: bnf-breathe 3.2s ease-in-out .7s infinite;
}
@keyframes bnf-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.05); }
}

/* Governance: the cloud gently floats */
.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="2"] .bnf-cloud,
.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="2"] .bnf-check {
	animation: bnf-float 2.6s ease-in-out 1s infinite;
	transform-origin: 12px 12px;
}
@keyframes bnf-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-2px); }
}

/* Free Up Teams: the front figure gives a small friendly bob */
.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="3"] .bnf-team-front {
	animation: bnf-bob 2.4s ease-in-out 1.3s infinite;
	transform-origin: 12px 20px;
}
@keyframes bnf-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-1.5px); }
}

/* Best Practice: the checkmark ticks in confirmation, on loop */
.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="4"] .bnf-check {
	animation: bnf-tick 3.6s ease-in-out 1.6s infinite;
	stroke-dasharray: 10;
	stroke-dashoffset: 0;
}
@keyframes bnf-tick {
	0%, 55%, 100% { opacity: 1; stroke-dashoffset: 0; }
	30%           { opacity: .4; stroke-dashoffset: 6; }
}

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

.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="1"] .bnf-title { opacity: 1; transform: translateY(0); transition-delay: .22s; }
.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="1"] .bnf-desc  { opacity: 1; transform: translateY(0); transition-delay: .30s; }
.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="2"] .bnf-title { opacity: 1; transform: translateY(0); transition-delay: .52s; }
.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="2"] .bnf-desc  { opacity: 1; transform: translateY(0); transition-delay: .60s; }
.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="3"] .bnf-title { opacity: 1; transform: translateY(0); transition-delay: .82s; }
.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="3"] .bnf-desc  { opacity: 1; transform: translateY(0); transition-delay: .90s; }
.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="4"] .bnf-title { opacity: 1; transform: translateY(0); transition-delay: 1.12s; }
.bnf-wrap.bnf-in-view .bnf-step[data-bnf-step="4"] .bnf-desc  { opacity: 1; transform: translateY(0); transition-delay: 1.20s; }

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

@media (max-width: 900px) {
	.bnf-step {
		flex: 1 1 42%;
	}
}

@media (max-width: 520px) {
	.bnf-flow {
		flex-direction: column;
		align-items: center;
	}
	.bnf-step {
		flex: none;
		width: 100%;
		max-width: 300px;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.bnf-wrap .bnf-step,
	.bnf-wrap .bnf-icon-circle,
	.bnf-wrap .bnf-title,
	.bnf-wrap .bnf-desc {
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
	.bnf-wrap .bnf-icon-pulse,
	.bnf-wrap .bnf-icon-svg,
	.bnf-wrap .bnf-cloud,
	.bnf-wrap .bnf-team-front,
	.bnf-wrap .bnf-check {
		animation: none !important;
	}
	.bnf-wrap.bnf-in-view .bnf-step,
	.bnf-wrap.bnf-in-view .bnf-icon-circle,
	.bnf-wrap.bnf-in-view .bnf-title,
	.bnf-wrap.bnf-in-view .bnf-desc {
		opacity: 1;
		transform: none;
	}
}