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

.bxc-blur-reveal .bxbr__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;
}

/*
 * SplitType's markup in the reference: words and characters are inline
 * blocks, so the stretch and skew transforms apply and a word never breaks
 * between its letters. Nothing is clipped: the blur spills out, as it does
 * on the demo.
 */
.bxc-blur-reveal .bxbr__word,
.bxc-blur-reveal .bxbr__char {
	display: inline-block;
}

.bxc-blur-reveal .bxbr__word {
	white-space: nowrap;
}

/*
 * Before the script runs, the text is hidden so it cannot flash sharp and
 * then blur out. `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-blur-reveal:not(.is-ready) {
	visibility: hidden;
	animation: bxbr-failsafe 0s 3s forwards;
}

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

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