/* ==========================================================================
   Progression Journey — Path block
   ========================================================================== */

.pjp {
	margin: 2rem 0;
}

.pjp__eyebrow {
	font-family: 'Open Sans', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #767676;
	margin: 0 0 1.5rem;
}

/* ── Visual container ────────────────────────────────────────────────────── */

/*
 * Maintains a fixed aspect ratio matching the SVG viewBox (940 × 270) so
 * absolutely-positioned captions track the dots as the block scales.
 */
.pjp__visual {
	position: relative;
	aspect-ratio: 940 / 270;
	overflow: visible;
}

.pjp__svg {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* ── SVG path elements ───────────────────────────────────────────────────── */

/* Faint background track — always visible, reveals the full route */
.pjp__track {
	fill: none;
	stroke: #e4e8f0;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Animated coloured stroke */
.pjp__line {
	fill: none;
	stroke: var(--dim-color, #3e57a3);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
}

/* Dotted extension past dot 5 — suggests progress continues */
.pjp__ext {
	stroke: var(--dim-color, #3e57a3);
	stroke-width: 2.5;
	stroke-dasharray: 5 5;
	stroke-linecap: round;
	opacity: 0;
}

/* Step group — wraps each dot + number; hover target */
.pjp__step {
	cursor: pointer;
	transform-box: fill-box;
	transform-origin: center;
	scale: 1;
	transition: scale 0.2s ease;
}

/* Dot circles */
.pjp__dot {
	fill: #fff;
	stroke: var(--dim-color, #3e57a3);
	stroke-width: 3;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0);
}

/* Step numbers inside dots */
.pjp__num {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 700;
	fill: var(--dim-color, #3e57a3);
	opacity: 0;
	pointer-events: none;
}

/* ── Captions — float above/below their dot ──────────────────────────────── */

/*
 * Positioned within .pjp__visual using percentages derived from the SVG
 * viewBox (940 × 270).  left% = cx/940.  bottom/top% = gap from dot edge.
 * transform: translateX(-50%) centers each box on its dot's x position.
 * translateY(±6px) is the animation start offset; resolves to 0 on play.
 */
.pjp__cap {
	position: absolute;
	width: 16%;
	text-align: left;
	font-family: 'Open Sans', sans-serif;
	font-size: 0.75rem;
	line-height: 1.55;
	color: #444;
	opacity: 0;
	scale: 1;
	transition: scale 0.2s ease;
}

/* Dots 1-4: caption bottom edge sits 8 px above the dot's top circumference.
   bottom% = (270 − cy + 26) / 270  where 26 = r(18) + gap(8)
   Scales away from the dot (upward), so transform-origin is center bottom. */
.pjp__cap--1 { left: 7.45%;  bottom: 17.0%; transform: translateX(-50%) translateY(6px); transform-origin: center bottom; }
.pjp__cap--2 { left: 25.53%; bottom: 30.0%; transform: translateX(-50%) translateY(6px); transform-origin: center bottom; }
.pjp__cap--3 { left: 45.74%; bottom: 54.1%; transform: translateX(-50%) translateY(6px); transform-origin: center bottom; }
.pjp__cap--4 { left: 63.83%; bottom: 48.5%; transform: translateX(-50%) translateY(6px); transform-origin: center bottom; }

/* Dot 5: same above-dot treatment as 1-4.
   bottom% = (270 − 95 + 26) / 270 = 74.4% */
.pjp__cap--5 { left: 88.30%; bottom: 74.4%; transform: translateX(-50%) translateY(6px); transform-origin: center bottom; }

/* ── Hover — scale dot+number group and caption 10% ────────────────────── */

.pjp--hover-1 .pjp__step--1,
.pjp--hover-2 .pjp__step--2,
.pjp--hover-3 .pjp__step--3,
.pjp--hover-4 .pjp__step--4,
.pjp--hover-5 .pjp__step--5 { scale: 1.1; }

.pjp--hover-1 .pjp__cap--1,
.pjp--hover-2 .pjp__cap--2,
.pjp--hover-3 .pjp__cap--3,
.pjp--hover-4 .pjp__cap--4,
.pjp--hover-5 .pjp__cap--5 { scale: 1.1; }

/* ── Keyframes ─────────────────────────────────────────────────────────── */

@keyframes pjpDraw {
	to { stroke-dashoffset: 0; }
}

@keyframes pjpDot {
	to { opacity: 1; transform: scale(1); }
}

@keyframes pjpFade {
	to { opacity: 1; }
}

/* translateX(-50%) must be kept in the final state to preserve centering */
@keyframes pjpCapIn {
	to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Animation triggers (added by JS via IntersectionObserver) ─────────── */

/* Path draws left-to-right over 1.4 s */
.pjp.is-animating .pjp__line {
	animation: pjpDraw 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}

/* Dots pop in as the stroke reaches each waypoint */
.pjp.is-animating .pjp__dot--1 { animation: pjpDot 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.10s both; }
.pjp.is-animating .pjp__dot--2 { animation: pjpDot 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.44s both; }
.pjp.is-animating .pjp__dot--3 { animation: pjpDot 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.78s both; }
.pjp.is-animating .pjp__dot--4 { animation: pjpDot 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 1.11s both; }
.pjp.is-animating .pjp__dot--5 { animation: pjpDot 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 1.50s both; }

/* Numbers fade in immediately after their dot */
.pjp.is-animating .pjp__num--1 { animation: pjpFade 0.2s ease 0.22s both; }
.pjp.is-animating .pjp__num--2 { animation: pjpFade 0.2s ease 0.56s both; }
.pjp.is-animating .pjp__num--3 { animation: pjpFade 0.2s ease 0.90s both; }
.pjp.is-animating .pjp__num--4 { animation: pjpFade 0.2s ease 1.23s both; }
.pjp.is-animating .pjp__num--5 { animation: pjpFade 0.2s ease 1.62s both; }

/* Dotted extension and arrowhead appear after dot 5 */
.pjp.is-animating .pjp__ext { animation: pjpFade 0.4s ease 1.65s both; }

/* Captions slide in ~0.2 s after their dot */
.pjp.is-animating .pjp__cap--1 { animation: pjpCapIn 0.4s ease 0.30s both; }
.pjp.is-animating .pjp__cap--2 { animation: pjpCapIn 0.4s ease 0.64s both; }
.pjp.is-animating .pjp__cap--3 { animation: pjpCapIn 0.4s ease 0.98s both; }
.pjp.is-animating .pjp__cap--4 { animation: pjpCapIn 0.4s ease 1.31s both; }
.pjp.is-animating .pjp__cap--5 { animation: pjpCapIn 0.4s ease 1.70s both; }

/* ── Reduce motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.pjp__line { stroke-dashoffset: 0 !important; animation: none !important; }
	.pjp__ext  { opacity: 1 !important; animation: none !important; }
	.pjp__dot  { opacity: 1 !important; transform: scale(1) !important; animation: none !important; }
	.pjp__num  { opacity: 1 !important; animation: none !important; }
	.pjp__cap  { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; animation: none !important; }
	.pjp__step,
	.pjp__cap  { scale: 1 !important; transition: none !important; }
}

/* ── Mobile numbered list ─────────────────────────────────────────────── */

.pjp__mobile-list { display: none; }

@media (max-width: 640px) {
	.pjp__visual { display: none; }

	.pjp__eyebrow { margin-bottom: 1rem; }

	.pjp__mobile-list {
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
	}

	.pjp__ml-step {
		display: flex;
		gap: 1rem;
		align-items: flex-start;
	}

	.pjp__ml-num {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: var(--dim-color, #3e57a3);
		color: #fff;
		font-family: 'Open Sans', sans-serif;
		font-size: 0.8rem;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		margin-top: 2px;
	}

	.pjp__ml-text {
		font-family: 'Open Sans', sans-serif;
		font-size: 0.9375rem;
		line-height: 1.6;
		color: #1a1a1a;
	}
}