/**
 * Cooperative animation layer for core/accordion. Companion to accordion-animation.js.
 *
 * Plain CSS; if your theme uses Sass, this drops into any partial unchanged.
 *
 * The Interactivity API binds `inert` on closed panels and core CSS turns
 * that into `display: none; margin-block-start: 0;`, which kills CSS
 * transitions AND collapses the heading-to-panel gap immediately. While JS
 * is animating it sets `.is-animating` on the panel; these rules un-hide the
 * panel and pin the gap to `var(--wp--style--block-gap)` so the JS can ease
 * `max-height` and `margin-block-start` in parallel. Once `.is-animating`
 * is removed, core's `display: none` (and the a11y semantics of `inert`)
 * resumes.
 *
 * Reduced-motion users keep core's instantaneous behavior (no rules below apply).
 */
@media (prefers-reduced-motion: no-preference) {
	.wp-block-accordion-panel.is-animating {
		overflow: hidden;
		transition:
			max-height 0.2s ease,
			margin-block-start 0.2s ease;
	}

	/* Higher specificity than core's
	   `.wp-block-accordion-panel[inert] { display: none; margin-block-start: 0; }`
	   so the panel stays in layout AND keeps the heading-to-panel gap that
	   `:root :where(.is-layout-flow) > *` provides
	   (`--wp--style--block-gap`, commonly 24px from `theme.json`'s
	   `styles.spacing.blockGap`). */
	.wp-block-accordion-panel.is-animating[inert],
	.wp-block-accordion-panel.is-animating[aria-hidden="true"] {
		display: revert;
		margin-block-start: var(--wp--style--block-gap, 1.5rem);
	}
}