html {
	container-name: html;
	/* stylelint-disable-next-line plugin/use-baseline */
	container-type: scroll-state;
}

nav {
	transition: max-block-size 200ms ease-in-out;
}

@container html scroll-state(scrollable: top) {
	header {
		box-shadow: var(--shadow-sm);
	}
}

@media (prefers-reduced-motion: reduce) {
	nav {
		transition: none;
	}
}