@layer transitions {
	.name {
		view-transition-name: site-name;
	}

	::view-transition-group(site-name) {
		animation-duration: var(--transition-slowest);
	}

	.section-title {
		view-transition-name: section-title;
	}

	::view-transition-group(section-title) {
		animation-duration: var(--transition-fastest);
	}

	.page-title {
		view-transition-name: page-title;
	}

	::view-transition-group(page-title) {
		animation-duration: var(--transition-time);
	}

	.page-description {
		view-transition-name: page-description;
	}

	::view-transition-group(page-description) {
		animation-duration: var(--transition-fast);
	}

	.contact-links {
		view-transition-name: contact-links;
	}

	::view-transition-old(contact-links) {
		animation: slide-out-down var(--transition-slow) ease-in-out forwards;
	}

	::view-transition-new(contact-links) {
		animation: slide-in-up var(--transition-slow) ease-in-out var(--transition-slow) both;
	}

	@keyframes slide-out-down {
		100% {
			opacity: 0;
			translate: 0 100%;
		}
	}

	@keyframes slide-in-up {
		0% {
			opacity: 0;
			translate: 0 100%;
		}

		100% {
			opacity: 1;
			translate: 0 0;
		}
	}

	.form-name {
		& label {
			view-transition-name: form-name-label;
		}

		& .form-field {
			view-transition-name: form-name-field;
		}
	}

	.form-email {
		& label {
			view-transition-name: form-email-label;
		}

		& .form-field {
			view-transition-name: form-email-field;
		}
	}

	.form-details {
		& label {
			view-transition-name: form-details-label;
		}

		& .form-field {
			view-transition-name: form-details-field;
		}
	}

	::view-transition-old(form-name-label),
	::view-transition-old(form-email-label),
	::view-transition-old(form-details-label) {
		animation: form-label-out var(--transition-time) ease-in-out forwards;
	}

	::view-transition-new(form-name-label),
	::view-transition-new(form-email-label),
	::view-transition-new(form-details-label) {
		animation: form-label-in var(--transition-slow) ease-in-out var(--transition-slow) both;
	}

	::view-transition-old(form-name-field),
	::view-transition-old(form-email-field),
	::view-transition-old(form-details-field) {
		animation: form-shrink var(--transition-slow) ease-in-out forwards;
	}

	::view-transition-new(form-name-field),
	::view-transition-new(form-email-field),
	::view-transition-new(form-details-field) {
		animation: form-grow var(--transition-slow) ease-in-out var(--transition-slow) both;
		transform-origin: center left;
	}

	@keyframes form-label-out {
		100% {
			translate: 0 100%;
			opacity: 0;
		}
	}

	@keyframes form-label-in {
		0% {
			translate: -10% 0;
			opacity: 0;
		}

		100% {
			translate: 0 0;
			opacity: 1;
		}
	}

	@keyframes form-shrink {
		100% {
			translate: 0 100%;
			opacity: 0;
		}
	}

	@keyframes form-grow {
		0% {
			opacity: 0;
			scale: 0 1;
		}

		100% {
			opacity: 1;
			scale: 1 1;
		}
	}

	.form .button-container {
		view-transition-name: form-button;
	}

	::view-transition-old(form-button) {
		animation: form-button-out var(--transition-slow) ease-in-out forwards;
	}

	::view-transition-new(form-button) {
		animation: form-button-in var(--transition-slow) ease-in-out var(--transition-slow) both;
	}

	@keyframes form-button-out {
		100% {
			opacity: 0;
			translate: 0 100%;
		}
	}

	@keyframes form-button-in {
		0% {
			opacity: 0;
			translate: -10% 0;
		}

		100% {
			opacity: 1;
			translate: 0 0;
		}
	}

	.stagger-slide-in {
		&:has(.project-card:hover) .project-card:not(:hover) {
			--stagger-opacity: .3;
			--project-image-scale: .9;
			--project-icon-opacity: 0;
			--project-icon-translate: 10px 10px;
		}

		&.stagger {
			--stagger-opacity: 1;
			--stagger-translate: 0;
		}

		& > * {
			opacity: var(--stagger-opacity, 0);
			translate: 0 var(--stagger-translate, 50%);
			transition: opacity var(--transition-time) ease-in-out var(--stagger-delay), translate var(--transition-time) ease-in-out var(--stagger-delay);
		}
	}

	::view-transition-new(project-title-details) {
		animation: project-title-in var(--transition-slow) ease-in-out var(--transition-slow) both;
	}

	@keyframes project-title-in {
		0% {
			opacity: 0;
			translate: 0 50%;
		}
		100% {
			opacity: 1;
			translate: 0 0;
		}
	}

	::view-transition-group(project-image-details) {
		animation-delay: var(--transition-slow);
	}

	::view-transition-new(project-image-details) {
		block-size: 100%;
	}

	.project-card:not([aria-expanded='true']) {
		&[data-card-index='0'] {
			view-transition-name: project-card-0;
		}

		&[data-card-index='1'] {
			view-transition-name: project-card-1;
		}

		&[data-card-index='2'] {
			view-transition-name: project-card-2;
		}

		&[data-card-index='3'] {
			view-transition-name: project-card-3;
		}

		&[data-card-index='4'] {
			view-transition-name: project-card-4;
		}
	}

	::view-transition-old(project-card-0),
	::view-transition-old(project-card-1),
	::view-transition-old(project-card-2),
	::view-transition-old(project-card-3),
	::view-transition-old(project-card-4) {
		animation: project-card-out var(--transition-slow) ease-in-out forwards;
	}

	@keyframes project-card-out {
		100% {
			opacity: 0;
			translate: 0 100%;
		}
	}

	::view-transition-group(project-badge) {
		animation-delay: var(--transition-slow);
	}

	::view-transition-old(project-badge) {
		animation: project-badge-out var(--transition-slow) ease-in-out both;
		transform-origin: center left;
	}

	::view-transition-new(project-badge) {
		animation: project-badge-in var(--transition-slow) ease-in-out var(--transition-slow) both;
		transform-origin: center left;
	}

	@keyframes project-badge-out {
		100% {
			opacity: 0;
			scale: 0 1;
		}
	}

	@keyframes project-badge-in {
		0% {
			opacity: 0;
			scale: 0 1;
		}
		100% {
			opacity: 1;
			scale: 1 1;
		}
	}

	::view-transition-new(project-information) {
		animation: project-information var(--transition-slow) ease-in-out var(--transition-slow) both;
	}

	@keyframes project-information {
		0% {
			opacity: 0;
			translate: -10% 0;
		}

		100% {
			opacity: 1;
			translate: 0 0;
		}
	}
}