.wapuugotchi_onboarding__focus_overlay {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: 100vw;
	background-color: #000;
	opacity: 0.8;
	overflow: auto;
	pointer-events: all;
	transition: all 0.5s;
	animation: wapuugotchi-onboading__appear-animation 0.2s ease-out;
	animation-fill-mode: forwards;

	clip-path: polygon(
		0 0,
		0 100%,
		0 100%,
		0 0,
		0 0,
		0 0,
		0 0,
		0 100%,
		100% 100%,
		100% 0
	);
}

.wapuugotchi_onboarding__focus {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 100%;
	background-color: unset;
	opacity: 1;
	overflow: auto;
	pointer-events: all;
	transition: all 0.5s;
	animation: wapuugotchi-onboading__appear-animation 0.2s ease-out;
	animation-fill-mode: forwards;

	clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
}

@keyframes wapuugotchi-onboading__appear-animation {

	0% {
		box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0);
	}

	to {
		box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.7);
	}
}