/*
 * core/group — "Chart bar" (`is-style-chart-bar`).
 *
 * Registered opt-in by `includes/styles/blocks/core-group-chart-bar.php`.
 *
 * One bar of a bar chart: an empty group whose height is its value and whose
 * colour is the Color panel's. Both of those are the block's own controls and
 * neither is here. What is here is the *rise* — the bar growing out of its axis
 * when the chart first comes into view, which the reference prototype animates and
 * which nothing declarative on a block can express.
 *
 * ## Why it is a style at all, when the chart itself needed none
 *
 * `patterns/dialog-audience-profile.php` builds its bar chart out of native blocks
 * end to end: a `grid` layout for the three columns, a flex rail per column so the
 * bar's `flexSize` is a *width* rather than a height, `dimensions.minHeight` for
 * the height and the Color panel for the fill. That is the whole chart, with no
 * CSS — and it is worth keeping that way, because every number in it stays a
 * control an editor can find.
 *
 * The animation is the one part that cannot be. It needs a **hook**: something in
 * the markup that says "this box is a bar", so a rule can grow it from nothing
 * without also growing the group beside it that happens to have a background. A
 * block style is exactly that hook — a class an editor applies by name, which is
 * both the selector and the documentation.
 *
 * ## `scale`, not `min-height`
 *
 * The bar's height is `min-height` in pixels, and animating that property would
 * lay out the page on every frame. `scale: 1 0` with `transform-origin: bottom` is
 * the same picture on the compositor, and it leaves the value in the inspector
 * alone — an editor who nudges 79% to 60% changes one number and the animation
 * follows it, because the animation never mentions it.
 *
 * ## An `animation`, and that is what makes it restart
 *
 * The chart lives in a `core/tab-panel`, which core hides by binding the `hidden`
 * attribute — and `core/tab-panel`'s own stylesheet turns that into
 * `display: none !important`. So a bar in an unselected tab is **not rendered**,
 * which has two consequences, both wanted:
 *
 *   1. A transition would have nothing to interpolate from. An animation on an
 *      element that has just become rendered starts at its first keyframe.
 *   2. It re-runs every time the tab is selected again, with no state to reset and
 *      no script to run. That is the reference prototype's `animateBars()`, in two
 *      declarations.
 *
 * `both` holds the `from` state through the delay rather than flashing the full
 * bar for a frame first. `transform-origin` is **outside** the reduced-motion
 * guard on purpose: with motion off there is no animation to anchor, but the
 * property is also what any future scale on this box would want, and a bar that
 * grows from its middle because a guard moved is a bad way to find that out.
 */

.wp-block-group.is-style-chart-bar {
	transform-origin: bottom;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-group.is-style-chart-bar {
		/*
		 * The reference's own 1.1s ease-out, rounded to 900ms: three bars rising
		 * together read as slower than one, and the panel they are in has already
		 * spent 400ms fading up.
		 */
		animation: kg-chart-bar-rise 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
	}

	@keyframes kg-chart-bar-rise {
		from {
			scale: 1 0;
		}
	}
}