/*
 * Scroll reveal. Hidden only while html.accl-reveal is set (head script, only when JS and motion are allowed);
 * the script adds .is-in as each element scrolls into view. Opacity + transform: no layout shift.
 */

html.accl-reveal [data-accl-reveal] {
	opacity: 0;
	transform: translate3d(0, 1.5rem, 0);
	transition:
		opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: calc(var(--accl-i, 0) * 90ms);
	will-change: opacity, transform;
}
html.accl-reveal [data-accl-reveal="fade"] {
	transform: none;
}
html.accl-reveal [data-accl-reveal="left"] {
	transform: translate3d(-1.5rem, 0, 0);
}
html.accl-reveal [data-accl-reveal="right"] {
	transform: translate3d(1.5rem, 0, 0);
}
html.accl-reveal [data-accl-reveal].is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Hero entrance on load (CSS only, so it needs no scroll). */
@media (prefers-reduced-motion: no-preference) {
	.hero__copy > *,
	.hero__panels,
	.hero .quote {
		animation: accl-rise 1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}
	.hero__copy > :nth-child(2) { animation-delay: 0.1s; }
	.hero__copy > :nth-child(3) { animation-delay: 0.2s; }
	.hero__copy > :nth-child(4) { animation-delay: 0.3s; }
	.hero__copy > :nth-child(n + 5) { animation-delay: 0.4s; }
	.hero__panels,
	.hero .quote { animation-delay: 0.35s; }
}
@keyframes accl-rise {
	from { opacity: 0; transform: translate3d(0, 1.25rem, 0); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	[data-accl-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}