/*
 * Motion: shared scroll and entrance effects (BEM blocks, tokens only).
 * Parallax: assets/js/parallax.js. Intro: assets/js/intro.js.
 */

/*
 * Parallax (assets/js/parallax.js): put .sw-parallax on a frame with its own size (it clips),
 * .sw-parallax__media on the image. With JS the image is 110% tall and slides ±3% on scroll.
 */
.sw-parallax { position: relative; overflow: hidden; } /* layouts may make the frame absolute instead */
.sw-parallax--active .sw-parallax__media {
	position: absolute;
	inset-inline: 0;
	inset-block-start: -5%;
	inline-size: 100%;
	block-size: 110%;
	object-fit: cover;
	will-change: transform;
}

/*
 * Intro (assets/js/intro.js): eyebrow letters switch in, title words jump up from behind a mask,
 * text fades in (.sw-intro__fade extras with the title), and an .sw-intro__scan block is revealed by its own top border sweeping up.
 * Until .sw-intro--ready the parts are hidden (only with JS, see the sw-js class in <head>);
 * if the script never runs they appear after 3s anyway.
 */
.sw-intro__eyebrow { min-block-size: var(--leading-small); } /* keeps its line while the letters switch in */

.sw-intro__word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	/* room for descenders (g, y, p) inside the mask, without changing the line height */
	padding-block-end: 0.15em;
	margin-block-end: -0.15em;
}
.sw-intro__word-inner { display: inline-block; will-change: transform; }

.sw-intro__scan { position: relative; }
.sw-intro__scan--active {
	clip-path: inset(var(--intro-scan, 0%) 0 0 0);
	border-block-start-color: transparent;
}
.sw-intro__scan--active::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: var(--intro-scan, 0%);
	border-block-start: var(--border);
}

@media (prefers-reduced-motion: no-preference) {
	.sw-js .sw-intro:not(.sw-intro--ready) :is(.sw-intro__eyebrow, .sw-intro__title, .sw-intro__text, .sw-intro__fade, .sw-intro__scan) {
		visibility: hidden;
		animation: sw-intro-fallback 0s 3s forwards;
	}
}

@keyframes sw-intro-fallback { to { visibility: visible; } }