/* Auramani — motion. Two ideas only: the hero enters from both sides on load, and
   every other block rises as it scrolls into view.

   Two rules keep it safe. The hidden state (.au-reveal) is applied by assets/js/motion.js
   and never by CSS, so a script that fails to run can never leave the page blank; and the
   script only hides what is already below the fold, so the largest paint on screen is
   never delayed by an animation. The hero is pure CSS because it must move on the first
   frame, and it replays whenever the slider swaps a slide. */

@media (prefers-reduced-motion: no-preference) {
	.au-hero-copy { animation: au-enter-left .75s cubic-bezier(.22,.61,.36,1) both; }
	.au-hero-visual { animation: au-enter-right .75s cubic-bezier(.22,.61,.36,1) both; }
	.au-hero-controls { animation: au-enter-up .75s cubic-bezier(.22,.61,.36,1) .2s both; }
}

@keyframes au-enter-left {
	from { opacity: 0; transform: translate3d(-48px, 0, 0); }
	to { opacity: 1; transform: none; }
}

/* The hero photo is the largest paint on the homepage, so it only travels — fading it in
   would hold the LCP back by the length of the animation. */
@keyframes au-enter-right {
	from { transform: translate3d(48px, 0, 0); }
	to { transform: none; }
}

@keyframes au-enter-up {
	from { opacity: 0; transform: translate3d(0, 16px, 0); }
	to { opacity: 1; transform: none; }
}

.au-reveal {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
}

.au-reveal.au-in {
	opacity: 1;
	transform: none;
	transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
	transition-delay: calc(var(--au-i, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
	.au-reveal, .au-reveal.au-in { opacity: 1; transform: none; transition: none; }
}