/*
 * Usage Plan Flow Animation — styles
 * Colours are driven by CSS custom properties set inline per shortcode
 * instance (see usage-plan-flow-animation.php).
 */

.upfa-wrap {
	--upfa-icon: #143140;
	--upfa-heading: #0B1A3D;
	--upfa-desc: #2B4C7D;
	--upfa-bg: #FFFFFF;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Schedule: one calendar cell "highlights" in turn, like a date being picked */
.upfa-wrap.upfa-in-view .upfa-step[data-upfa-step="3"] .upfa-cal-cell {
	animation: upfa-tick 4.5s ease-in-out 1.7s infinite;
	opacity: 1;
}
.upfa-wrap.upfa-in-view .upfa-step[data-upfa-step="3"] .upfa-cal-cell-1 {
	animation-delay: 1.7s;
}
@keyframes upfa-tick {
	0%, 8%, 100% { opacity: 1; }
	4%           { opacity: .35; }
}

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

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

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

.upfa-connector {
	flex: 0 1 70px;
	width: 70px;
	min-width: 34px;
	height: 84px; /* matches icon circle so the line aligns to its centre */
	display: flex;
	align-items: center;
}

.upfa-connector svg {
	width: 100%;
	height: 20px;
	overflow: visible;
}

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

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

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

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

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

/* first connector (Design → Subscribe) draws in after step 1 lands */
.upfa-wrap.upfa-in-view .upfa-step[data-upfa-step="1"] ~ .upfa-connector .upfa-connector-line {
	stroke-dashoffset: 0;
	transition-delay: .45s;
}
.upfa-wrap.upfa-in-view .upfa-step[data-upfa-step="1"] ~ .upfa-connector .upfa-connector-arrow {
	opacity: 1;
	transition-delay: 1.05s;
}

/* second connector (Subscribe → Schedule) draws in after step 2 lands */
.upfa-wrap.upfa-in-view .upfa-step[data-upfa-step="2"] ~ .upfa-connector .upfa-connector-line {
	stroke-dashoffset: 0;
	transition-delay: .95s;
}
.upfa-wrap.upfa-in-view .upfa-step[data-upfa-step="2"] ~ .upfa-connector .upfa-connector-arrow {
	opacity: 1;
	transition-delay: 1.55s;
}

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

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

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

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

	.upfa-step {
		max-width: 320px;
	}

	.upfa-connector {
		width: 2px;
		height: 40px;
		margin: 4px 0;
	}

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

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

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