/* @minify */

@media (prefers-reduced-motion) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

@view-transition {
	navigation: auto;
}

::view-transition-old(*),
::view-transition-new(*) {
	mix-blend-mode: normal;
	backface-visibility: hidden;
}

@property --fantasma--view-transition--progress {
	syntax: '<number>';
	initial-value: 0;
	inherits: false;
}

@keyframes fantasma-view-transition {
	0% {
		--fantasma--view-transition--progress: 0;

		opacity: 1;
		transform: none;
	}

	100% {
		--fantasma--view-transition--progress: 1;

		opacity: 1;
		transform: none;
	}
}

::view-transition-old(root) {
	animation: fantasma-view-transition 0.6s cubic-bezier(0.35, 0, 0.4, 1);
	animation-delay: 0s;
	animation-fill-mode: both;
}

::view-transition-new(root) {
	animation: fantasma-view-transition 0.6s cubic-bezier(0.35, 0, 0.4, 1);
	animation-fill-mode: both;
	mask-image: linear-gradient(
		270deg,
		#000 calc(-70% + calc(170% * var(--fantasma--view-transition--progress))),
		transparent calc(170% * var(--fantasma--view-transition--progress))
	);
}