@property --view-transition-duration {
	syntax: "<time>";
	inherits: true;
	initial-value: 0.4s;
}

@keyframes enable-vt {
	0%,
	100% {
		--enable-view-transitions: none;
	}
	0.1%,
	99.9% {
		--enable-view-transitions: var(--view-transition-name, default-view-transition);
	}
}

@view-transition {
	navigation: auto;
}

::view-transition-group(*) {
	animation-duration: calc(var(--view-transition-duration) * var(--enable-animation, 1));
}

[data-view-transition] {
	view-timeline-name: --enable-vt;
	view-timeline-axis: block;
	animation: linear enable-vt both;
	animation-timeline: --enable-vt;
	animation-range: cover;

	view-transition-name: var(--view-transition-name, default-view-transition);
	@supports (animation-timeline: --enable-vt) {
		view-transition-name: var(--enable-view-transitions);
	}
}