/**
 * Bricksify: Hero Expand.
 *
 * This file only ever loads when the companion plugin is active, and the plugin
 * loads it together with hero-expand.js. Everything here is about the animated
 * state; the layout lives in the `hero-expand` global class, so it travels
 * inside the copied JSON and a buyer without the plugin still gets a correct,
 * fully visible hero.
 */

/*
 * The opening state.
 *
 * The headline, the frames and the notes are all animated in from somewhere
 * else, so each one would otherwise paint in place and then jump back to its
 * offset. `:not(.is-ready)` means the rule simply stops matching the moment the
 * script is done, rather than needing a second rule to undo it.
 *
 * Failsafe: if the script never arrives, because the request was blocked or the
 * file failed to parse, this stylesheet must not be what costs the reader the
 * content. A zero-duration animation with a two second delay reveals everything
 * anyway. In the normal case `is-ready` lands within a few dozen milliseconds
 * and the rule stops matching long before the delay is up.
 */
.bxc-hero-expand:not(.is-ready) .bxe__line,
.bxc-hero-expand:not(.is-ready) .bxe__frame,
.bxc-hero-expand:not(.is-ready) .bxe__note {
	visibility: hidden;
	animation: bxc-he-failsafe 0s linear 2s forwards;
}

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

/**
 * The extra scroll length exists only to drive the expand.
 *
 * The section is 100vh in the global class, which is what a buyer without the
 * plugin gets: an ordinary one-screen hero. The script adds `is-scrollable`
 * only once it has actually created the ScrollTriggers, so a blocked GSAP, a
 * thrown error or a reader who asked for less motion never leaves three dead
 * screens of scrolling behind.
 *
 * Two classes beat the global class's `section.hero-expand`, so this wins
 * whichever order Bricks decides to emit the two stylesheets in.
 */
@media (min-width: 992px) {
	.bxc-hero-expand.is-scrollable {
		height: 300vh;
	}
}

/**
 * A word must never break across two lines.
 *
 * SplitText gives every piece `display: inline-block` so it can be transformed,
 * and that hands the browser a line-break opportunity between every pair of
 * them. The script wraps characters in one box 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-expand .bxe__word {
	white-space: nowrap;
}

/**
 * Reduced motion never waits for the script. The reader asked for no movement,
 * so everything is simply there, and neither a slow script nor a failed one can
 * hide it for two seconds first.
 */
@media (prefers-reduced-motion: reduce) {
	.bxc-hero-expand:not(.is-ready) .bxe__line,
	.bxc-hero-expand:not(.is-ready) .bxe__frame,
	.bxc-hero-expand:not(.is-ready) .bxe__note {
		visibility: visible;
		animation: none;
	}
}