/* =========================================================================
   ANIMATIONS
   Every keyframe from the original design, plus the scroll-reveal system.
   All of it is switched off by prefers-reduced-motion at the bottom of the
   file, and again by the .sk-motion-off class when an administrator sets the
   motion level to zero.
   ====================================================================== */

@keyframes sk-grain {
	0%   { transform: translate(0, 0); }
	25%  { transform: translate(-2%, 1%); }
	50%  { transform: translate(1%, -2%); }
	75%  { transform: translate(-1%, 2%); }
	100% { transform: translate(0, 0); }
}

@keyframes sk-rise {
	from {
		opacity: 0;
		transform: translateY(26px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes sk-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes sk-grow-x {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@keyframes sk-blink {
	0%, 100% { opacity: .3; }
	50%      { opacity: 1; }
}

/* -------------------------------------------------------------------------
   Scroll reveal

   Elements marked [data-reveal] start shifted and transparent, and are
   released by the IntersectionObserver in main.js. The initial state is set
   in CSS rather than by script so there is no flash of un-hidden content
   before JavaScript boots — and `.no-js` restores everything for visitors
   without it.
   ---------------------------------------------------------------------- */

[data-reveal] {
	opacity: 0;
	transform: translateY(var(--sk-reveal-distance));
	transition:
		opacity .95s var(--sk-ease-soft),
		transform .95s var(--sk-ease-soft);
	transition-delay: var(--sk-delay, 0ms);
}

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

.no-js [data-reveal] {
	opacity: 1;
	transform: none;
}

/* Staggered children inside a revealed group. */
[data-reveal-group] > * {
	transition-delay: var(--sk-delay, 0ms);
}

/* -------------------------------------------------------------------------
   Motion off
   ---------------------------------------------------------------------- */

body.sk-motion-off [data-reveal] {
	opacity: 1;
	transform: none;
	transition: none;
}

body.sk-motion-off .sk-grain {
	animation: none;
}

body.sk-motion-off .sk-hero__img {
	transform: none !important;
}

body.sk-motion-off .sk-hero__eyebrow,
body.sk-motion-off .sk-hero__title,
body.sk-motion-off .sk-hero__statement,
body.sk-motion-off .sk-hero__text,
body.sk-motion-off .sk-hero__actions,
body.sk-motion-off .sk-hero__stats,
body.sk-motion-off .sk-menu__list > li > a {
	animation: none;
	opacity: 1;
	transform: none;
}

/* -------------------------------------------------------------------------
   Reduced motion — the visitor's preference always wins
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	html {
		scroll-behavior: auto;
	}

	[data-reveal] {
		opacity: 1;
		transform: none;
	}

	.sk-grain {
		animation: none;
	}

	.sk-hero__img {
		transform: none !important;
	}

	[data-card]:hover [data-zoom],
	[data-card]:focus-within [data-zoom] {
		transform: none;
	}
}