/*
 * How It Works Timeline block front-end styles.
 * Registered via block.json "style" and enqueued automatically by
 * WordPress only when the block is present on the page.
 *
 * Colors/spacing reference the `--keepers-*` design tokens declared in the
 * `:root` block of assets/css/style.css.
 *
 * Two layouts live here:
 *   - Below 992px (and for reduced-motion visitors, and without JS): the arc
 *     is hidden and the steps read as a plain vertical list. This is the
 *     default, so the content is never dependent on the animation.
 *   - 992px and up: the arc appears and the panels stack into a single cell
 *     for script.js to cross-fade between.
 */

/* ---------------------------------------------------------------------
 * Section shell — the rounded panel that curves over the section above
 * ------------------------------------------------------------------ */

/*
 * The design presents this section as a white panel with large rounded top
 * corners, lifted so those corners overlap the section above it (the
 * immersive video) — the video stays visible through the corner cut-outs,
 * which is what makes the join read as a soft transition rather than a hard
 * edge.
 *
 * Three parts are all required for that to work:
 *   - an opaque background, or the panel wouldn't hide what it overlaps;
 *   - z-index above the previous section, so the panel sits over the video
 *     instead of the video covering it;
 *   - a negative top margin equal to the radius, which is what produces the
 *     overlap. ScrollTrigger copies a pinned element's margins onto its
 *     pin-spacer, so the overlap survives this section being pinned.
 */
.block-how-it-works-timeline {
	position: relative;
	z-index: 1;
	margin-top: -1.5rem;
	border-top-left-radius: 1.5rem;
	border-top-right-radius: 1.5rem;
	background-color: var(--keepers-color-bg);
}

@media (min-width: 992px) {
	.block-how-it-works-timeline {
		margin-top: -3rem;
		border-top-left-radius: 3rem;
		border-top-right-radius: 3rem;
		/*
		 * The arc's own max-width caps (see .block-how-it-works-timeline__arc)
		 * keep it from growing past what one viewport can hold, but nothing
		 * otherwise forces this section — pinned for the whole animation —
		 * to actually reach a full viewport tall. On a wide, short viewport
		 * the arc (width-driven, via 75vw) can end up shorter than the
		 * screen, leaving a gap below the pinned section that the previous
		 * section shows through while scrolling. Reserving a full viewport
		 * here and centring the content in it closes that gap regardless of
		 * how tall the arc itself ends up.
		 */
		min-height: 100vh;
		min-height: 100svh;
		display: flex;
		align-items: center;
		padding-bottom: 0 !important;
	}

	.block-how-it-works-timeline::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 6rem;
		background: linear-gradient(to top, #fff 80%, transparent);
		filter: blur(4px);
	}
	.block-how-it-works-timeline > .container {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------
 * Heading area
 * ------------------------------------------------------------------ */

/*
 * The design shows the eyebrow as just the green star plus its label, with
 * no pill behind it — the shared badge component defaults to a tinted pill.
 * Scoped to this block so every other block's badge is left alone.
 */
.block-how-it-works-timeline .badge-eyebrow {
	padding: 0;
	background-color: transparent;
}

/* Design wraps the intro to a narrow, centred measure — two lines, not three. */
.block-how-it-works-timeline .section-heading__description {
	max-width: 35rem;
	margin-left: auto;
	margin-right: auto;
}

.block-how-it-works-timeline__stage {
	margin-top: var(--keepers-space-6);
}

/* ---------------------------------------------------------------------
 * Base / small-screen layout — a simple list of steps
 * ------------------------------------------------------------------ */

.block-how-it-works-timeline__arc-svg,
.block-how-it-works-timeline__badges,
.block-how-it-works-timeline__dots {
	display: none;
}

.block-how-it-works-timeline__panel + .block-how-it-works-timeline__panel {
	margin-top: var(--keepers-space-7);
}

.block-how-it-works-timeline__panel-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin-bottom: var(--keepers-space-3);
	padding: 0 var(--keepers-space-2);
	border-radius: 12px;
	background-image: linear-gradient(
		180deg,
		var(--keepers-color-accent-gradient-start),
		var(--keepers-color-accent-gradient-end)
	);
	font-family: var(--keepers-font-family-heading);
	font-weight: var(--keepers-font-weight-semibold);
	font-size: var(--keepers-font-size-base);
	line-height: 1;
	color: var(--keepers-color-inverse);
}

/*
 * The number is announced as "Step 03" but shown as just "03" — the label
 * carries the word for assistive tech, the value carries the digits for the
 * eye. Same technique as Bootstrap's .visually-hidden.
 */
.block-how-it-works-timeline__panel-number-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.block-how-it-works-timeline__panel-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--keepers-space-3);
}

.block-how-it-works-timeline__panel-icon-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.block-how-it-works-timeline__panel-title {
	margin: 0 0 var(--keepers-space-3);
	font-size: var(--keepers-font-size-h3);
	font-weight: var(--keepers-font-weight-semibold);
	line-height: var(--keepers-line-height-tight);
	color: var(--keepers-color-heading);
}

.block-how-it-works-timeline__panel-description {
	margin: 0 0 var(--keepers-space-4);
	font-size: var(--keepers-font-size-base);
	line-height: var(--keepers-line-height-base);
	color: var(--keepers-color-body);
}

/*
 * Phones: the intro is left-aligned with a single button under it (see
 * render.php), and each step becomes a compact bordered card without its
 * own button.
 */
.block-how-it-works-timeline__intro-action {
	margin-top: var(--keepers-space-4);
}

@media (max-width: 991.98px) {
	.block-how-it-works-timeline .section-heading--center {
		text-align: left;
	}

	.block-how-it-works-timeline .section-heading__description {
		margin-left: 0;
	}

	.block-how-it-works-timeline__stage {
		margin-top: var(--keepers-space-5);
	}

	.block-how-it-works-timeline__panel {
		padding: var(--keepers-space-3) var(--keepers-space-4);
		border: 1px solid var(--keepers-color-border);
		border-radius: 16px;
	}

	.block-how-it-works-timeline__panel + .block-how-it-works-timeline__panel {
		margin-top: var(--keepers-space-3);
	}

	.block-how-it-works-timeline__panel-title {
		margin-bottom: var(--keepers-space-1);
		font-size: 1.25rem;
	}

	.block-how-it-works-timeline__panel-description {
		margin-bottom: 0;
	}

	.block-how-it-works-timeline__panel .btn-cta {
		display: none;
	}
}

/* ---------------------------------------------------------------------
 * Desktop — the arc
 * ------------------------------------------------------------------ */

@media (min-width: 992px) {
	.block-how-it-works-timeline__stage {
		margin-top: 7rem;
		text-align: center;
	}

	/*
	 * Matches the SVG's 800x340 viewBox so it scales uniformly to this box,
	 * which is what keeps the track coordinates MotionPathPlugin measures in
	 * step with what's on screen. No overflow: hidden, because the apex badge
	 * deliberately straddles the top edge (and because badges continue onto
	 * the circle's invisible lower half, below this box).
	 */
	.block-how-it-works-timeline__arc {
		position: relative;
		aspect-ratio: 800 / 340;
		width: 100%;
		/*
		 * Three caps, smallest wins:
		 *   100%  — never wider than the container.
		 *   75vw  — the dome's share of the viewport in the design.
		 *   calc  — the section is pinned, so dome + heading must fit the
		 *           viewport or the dome's lower part would be cut off for the
		 *           whole pin. Height is width/2.35 here, so limiting the width
		 *           to 2.35 x the space left after the heading keeps it inside.
		 *
		 * The calc's own floor (max(700px, ...)) matters on short laptop
		 * viewports (~700-750px tall is common once browser chrome is
		 * counted): without it the dome shrinks enough that the fixed-size
		 * panel text (title + description + button) no longer fits inside
		 * it and spills into the badge above.
		 */
		/* max-width: min(100%, 75vw, max(700px, calc((100vh - 260px) * 2.35))); */
		max-width: min(100%, 88vw, max(700px, calc((100vh - 260px) * 2.35)));

		/*
		 * The top margin stands in for the vertical space the old fixed
		 * "Step" label used to occupy above the dome, now that the label
		 * travels with the apex badge instead (see .block-how-it-works-timeline__badge-step).
		 */
		margin: 3.5rem auto 0;
	}

	.block-how-it-works-timeline__arc-svg {
		display: block;
		width: 100%;
		height: 100%;
		/* The dome's tinted fill must not cover the panels sitting over it. */
		position: absolute;
		inset: 0;
	}

	/*
	 * Tint fading out towards the bottom, per the design. Set as gradient
	 * stops in CSS rather than on the SVG element so the colors stay on the
	 * theme's design tokens.
	 */
	.block-how-it-works-timeline__arc-dome-stop-top {
		stop-color: var(--keepers-color-bg-tint-start);
	}

	.block-how-it-works-timeline__arc-dome-stop-bottom {
		stop-color: var(--keepers-color-bg);
		stop-opacity: 0;
	}

	.block-how-it-works-timeline__arc-line {
		fill: none;
		stroke: var(--keepers-color-border-light);
		stroke-width: 1.5;
	}

	/*
	 * The full-circle track the badges travel on. Never drawn — it exists only
	 * for MotionPathPlugin to measure, so the badges have a continuous path to
	 * follow past the visible dome's edges.
	 */
	.block-how-it-works-timeline__arc-track {
		fill: none;
		stroke: none;
	}

	.block-how-it-works-timeline__badges {
		display: block;
	}

	/*
	 * Badges start at the container's origin; MotionPathPlugin positions them
	 * on the path with transforms from there (align + alignOrigin in
	 * script.js). Their opacity/scale start at the "far from active" state so
	 * the first paint matches the animation's first frame.
	 */
	.block-how-it-works-timeline__badge {
		position: absolute;
		top: 0;
		left: 0;
		/* Above the dome fill and the panels' stacking context. */
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 52px;
		/*
		 * Badges travelling the circle's invisible lower half are positioned
		 * below the dome at zero opacity; this keeps them from intercepting
		 * clicks meant for whatever sits there.
		 */
		pointer-events: none;
		border-radius: 14px;
		background-image: linear-gradient(
			180deg,
			var(--keepers-color-accent-gradient-start),
			var(--keepers-color-accent-gradient-end)
		);
		box-shadow: 0 10px 24px rgba(10, 18, 42, 0.12);
		font-family: var(--keepers-font-family-heading);
		font-weight: var(--keepers-font-weight-semibold);
		font-size: var(--keepers-font-size-lg);
		line-height: 1;
		color: var(--keepers-color-inverse);
		opacity: 0;
		will-change: transform;
	}

	/*
	 * A child of the badge, not a sibling — it's meant to travel and rotate
	 * with whichever badge is currently near the apex, tilting away with it
	 * exactly like the number does, rather than staying fixed and level
	 * above the arc regardless of what's beneath it. script.js fades its
	 * opacity in as the badge straightens up approaching the apex and back
	 * out as it rotates away, so at rest only the apex badge shows one.
	 */
	.block-how-it-works-timeline__badge-step {
		position: absolute;
		bottom: 100%;
		left: 50%;
		margin-bottom: var(--keepers-space-2);
		transform: translateX(-50%);
		font-family: var(--keepers-font-family-base);
		font-size: var(--keepers-font-size-sm);
		font-weight: var(--keepers-font-weight-regular);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--keepers-color-body);
		white-space: nowrap;
		opacity: 0;
	}

	/*
	 * Panels share one grid cell so only the active one is seen. 48% is where
	 * the design centres the step content within the visible dome — not 50%,
	 * since the dome is cropped above its widest point and its true centre is
	 * far below this box.
	 */
	.block-how-it-works-timeline__panels {
		position: absolute;
		top: 48%;
		left: 50%;
		z-index: 1;
		display: grid;
		width: 100%;
		max-width: 26rem;
		transform: translate(-50%, -50%);
	}

	.block-how-it-works-timeline__panel {
		grid-area: 1 / 1;
		margin-top: 0;
		will-change: transform;
	}

	.block-how-it-works-timeline__panel + .block-how-it-works-timeline__panel {
		margin-top: 0;
	}

	/* On desktop the arc badge already shows the number. */
	.block-how-it-works-timeline__panel-number {
		position: absolute;
		width: 1px;
		height: 1px;
		min-width: 0;
		min-height: 0;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}


	.block-how-it-works-timeline__panel-description {
		max-width: 18rem;
		margin-left: auto;
		margin-right: auto;
	}

	/* ----------------------------------------------------------------
	 * Progress dots
	 * ------------------------------------------------------------- */

	/* Inside the dome, near the bottom of its visible area, as in the design. */
	.block-how-it-works-timeline__dots {
		position: absolute;
		/* top: 82%; */
		top: calc(100% - 1rem);
		left: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--keepers-space-1);
		width: 100%;
		margin-top: 0;
	}

	.block-how-it-works-timeline__dot {
		position: relative;
		width: 10px;
		height: 10px;
		border-radius: 999px;
		background-color: var(--keepers-color-border);
	}

	/*
	 * The active state is this inner fill scaling up, rather than the dot
	 * changing color — so only transform/opacity ever animate.
	 */
	.block-how-it-works-timeline__dot-fill {
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background-color: var(--keepers-color-accent);
		opacity: 0;
		transform: scale(0.4);
	}
}

@media (min-width: 1400px) {
	.block-how-it-works-timeline__panel-title {
		font-size: 2.25rem;
	}
}

@media (min-width: 1024px) {
	.block-how-it-works-timeline__panel-title {
		font-size: var(--keepers-font-size-h4);
	}
}

/* ---------------------------------------------------------------------
 * Reduced motion — fall back to the list layout at every width
 * ------------------------------------------------------------------ */

/*
 * script.js bails out entirely for reduced-motion visitors, so the desktop
 * arc layout (which depends on it to position badges and reveal panels)
 * must not apply: without this, every panel would sit in one grid cell and
 * the badges would pile up at the arc's origin.
 */
@media (prefers-reduced-motion: reduce) {
	.block-how-it-works-timeline__arc-svg,
	.block-how-it-works-timeline__badges,
	.block-how-it-works-timeline__dots {
		display: none;
	}

	.block-how-it-works-timeline__arc {
		aspect-ratio: auto;
		/* No apex badge to reserve room for, with the badges hidden above. */
		margin-top: 0;
	}

	.block-how-it-works-timeline__panels {
		position: static;
		display: block;
		max-width: none;
		transform: none;
	}

	.block-how-it-works-timeline__panel {
		grid-area: auto;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}

	.block-how-it-works-timeline__panel + .block-how-it-works-timeline__panel {
		margin-top: var(--keepers-space-7);
	}

	.block-how-it-works-timeline__panel-number {
		position: static;
		width: auto;
		height: auto;
		min-width: 44px;
		min-height: 44px;
		padding: 0 var(--keepers-space-2);
		margin: 0 0 var(--keepers-space-3);
		overflow: visible;
		clip: auto;
	}
}