@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	/*
	 * Give each top-level menu item its own view transition name — its id,
	 * such as "menu-posts" — so each one is captured as an independent group
	 * and animates from its old position and size to its new ones across a
	 * navigation. This produces the accordion effect: the previously open
	 * section collapses as the newly current one expands, instead of the
	 * whole menu simply cross-fading. attr() falls back to "none" for any
	 * item whose id is missing or is not a valid custom identifier. The
	 * shared wp-menu-top class lets the image-pair rule below address every
	 * menu-top group at once.
	 */
	#adminmenu > .menu-top {
		view-transition-name: attr(id type(<custom-ident>), none);
		view-transition-class: wp-menu-top;
	}

	/*
	 * Name the collapse button too, so it slides into place with the menu
	 * items instead of cross-fading as part of the page root.
	 */
	#collapse-menu {
		view-transition-name: collapse-menu;
	}

	/*
	 * Clip each menu-top's snapshot to its animating group box. By default a
	 * captured snapshot keeps its full intrinsic height, so the new (expanded)
	 * submenu paints at full height from the first frame and overlaps the
	 * items below while they are still sliding down. Clipping the image pair
	 * to the group — whose height animates from the link row to the full
	 * expanded height — makes the submenu wipe open, and closed in reverse,
	 * in step with those items.
	 */
	::view-transition-image-pair(.wp-menu-top) {
		overflow: clip;
	}

	/*
	 * Capture an open flyout submenu — one shown on hover or focus — as its own
	 * group, so that it fades out instead of being cut off by the clip above,
	 * since it extends outside its menu-top box. match-element gives each
	 * flyout a unique name, so two open at once cannot collide and abort the
	 * transition. view-transition-group nests the flyout's group inside its
	 * menu-top's group, so it moves along with its menu item while fading out
	 * instead of staying behind at its old position. Since the nested group is
	 * a sibling of the menu-top's image pair, it is not cut off by the clip.
	 *
	 * In the expanded menu, the current item's submenu is in the normal flow,
	 * so it is left to the clipped menu-top. When the menu is folded, either
	 * explicitly or automatically on narrower screens, every submenu is a
	 * flyout, including the current one. Below 783px the menu is responsive and
	 * its submenus are in the normal flow, so none are named there.
	 */
	@media screen and (min-width: 783px) {
		#adminmenu > .wp-not-current-submenu.opensub > .wp-submenu,
		#adminmenu > .wp-not-current-submenu > a.menu-top:focus + .wp-submenu,
		.folded #adminmenu > .opensub > .wp-submenu,
		.folded #adminmenu > .menu-top > a.menu-top:focus + .wp-submenu {
			view-transition-name: match-element;
			view-transition-group: nearest;
		}
	}

	@media screen and (min-width: 783px) and (max-width: 960px) {
		.auto-fold #adminmenu > .opensub > .wp-submenu,
		.auto-fold #adminmenu > .menu-top > a.menu-top:focus + .wp-submenu {
			view-transition-name: match-element;
			view-transition-group: nearest;
		}
	}
}