/* ==========================================================================
   ACE - Reveal system & motion utilities
   Hidden states only apply when JS is available (html.js).
   ========================================================================== */

.js [data-reveal="block"] {
	opacity: 0;
	filter: blur(10px);
	transform: translate3d(0, 24px, 0);
	transition:
		opacity var(--dur-slow) var(--ease-premium),
		filter var(--dur-slow) var(--ease-premium),
		transform var(--dur-slow) var(--ease-premium);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

.js [data-reveal="block"].is-revealed {
	opacity: 1;
	filter: blur(0);
	transform: none;
}

/* Sentences -------------------------------------------------------------- */
.js [data-reveal="sentence"] .reveal-sentence {
	display: inline;
	opacity: 0.08;
	filter: blur(6px);
	transition:
		opacity var(--dur-slow) var(--ease-premium),
		filter var(--dur-slow) var(--ease-premium);
}

.js [data-reveal="sentence"].is-revealed .reveal-sentence {
	opacity: 1;
	filter: blur(0);
}

/* Lines (masked rise) ---------------------------------------------------- */
.reveal-line {
	display: block;
	overflow: hidden;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}

.reveal-line__inner {
	display: block;
}

.js [data-reveal="lines"] .reveal-line__inner {
	transform: translate3d(0, 105%, 0);
	transition: transform 1200ms var(--ease-premium);
	transition-delay: calc(var(--reveal-delay, 0ms) + var(--line-index, 0) * 110ms);
}

.js [data-reveal="lines"].is-revealed .reveal-line__inner {
	transform: none;
}

/* Hairline draw ---------------------------------------------------------- */
.js [data-reveal="rule"] {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1400ms var(--ease-premium);
	transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal="rule"].is-revealed {
	transform: scaleX(1);
}

/* Media hover zoom ------------------------------------------------------- */
.media-zoom {
	overflow: hidden;
}

.media-zoom img {
	transition: transform 1400ms var(--ease-premium);
}

@media (hover: hover) {
	.media-zoom-trigger:hover .media-zoom img,
	.media-zoom:hover img {
		transform: scale(1.045);
	}
}

/* Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}

	.js [data-reveal],
	.js [data-reveal] .reveal-sentence,
	.js [data-reveal] .reveal-line__inner {
		opacity: 1 !important;
		filter: none !important;
		transform: none !important;
	}
}