Oh hey, I didn't see you there. I'm looking for some new 😎 code, can you help?

<script>
	const dialog = document.getElementById('demo-dialog-css');
	const open = document.getElementById('demo-dialog-css-open');
	open.addEventListener('click', open_dialog);
	function open_dialog() {
		dialog.showModal();
	}
</script>

<button id="demo-dialog-css-open">Open Dialog</button>
<dialog id="demo-dialog-css">
	<p>Oh hey, I didn't see you there. I'm looking for some new 😎 code, can you help?</p>
	<form method="dialog">
		<button>OK 👍</button>
	</form>
</dialog>

<style>
	#demo-dialog-css {
		&,
		::backdrop {
			transition:
				display 0.3s allow-discrete,
				overlay 0.3s allow-discrete,
				translate 0.3s,
				opacity 0.3s;
			opacity: 0;
			translate: 0 20px;
		}

		&[open],
		&[open]::backdrop {
			opacity: 1;
			translate: 0 0;
		}

		@starting-style {
			&[open],
			&[open]::backdrop {
				opacity: 0;
				translate: 0 20px;
			}
		}
	}
</style>