/**
 * Bricksify: Hero Assemble.
 *
 * Loads only with the companion plugin, always together with hero-assemble.js.
 * The layout lives in the `hero-assemble` global class so it travels inside the
 * copied JSON: a buyer without the plugin gets a correct, fully visible hero
 * with a static composition and no scroll choreography.
 *
 * Everything here is about the animated state only.
 */

/*
 * The opening state.
 *
 * The cards, the account and social panels and the two upper phone screens all
 * start off screen, so without this they would paint in place and then jump to
 * their offsets on the first frame. `:not(.is-ready)` stops matching the moment
 * the script is done, so nothing has 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 two seconds later reveals everything
 * anyway; in the normal case `is-ready` lands first and the rule stops matching.
 */
.bxc-hero-assemble:not(.is-ready) .bxa__rise,
.bxc-hero-assemble:not(.is-ready) .bxa__slide {
	visibility: hidden;
	animation: bxc-ha-failsafe 0s linear 2s forwards;
}

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

/*
 * Promote only what actually moves every frame. The copy stage, the panels that
 * rise and the two sliding screens are all scrubbed against scroll position, so
 * they are recomposited continuously between 21% and 70% of the track.
 */
.bxc-hero-assemble.is-ready .bxa__stage,
.bxc-hero-assemble.is-ready .bxa__rise,
.bxc-hero-assemble.is-ready .bxa__slide,
.bxc-hero-assemble.is-ready .bxa__group {
	will-change: transform, opacity;
}

/*
 * Under 992px the layout is a plain stack: the script never builds the
 * timeline, so the opening state must not be applied either.
 */
@media (max-width: 991px) {
	.bxc-hero-assemble:not(.is-ready) .bxa__rise,
	.bxc-hero-assemble:not(.is-ready) .bxa__slide {
		visibility: visible;
		animation: none;
	}

	.bxc-hero-assemble .bxa__stage,
	.bxc-hero-assemble .bxa__rise,
	.bxc-hero-assemble .bxa__slide {
		will-change: auto;
	}
}

/*
 * 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. The assembly and the marquee are both skipped
 * in the script itself.
 */
@media (prefers-reduced-motion: reduce) {
	.bxc-hero-assemble:not(.is-ready) .bxa__rise,
	.bxc-hero-assemble:not(.is-ready) .bxa__slide {
		visibility: visible;
		animation: none;
	}

	.bxc-hero-assemble .bxa__stage,
	.bxc-hero-assemble .bxa__rise,
	.bxc-hero-assemble .bxa__slide,
	.bxc-hero-assemble .bxa__group {
		will-change: auto;
	}
}