@keyframes spin {
	to {
		transform: rotate(2turn);
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
}

@keyframes fade-out {
	to {
		opacity: 0;
	}
}

@keyframes scale-up {
	from {
		visibility: visible;
		transform: perspective(400px) translateZ(1px);
		background: url(./logo.png) center no-repeat;
		background-size: contain;
	}

	to {
		visibility: visible;
		transform: perspective(1px) translateZ(1px);
		background: url(./logo.png) center no-repeat;
		background-size: contain;
	}
}

@keyframes scale-down {
	from {
		visibility: visible;
		transform: perspective(1px) translateZ(1px);
		background: url(./logo.png) center no-repeat;
		background-size: contain;
	}

	to {
		visibility: visible;
		transform: perspective(400px) translateZ(1px);
		background: url(./logo.png) center no-repeat;
		background-size: contain;
	}
}

* {
	box-sizing: border-box;
	color-scheme: dark light;
}

::view-transition-old(swirl) {
	animation: 1s linear both spin, 1s linear both fade-out;
}

::view-transition-new(swirl) {
	animation: 1s linear both spin, 1s linear both fade-in;
}

::view-transition-old(batman) {
	animation: 0.5s linear both scale-up;
}

::view-transition-new(batman) {
	animation: 0.5s linear both scale-down;
	animation-delay: 0.5s;
}

body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.5rem;
}

main {
	position: relative;
	width: 100vw;
	min-height: 100svh;
	padding: 3rem;
	overflow: hidden;
	display: grid;
	place-items: center;
	view-transition-name: swirl;
}

#logo {
	position: absolute;
	top: calc(50% - 50px);
	left: calc(50% - 50px);
	width: 100px;
	height: 100px;
	visibility: hidden;
	view-transition-name: batman;
}

article {
	text-align: center;
	max-width: 70ch;
}

h1 {
	font-family: "Comic Sans MS", "Chalkboard SE", "Comic Neue", sans-serif;
}

#navButton {
	background: yellow;
	color: black;
	display: inline-block;
	margin: 1rem;
	padding: 1ch;
	border-radius: 2em;
	font-size: 2rem;
	font-family: "Comic Sans MS", "Chalkboard SE", "Comic Neue", sans-serif;
}

@supports (view-transition-name: any) {
	.didntwork {
		display: none;
	}
}