/* ==========================================================================
   Scroll reveals — transform ONLY, never opacity:0 as a start state.
   Content stays visible/readable even without JavaScript or before the
   IntersectionObserver fires (headless renders, crawlers, reduced motion).
   ========================================================================== */

html,
body {
	overflow-x: hidden;
}

.reveal,
[data-auto-reveal] > * {
	transform: translateY(28px);
	transition: transform 620ms var(--ease-out);
	will-change: transform;
}

.reveal.is-visible,
[data-auto-reveal] > *.is-visible {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.reveal,
	[data-auto-reveal] > * {
		transform: none;
		transition: none;
	}
}

/* Staggering applied inline via JS (--reveal-delay custom property) */
.reveal,
[data-auto-reveal] > * {
	transition-delay: var(--reveal-delay, 0ms);
}

/* ==========================================================================
   Micro-interactions
   ========================================================================== */

.service-card,
.btn,
.link-arrow .icon,
.hero__dot {
	transition-timing-function: var(--ease-out);
}

a,
button {
	transition: color var(--dur-fast) var(--ease-out);
}