/* ==========================================================================
   Motion. Everything here is switched off for prefers-reduced-motion.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	/* Scroll reveal: uses the individual `translate` property so it never
	   fights the hover `transform` on cards. */
	.js [data-reveal] {
		opacity: 0;
		translate: 0 24px;
		transition:
			opacity 0.8s var(--ease) var(--reveal-delay, 0s),
			translate 0.8s var(--ease) var(--reveal-delay, 0s),
			transform var(--dur) var(--ease),
			box-shadow var(--dur) var(--ease),
			border-color var(--dur) var(--ease);
	}

	.js [data-reveal].is-revealed {
		opacity: 1;
		translate: none;
	}

	/* Hero copy rises in each time its slide becomes active. */
	.hero__slide.is-active .hero__title,
	.hero__slide.is-active .hero__text,
	.hero__slide.is-active .hero__list,
	.hero__slide.is-active .hero__btn {
		animation: jm-rise 0.9s var(--ease) both;
	}

	.hero__slide.is-active .hero__text {
		animation-delay: 0.12s;
	}

	.hero__slide.is-active .hero__list {
		animation-delay: 0.24s;
	}

	.hero__slide.is-active .hero__btn {
		animation-delay: 0.36s;
	}

	.hero__slide.is-active .hero__image {
		animation: jm-settle 7s ease-out both;
	}
}

@keyframes jm-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes jm-settle {
	from {
		transform: scale(1.04);
	}
	to {
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important; /* Override every component transition for this preference. */
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}