/* Scroll reveals — transform ONLY, never an opacity:0 start. A headless
   render or a visitor with JS disabled must still see full content; the
   reveal just arrives from a 28px offset instead of popping in flat. */
.reveal {
	transform: translateY(28px);
	transition: transform 700ms var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: transform;
}
.reveal.is-visible { transform: translateY(0); }

.reveal--fade-side { transform: translateX(24px); }
.reveal--fade-side.is-visible { transform: translateX(0); }

/* Hero elements animate in immediately on load, not on scroll. */
.hero .reveal { transition-duration: 800ms; }

/* Focus states — always visible, never suppressed. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--accent-dark);
	outline-offset: 3px;
	border-radius: var(--radius);
}

/* Animated number — used only for figures that come from real data (never
   invented experience/project counts); counts up on reveal. */
.stat-number { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal, .reveal--fade-side {
		transform: none !important;
		transition: none !important;
	}
	.hero-slide { transition: opacity 1ms linear !important; transform: none !important; }
	.service-row__media img, .btn .icon, .site-nav .nav-menu a::after, .burger__box span {
		transition: none !important;
	}
}