/*
 * LAU home - "Proceso" section support layer.
 *
 * The flat colour, other colours, padding and every gap come from block
 * attributes and theme.json presets; the backdrop is the shared
 * `lau-topographic-contours` utility, reused as stored. Only what Gutenberg
 * has no control for lives here: the timeline rule and its dot, the pulse,
 * the stacking and the column counts.
 *
 * Every selector is scoped to .lau-proceso, so nothing here can reach the
 * header, the hero or the previous sections.
 */

/*
 * `isolation` keeps the decorative layer's stacking contained to this section,
 * and the children are raised because they compute to `auto`: without this the
 * contour layer, which sits at z-index 0, would paint over the copy.
 *
 * The background colour comes from the block's own `backgroundColor:
 * spx-section-dark` attribute (theme.json) - no override needed here.
 */
.lau-proceso {
	overflow: hidden;
	isolation: isolate;
}

.lau-proceso > * {
	position: relative;
	z-index: 1;
}

.lau-proceso__intro > * {
	max-width: 42rem;
}

.lau-proceso__steps h3,
.lau-proceso__steps p:not(.lau-proceso__num) {
	font-size: 1rem !important;
}

.lau-proceso__steps h3 {
	line-height: 1.3 !important;
}

.lau-proceso__steps p:not(.lau-proceso__num) {
	line-height: 1.55 !important;
}

/* ---------- Timeline indicator ---------- */

/*
 * The rule is an empty group, so it can take the leftover width as a flex item.
 * The dot is drawn at its end rather than added as a third block: it is purely
 * decorative and has nothing to edit.
 */
.lau-proceso__track {
	position: relative;
	flex: 1 1 auto;
	height: 1px;
	min-width: 1.5rem;
	background-color: rgba(244, 242, 238, 0.2);
}

.lau-proceso__track::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 0.375rem;
	height: 0.375rem;
	transform: translate(50%, -50%);
	border-radius: 50%;
	background-color: var(--wp--preset--color--spx-primary);
}

/*
 * A slow ring, not a blink: the point is to suggest an ongoing flow without
 * pulling attention away from the copy. Motion is opt-out below.
 */
@media (prefers-reduced-motion: no-preference) {
	.lau-proceso__track::after {
		animation: lau-proceso-pulse 2.8s ease-out infinite;
	}

	@keyframes lau-proceso-pulse {
		0% {
			box-shadow: 0 0 0 0 rgba(168, 124, 88, 0.45);
		}

		70%,
		100% {
			box-shadow: 0 0 0 0.45rem rgba(168, 124, 88, 0);
		}
	}
}

/* ---------- Columns ---------- */

/*
 * The grid layout writes a fixed five column track, which only holds up on wide
 * screens. Two columns from the tablet range, one once core/columns stacks
 * everything else.
 */
@media (max-width: 1279.98px) {
	.lau-proceso__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.lau-proceso__steps {
		grid-template-columns: 1fr;
	}
}

/* ---------- Reveal ---------- */

/*
 * Scroll-driven, so it needs no JavaScript, and guarded twice: browsers without
 * `animation-timeline` never run it and show the content as it is, and a
 * reduced-motion preference opts out. The content is therefore never hidden by
 * a timeline that failed to resolve.
 */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.lau-proceso__intro,
		.lau-proceso__steps {
			animation: lau-proceso-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}

		@keyframes lau-proceso-reveal {
			from {
				opacity: 0;
				transform: translateY(1.5rem);
			}

			to {
				opacity: 1;
				transform: none;
			}
		}
	}
}