src/styles/transitions.css
@import 'transition-style';

html:not([data-view-transition-direction="reload"]) {
	&[data-view-transition='page'] {
		&::view-transition-new(root) {
			animation: circle-in-hesitate 1s ease
				forwards;
		}

		&::view-transition-old(root) {
			animation: var(--animation-fade-out) forwards,
				var(--animation-scale-down) forwards;
		}
	}

	&[data-view-transition='element'] {
		view-transition-name: none;

		& h1:nth-child(1 of main h1) {
			view-transition-name: slide-title;
		}

		& h2:nth-child(1 of main h2) {
			view-transition-name: slide-subtitle;
		}

		& h2:nth-child(2 of main h2) {
			view-transition-name: slide-subtitle-two;
		}

		& pre:nth-child(1 of main pre) {
			view-transition-name: first-snippet;
		}

		& pre:nth-child(2 of main pre) {
			view-transition-name: second-snippet;
		}

		& p:nth-child(1 of main p) {
			view-transition-name: first-paragraph;
		}

		& p:nth-child(2 of main p) {
			view-transition-name: second-paragraph;
		}

		& a:nth-child(1 of main > a) {
			view-transition-name: first-link;
		}

		& a:nth-child(2 of main > a) {
			view-transition-name: second-link;
		}

		& main > picture {
			view-transition-name: slide-emoji;
		}

		& aside {
			view-transition-name: slide-aside;
		}
	}
}
