/**
 * Airtech Motion — initial states and hover only.
 *
 * Two rules govern this file:
 *
 * 1. Every hidden state is scoped under `.js-mo`, which is set on <html> at run time.
 *    With JavaScript off, or if motion.js fails to load, none of these rules match and
 *    the page renders exactly as it does today. Nothing here can leave content invisible.
 *
 * 2. Only `opacity` is pre-set. The distances live in motion.js, in one place, so the
 *    two files cannot drift apart on how far something travels.
 *
 * The selector list below is the same list as MO_SELECTORS in motion.js; check.js
 * asserts they agree.
 */

:root {
	/* durations */
	--mo-micro: 160ms;
	--mo-ui: 240ms;
	--mo-enter: 1000ms;
	--mo-media: 1200ms;
	--mo-long: 1800ms;
	--mo-count: 1800ms;

	/* easings */
	--mo-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* power2.out */
	--mo-ease-inout: cubic-bezier(0.77, 0, 0.175, 1);
	--mo-ease-hover: ease;

	/* distances */
	--mo-rise: 16px;
	--mo-lift: 28px;

	/* choreography */
	--mo-stagger: 90ms;
}

/* ---- Initial states (opacity only, .js-mo scoped) ------------------------- */

.js-mo .at-hero__display,
.js-mo .at-hero__heading,
.js-mo .at-hero__actions .at-btn,
.js-mo .at-hero__media-frame,
.js-mo .at-hero__deco--left,
.js-mo .at-hero__deco--right,
.js-mo .at-advantage .at-eyebrow,
.js-mo .at-advantage__heading,
.js-mo .at-advantage__text,
.js-mo .at-advantage__item,
.js-mo .at-advantage__watermark,
.js-mo .at-trust .at-eyebrow--onblue,
.js-mo .at-trust__heading,
.js-mo .at-stat,
.js-mo .at-cert,
.js-mo .at-story__copy > *,
.js-mo .at-story__media,
.js-mo .at-story .at-playbtn,
.js-mo .at-industries__inner .at-eyebrow,
.js-mo .at-industries__inner .at-h2,
.js-mo .at-indcard,
.js-mo .at-tech .at-eyebrow--center,
.js-mo .at-tech__heading,
.js-mo .at-tech__intro,
.js-mo .at-techcard,
.js-mo .at-hiw__copy > *,
.js-mo .at-hiw__media,
.js-mo .at-step,
.js-mo .at-step__num,
.js-mo .at-step__num--cta,
.js-mo .at-compare .at-eyebrow--onblue,
.js-mo .at-compare__text,
.js-mo .at-compare__btn,
.js-mo .at-next__head > *,
.js-mo .at-locator,
.js-mo .at-nextcard,
.js-mo .at-footer__col,
.js-mo .at-footer__brand,
.js-mo .at-footer__mid,
.js-mo .at-footer__bottom {
	opacity: 0;
}

/* Release the pre-hide once a section's entry has finished. The reveal leaves
 * opacity:1 as an INLINE style, and other scripts can wipe inline styles: the
 * theme's advantage carousel is a Swiper below 768px, and destroying it on the way
 * back up (destroy(true, true)) strips every slide's style attribute, so the four
 * advantage items fell back to the opacity:0 above and the right column went blank
 * after a window resize (BugHerd 59). data-mo-done is set by motion.js when the
 * section's timeline completes, so this never cuts an entry short. Under reduced
 * motion there is no section timeline, so motion.js marks each element instead. */
.js-mo [data-mo-done] [data-mo],
.js-mo [data-mo][data-mo-done] {
	opacity: 1;
}

/* ---- Card hover (spec §6 and §7) -----------------------------------------
 * 4px and 1.03 are deliberately small. These cards are large, and a large element
 * needs less movement than a small one to register the same amount of response.
 * Both card grids hover identically on purpose.
 *
 * ⚠️ The hover transition must NOT be live while the entry tween is running. A CSS
 * `transition: transform` on an element GSAP is tweening re-interpolates every frame
 * GSAP writes, adding its own lag on top — measured on the dev site, it made the
 * card's translate finish AFTER its opacity instead of at 70% of it, which is the
 * whole point of the split. `data-mo-done` is set on the section by motion.js when
 * that section's entry timeline completes, so hover only arms afterwards. Under
 * `.js-mo` the transition is off until then; with no JS there is no `.js-mo` and the
 * plain rule below applies immediately, as it should.
 */

.at-indcard,
.at-techcard {
	transition: transform var(--mo-ui) var(--mo-ease-hover);
}

.js-mo .at-indcard,
.js-mo .at-techcard,
.js-mo .at-indcard__img,
.js-mo .at-techcard__img {
	transition: none;
}

.js-mo [data-mo-done] .at-indcard,
.js-mo [data-mo-done] .at-techcard {
	transition: transform var(--mo-ui) var(--mo-ease-hover);
}

.js-mo [data-mo-done] .at-indcard__img,
.js-mo [data-mo-done] .at-techcard__img {
	transition: transform 400ms var(--mo-ease-hover);
}

.at-indcard:hover,
.at-techcard:hover {
	transform: translateY(-4px);
}

.at-indcard__img,
.at-techcard__img {
	transition: transform 400ms var(--mo-ease-hover);
}

.at-indcard:hover .at-indcard__img,
.at-techcard:hover .at-techcard__img {
	transform: scale(1.03);
}

/* ---- Reduced motion ------------------------------------------------------
 * The ticker is the page's only continuous animation and it never stops. Under a
 * reduce preference it is exactly the kind of perpetual sliding the preference
 * exists to switch off. Movement stops; opacity still carries the reveal, which
 * motion.js handles.
 */

@media (prefers-reduced-motion: reduce) {
	.at-ticker__track {
		animation-play-state: paused;
	}

	.at-indcard,
	.at-techcard,
	.at-indcard__img,
	.at-techcard__img {
		transition: none;
	}

	.at-indcard:hover,
	.at-techcard:hover {
		transform: none;
	}

	.at-indcard:hover .at-indcard__img,
	.at-techcard:hover .at-techcard__img {
		transform: none;
	}
}