/**
 * 05 · UTILITIES
 * Small, single-purpose helpers. No component behaviour here.
 */

/* Spacing modifiers */
.u-mt-1 { margin-top: var(--space-1); }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-5 { margin-top: var(--space-5); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mt-7 { margin-top: var(--space-7); }
.u-mt-8 { margin-top: var(--space-8); }

.u-mb-0 { margin-bottom: 0; }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-5 { margin-bottom: var(--space-5); }
.u-mb-6 { margin-bottom: var(--space-6); }
.u-mb-7 { margin-bottom: var(--space-7); }
.u-mb-8 { margin-bottom: var(--space-8); }

.u-py-8 { padding-block: var(--space-8); }

/* Colour helpers */
.u-text-black { color: var(--color-black); }
.u-text-secondary { color: var(--color-text-secondary); }
.u-text-muted { color: var(--color-text-muted); }
.u-text-blue { color: var(--color-primary); }
.u-text-white { color: var(--color-white); }

.u-bg-off-white { background: var(--color-off-white); }
.u-bg-black { background: var(--color-black); }
.u-bg-primary-light { background: var(--color-primary-light); }

/* Layout helpers */
.u-block { display: block; }
.u-text-center { text-align: center; }

.u-max-60 { max-width: 60ch; }
.u-max-70 { max-width: 70ch; }

.u-border-bottom { border-bottom: 1px solid var(--color-border); }
.u-border-top { border-top: 1px solid var(--color-border); }

/* Width spans for the grid (12/8/4 column behaviour lives in responsive). */
.u-col { grid-column: auto; }
.u-col-2 { grid-column: span 2; }
.u-col-3 { grid-column: span 3; }
.u-col-4 { grid-column: span 4; }
.u-col-6 { grid-column: span 6; }

/* Visually hidden but available to screen readers. */
.u-screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal;
}

/* Reveal hooks for [data-viatrix-reveal] handled by motion.js.
   Gated behind html.js so content is never hidden when JS is unavailable. */
html.js [data-viatrix-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--dur-slow) var(--ease-out),
		transform var(--dur-slow) var(--ease-out);
}

html.js [data-viatrix-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* Diagram active state — connectors fade in. Gated behind html.js so the
   flow stays readable without JavaScript. */
html.js .viatrix-diagram:not(.is-active) .viatrix-diagram__connector {
	opacity: 0;
}

html.js .viatrix-diagram.is-active .viatrix-diagram__connector {
	animation: viatrix-fade-in var(--dur-slow) var(--ease-out) forwards;
}

/* Reveal stagger — used only where components place the utility themselves. */
.u-stagger > *:nth-child(1) { transition-delay: 0ms; }
.u-stagger > *:nth-child(2) { transition-delay: 60ms; }
.u-stagger > *:nth-child(3) { transition-delay: 120ms; }
.u-stagger > *:nth-child(4) { transition-delay: 180ms; }

@keyframes viatrix-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}