/**
 * Bricksify: Hero Banner.
 *
 * The animated pieces are hidden until the script has set their opening state,
 * otherwise each one paints in full and then jumps back to its offset.
 *
 * This file only ever loads when the companion plugin is active, and the plugin
 * loads it together with hero-banner.js. A buyer running the template without
 * the plugin never sees these rules and gets plain, fully visible content. The
 * `is-ready` class is added by the script on every path it can take, including
 * the paths where it decides not to animate.
 */

.bxc-hero-banner .bxc-hb__title,
.bxc-hero-banner .bxc-hb__proof-text,
.bxc-hero-banner .bxc-hb__card-text,
.bxc-hero-banner .bxc-hb__cta {
	visibility: hidden;

	/*
	 * Failsafe. If the script never arrives at all, because the request was
	 * blocked or the file failed to parse, this stylesheet must not be what
	 * costs the reader the words. A zero-duration animation with a two second
	 * delay reveals them anyway. In the normal case `is-ready` lands within a
	 * few dozen milliseconds and cancels this long before it runs.
	 */
	animation: bxc-hb-failsafe 0s linear 2s forwards;
}

.bxc-hero-banner .bxc-hb__avatars-wrap {
	clip-path: inset(0% 100% 0% 0%);
	animation: bxc-hb-failsafe-clip 0s linear 2s forwards;
}

@keyframes bxc-hb-failsafe {
	to {
		visibility: visible;
	}
}

@keyframes bxc-hb-failsafe-clip {
	to {
		clip-path: inset(0% 0% 0% 0%);
	}
}

.bxc-hero-banner.is-ready .bxc-hb__title,
.bxc-hero-banner.is-ready .bxc-hb__proof-text,
.bxc-hero-banner.is-ready .bxc-hb__card-text,
.bxc-hero-banner.is-ready .bxc-hb__cta {
	visibility: visible;
	animation: none;
}

/*
 * The script writes the clip inline, so it wins over the rule above from the
 * moment it runs. Cancelling the failsafe is all that is left to do here.
 */
.bxc-hero-banner.is-ready .bxc-hb__avatars-wrap {
	animation: none;
}

/**
 * A word must never break across two lines.
 *
 * SplitText gives every piece `display: inline-block` so it can be moved, and
 * that hands the browser a line-break opportunity between every pair of them.
 * The script wraps characters in one element per word; this rule is the other
 * half of the fix, because an inline-block word box is still free to wrap its
 * own contents when the line runs short.
 */
.bxc-hero-banner .bxc-hb__word {
	white-space: nowrap;
}

/**
 * Text decoration does not propagate into an inline-block, so the underlined
 * run in the proof line loses its underline the moment SplitText wraps its
 * words. Put it back on the pieces. The spaces between them stay text nodes
 * inside the original span, so the rule reads as one continuous underline.
 */
.bxc-hero-banner .bxc-hb__underline .bxc-hb__word,
.bxc-hero-banner .bxc-hb__underline .bxc-hb__char {
	text-decoration: inherit;
}

/**
 * Reduced motion never waits for the script. The reader asked for no movement,
 * so everything is simply there, and a script failure cannot hide it.
 */
@media (prefers-reduced-motion: reduce) {
	.bxc-hero-banner .bxc-hb__title,
	.bxc-hero-banner .bxc-hb__proof-text,
	.bxc-hero-banner .bxc-hb__card-text,
	.bxc-hero-banner .bxc-hb__cta {
		visibility: visible;
		animation: none;
	}

	.bxc-hero-banner .bxc-hb__avatars-wrap {
		clip-path: none;
		animation: none;
	}
}