perf(dropdown): ⚡️ use content-visibility for icons and dropdown menus

This will reduce the initial render cost of the menus, and also prevent premature download
for the icons.

resources/skins.citizen.styles/components/Dropdown.less

@@ -1,12 +1,15 @@
 .citizen-dropdown {
 	.citizen-menu__card {
 		z-index: @z-index-dropdown;
+		content-visibility: hidden;
 		max-width: 80vw;
 		transition-timing-function: var( --transition-timing-function-ease-in );
 		transition-duration: var( --transition-duration-base );
-		transition-property: transform;
+		transition-property: transform, content-visibility;
+		transition-behavior: allow-discrete;
 
 		> * {
+			opacity: 0;
 			transition-timing-function: var( --transition-timing-function-ease-in );
 			transition-duration: var( --transition-duration-base );
 			transition-property: opacity;
@@ -58,6 +61,7 @@
 	&-details {
 		&[ open ] {
 			+ .citizen-menu__card {
+				content-visibility: visible;
 				transition-timing-function: var( --transition-timing-function-ease-out );
 				transition-duration: var( --transition-duration-medium );
 				transform: none;

resources/skins.citizen.styles/components/Menu.less

@@ -14,10 +14,6 @@
 		box-shadow: var( --box-shadow-drop-xx-large );
 		transform: scale( 0 );
 		contain: content;
-
-		> * {
-			opacity: 0;
-		}
 	}
 
 	&__heading {
@@ -80,6 +76,7 @@
 	height: var( --size-icon );
 	min-height: var( --size-icon );
 	contain: strict;
+	content-visibility: auto;
 
 	&::before {
 		display: block;