@view-transition {
	navigation: auto;
}

/* Native navigation with a departing snapshot and an interactive live entrance.
   Disable the older CSS entrance so it cannot run underneath either phase. */
html.is-dashboard-transition-managed :is(.account-dashboard__content, [data-dc-page], [data-doc-page]) {
	animation: none;
	transition: none;
}

html.is-dashboard-view-transition :is(.account-dashboard__content, [data-dc-page], [data-doc-page]) {
	opacity: 1;
	transform: none;
}

/* Never capture the root, including skipped/cancelled transitions. The incoming
   document and all its hit targets stay live; only departing content is captured. */
html.is-dashboard-transition-managed {
	view-transition-name: none;
}

html::view-transition {
	pointer-events: none;
}

html.is-dashboard-view-transition::view-transition-group(dashboard-content) {
	animation-duration: 245ms;
	animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

/* Departing snapshots retain their dimensions/position; the destination is live. */
html.is-dashboard-view-transition::view-transition-group(documentation-content-outgoing),
html.is-dashboard-view-transition::view-transition-group(download-content-outgoing) {
	animation: none;
}

html.is-dashboard-view-transition::view-transition-old(documentation-content-outgoing),
html.is-dashboard-view-transition::view-transition-old(dashboard-content),
html.is-dashboard-view-transition::view-transition-old(download-content-outgoing) {
	mix-blend-mode: normal;
}

/* The live destination stays invisible for this outgoing phase, then enters
   with the same 160ms fade/translation in dashboard-view-transitions.js. */
html.is-dashboard-view-transition::view-transition-old(documentation-content-outgoing),
html.is-dashboard-view-transition::view-transition-old(dashboard-content),
html.is-dashboard-view-transition::view-transition-old(download-content-outgoing) {
	animation: dashboard-snapshot-out 85ms ease-out both;
}

@keyframes dashboard-snapshot-out {
	from { opacity: 1; transform: translateY(0); }
	to { opacity: 0; transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	html.is-dashboard-view-transition::view-transition-group(*),
	html.is-dashboard-view-transition::view-transition-old(*),
	html.is-dashboard-view-transition::view-transition-new(*) {
		animation: none !important;
	}
}