@property --plvt-rg-view-transition-animation-wipe-angle {
	syntax: "<angle>";
	initial-value: 270deg;
	inherits: false;
}

@property --plvt-rg-view-transition-animation-wipe-progress {
	syntax: "<number>";
	initial-value: 0;
	inherits: false;
}

@keyframes plvt-rg-view-transition-animation-wipe-new {
	from {
		--plvt-rg-view-transition-animation-wipe-progress: 0;
	}
	to {
		--plvt-rg-view-transition-animation-wipe-progress: 1;
	}
}

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

::view-transition-old(root) {
	opacity: 1;
	transform: none;
	animation: none 1.2s cubic-bezier(0.45, 0, 0.35, 1.0);
	animation-fill-mode: both;
	animation-delay: 0s;
}

::view-transition-new(root) {
	opacity: 1;
	transform: none;
	animation: plvt-rg-view-transition-animation-wipe-new 1.2s cubic-bezier(0.45, 0, 0.35, 1.0);
	animation-fill-mode: both;
	-webkit-mask-image: linear-gradient(var(--plvt-rg-view-transition-animation-wipe-angle), #000 calc(-70% + calc(170% * var(--plvt-rg-view-transition-animation-wipe-progress, 0))), transparent calc(170% * var(--plvt-rg-view-transition-animation-wipe-progress, 0)));
	mask-image: linear-gradient(var(--plvt-rg-view-transition-animation-wipe-angle), #000 calc(-70% + calc(170% * var(--plvt-rg-view-transition-animation-wipe-progress, 0))), transparent calc(170% * var(--plvt-rg-view-transition-animation-wipe-progress, 0)));
}