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

/*
 * The opening state.
 *
 * The eyebrow, headline, lede and actions all arrive from 28px below, so each
 * one would otherwise paint in place and then jump back to its offset.
 * `:not(.is-ready)` means the rule 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-grid:not(.is-ready) .bxg__reveal {
	visibility: hidden;
	animation: bxc-hg-failsafe 0s linear 2s forwards;
}

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

/**
 * The spotlight layer is invisible until the pointer arrives.
 *
 * The global class parks the radial mask at -200px/-200px, which is already off
 * screen, so nothing is needed for the no-JS case. This rule exists for the
 * opposite reason: once the script is running, the layer is composited every
 * frame the pointer moves, and promoting it up front avoids a first-move stutter
 * on long pages.
 */
.bxc-hero-grid.is-ready .bxg__layer.is-active {
	will-change: mask-image, -webkit-mask-image;
}

/**
 * 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 spotlight, the drift, the float, the pulse
 * and the marquee are all skipped in the script itself.
 */
@media (prefers-reduced-motion: reduce) {
	.bxc-hero-grid:not(.is-ready) .bxg__reveal {
		visibility: visible;
		animation: none;
	}

	.bxc-hero-grid .bxg__layer.is-active,
	.bxc-hero-grid .bxg__float,
	.bxc-hero-grid .bxg__row {
		will-change: auto;
	}
}