/* Scroll + entrance reveal animation system.
   Additive layer: does not replace the existing css/site-animations.css
   (.ech-scroll-reveal / .ech-in-view) system already used on the header/footer/
   cart/checkout blocks — that system is left untouched. This file only adds
   the new .reveal-* utility classes requested for broader entrance animation
   coverage (headings, images, cards, hero, footer). */

/* No-JS fallback: everything stays visible until JS proves it can animate it. */
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-zoom,
.reveal-image,
.reveal-stagger > * {
	opacity: 1;
	transform: none;
}

html.js-animations-ready .reveal-up,
html.js-animations-ready .reveal-left,
html.js-animations-ready .reveal-right,
html.js-animations-ready .reveal-zoom,
html.js-animations-ready .reveal-image {
	opacity: 0;
	will-change: opacity, transform;
	transition:
		opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
		transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

html.js-animations-ready .reveal-up { transform: translateY(35px); }
html.js-animations-ready .reveal-left { transform: translateX(-40px); }
html.js-animations-ready .reveal-right { transform: translateX(40px); }
html.js-animations-ready .reveal-zoom { transform: scale(0.94); }
html.js-animations-ready .reveal-image { transform: scale(1.08); }

html.js-animations-ready .reveal-up.is-visible,
html.js-animations-ready .reveal-left.is-visible,
html.js-animations-ready .reveal-right.is-visible,
html.js-animations-ready .reveal-zoom.is-visible,
html.js-animations-ready .reveal-image.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

/* Staggered children (cards, FAQ items, footer columns, etc.). */
html.js-animations-ready .reveal-stagger > * {
	opacity: 0;
	transform: translateY(25px);
	will-change: opacity, transform;
	transition:
		opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--stagger-index, 0) * 90ms);
}

html.js-animations-ready .reveal-stagger.is-visible > * {
	opacity: 1;
	transform: translateY(0);
}

/* Hero entrance sequence: eyebrow -> heading -> paragraph -> buttons.
   Runs once on load, independent of the scroll observer, and never touches
   the hero background image/video. */
html.js-animations-ready .reveal-hero-item {
	opacity: 0;
	transform: translateY(22px);
	will-change: opacity, transform;
	transition:
		opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js-animations-ready .reveal-hero-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Manual stagger delays for individual cards that aren't direct children of
   a .reveal-stagger container (e.g. cards wrapped in a display:contents link). */
html.js-animations-ready .reveal-delay-1 { transition-delay: 90ms; }
html.js-animations-ready .reveal-delay-2 { transition-delay: 180ms; }
html.js-animations-ready .reveal-delay-3 { transition-delay: 270ms; }
html.js-animations-ready .reveal-delay-4 { transition-delay: 360ms; }
html.js-animations-ready .reveal-delay-5 { transition-delay: 450ms; }
html.js-animations-ready .reveal-delay-6 { transition-delay: 540ms; }

@media (prefers-reduced-motion: reduce) {
	.reveal-up,
	.reveal-left,
	.reveal-right,
	.reveal-zoom,
	.reveal-image,
	.reveal-stagger > *,
	.reveal-hero-item {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}