/**
 * Bricksify: Letter Drop.
 *
 * Loads only with the companion plugin, together with letter-drop.js. Every
 * rule targets markup the script creates, so an element carrying
 * `bxc-letter-drop` without the plugin is simply normal text.
 */

.bxc-letter-drop .bxld__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * A word never breaks between letters, and it clips its letters at its own
 * top edge: they drop in from above it. The reference clips the whole title
 * (overflow:hidden), which is the same thing on one line; per word it stays
 * right on any number of lines. The sides and the bottom stay open, so tight
 * letter-spacing, italics and descenders are never cut. clip-path, unlike
 * overflow, leaves the word on the text baseline.
 */
.bxc-letter-drop .bxld__word {
	display: inline-block;
	white-space: nowrap;
	clip-path: inset(0 -.5em -.4em -.5em);
}

.bxc-letter-drop .bxld__char {
	display: inline-block;
	will-change: transform;
}

/*
 * Before the script runs, the text is hidden so it cannot flash and then jump
 * out of sight. `bx-js` is printed in <head> by the companion only on pages
 * that use the effect, so a visitor without JavaScript always sees the text.
 * If the script never arrives, the failsafe shows it after 3 seconds.
 */
html.bx-js body.bricks-is-frontend .bxc-letter-drop:not(.is-ready) {
	visibility: hidden;
	animation: bxld-failsafe 0s 3s forwards;
}

@keyframes bxld-failsafe {
	to {
		visibility: visible;
	}
}

@media (prefers-reduced-motion: reduce) {
	html.bx-js body.bricks-is-frontend .bxc-letter-drop:not(.is-ready) {
		visibility: visible;
		animation: none;
	}
}