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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Plan: the three lines "review" themselves in sequence */
.dfa-wrap.dfa-in-view .dfa-step[data-dfa-step="1"] .dfa-plan-line-1 { animation: dfa-review 3.6s ease-in-out .7s infinite; }
.dfa-wrap.dfa-in-view .dfa-step[data-dfa-step="1"] .dfa-plan-line-2 { animation: dfa-review 3.6s ease-in-out .9s infinite; }
.dfa-wrap.dfa-in-view .dfa-step[data-dfa-step="1"] .dfa-plan-line-3 { animation: dfa-review 3.6s ease-in-out 1.1s infinite; }
@keyframes dfa-review {
	0%, 60%, 100% { opacity: 1; }
	30%           { opacity: .3; }
}

/* Design: the two crossed pens give a small settle-wiggle */
.dfa-wrap.dfa-in-view .dfa-step[data-dfa-step="2"] .dfa-pen-a { animation: dfa-wiggle-a 3.2s ease-in-out 1.2s infinite; transform-origin: 12px 12px; }
.dfa-wrap.dfa-in-view .dfa-step[data-dfa-step="2"] .dfa-pen-b { animation: dfa-wiggle-b 3.2s ease-in-out 1.2s infinite; transform-origin: 12px 12px; }
@keyframes dfa-wiggle-a {
	0%, 100% { transform: rotate(45deg); }
	50%      { transform: rotate(40deg); }
}
@keyframes dfa-wiggle-b {
	0%, 100% { transform: rotate(-45deg); }
	50%      { transform: rotate(-40deg); }
}

/* Build: the hammer gives a small striking motion */
.dfa-hammer {
	transform-origin: 16px 18px;
}
.dfa-wrap.dfa-in-view .dfa-step[data-dfa-step="3"] .dfa-hammer {
	animation: dfa-strike 1.8s ease-in-out 1.7s infinite;
}
@keyframes dfa-strike {
	0%, 60%, 100% { transform: rotate(45deg); }
	30%           { transform: rotate(32deg); }
}

/* Run: the rocket gently hovers, ready to go */
.dfa-wrap.dfa-in-view .dfa-step[data-dfa-step="4"] .dfa-rocket-body,
.dfa-wrap.dfa-in-view .dfa-step[data-dfa-step="4"] .dfa-rocket-fin {
	animation: dfa-hover 2.4s ease-in-out 2.2s infinite;
}
@keyframes dfa-hover {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-2.5px); }
}

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

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

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

.dfa-connector {
	flex: 0 1 60px;
	width: 60px;
	min-width: 30px;
	height: 80px; /* matches icon circle so the line aligns to its centre */
	display: flex;
	align-items: center;
}

.dfa-connector svg {
	width: 100%;
	height: 18px;
	overflow: visible;
}

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

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

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

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

.dfa-connector-dot {
	fill: var(--dfa-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, across all 3 gaps */
.dfa-wrap.dfa-in-view .dfa-step[data-dfa-step="1"] ~ .dfa-connector .dfa-connector-line { stroke-dashoffset: 0; transition-delay: .45s; }
.dfa-wrap.dfa-in-view .dfa-step[data-dfa-step="1"] ~ .dfa-connector .dfa-connector-arrow { opacity: 1; transition-delay: 1.05s; }

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

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

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

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

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

@media (max-width: 900px) and (min-width: 761px) {
	.dfa-step {
		flex: 1 1 140px;
	}
	.dfa-connector {
		flex: 0 1 34px;
		width: 34px;
	}
}

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

	.dfa-step {
		flex: none;
		width: 100%;
		max-width: 300px;
	}

	.dfa-connector {
		flex: none;
		width: 2px;
		height: 40px;
		margin: 4px 0;
	}

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

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

@media (prefers-reduced-motion: reduce) {
	.dfa-wrap .dfa-step,
	.dfa-wrap .dfa-icon-circle,
	.dfa-wrap .dfa-title,
	.dfa-wrap .dfa-desc,
	.dfa-wrap .dfa-connector-line,
	.dfa-wrap .dfa-connector-arrow {
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
	.dfa-wrap .dfa-icon-pulse,
	.dfa-wrap .dfa-plan-line,
	.dfa-wrap .dfa-pen-a,
	.dfa-wrap .dfa-pen-b,
	.dfa-wrap .dfa-hammer,
	.dfa-wrap .dfa-rocket-body,
	.dfa-wrap .dfa-rocket-fin,
	.dfa-wrap .dfa-connector-dot {
		animation: none !important;
	}
	.dfa-wrap.dfa-in-view .dfa-step,
	.dfa-wrap.dfa-in-view .dfa-icon-circle,
	.dfa-wrap.dfa-in-view .dfa-title,
	.dfa-wrap.dfa-in-view .dfa-desc {
		opacity: 1;
		transform: none;
	}
}