.r-shape {
	display: block;
	height: 30ch;
	flex-shrink: 0;
}

.r-container {
	display: flex;
	justify-content: flex-end;
}

.r-container .r-shape {
	fill: rgba(255, 255, 255, 0.07);
}

.light .r-container .r-shape {
	fill: var(--purple-20);
}

.r-overlay {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: var(--bg);
	opacity: 1;
	z-index: 99999;
}

.r-overlay .r-row {
	display: flex;
	position: relative;
}

.r-overlay .r-row .r-shape {
	margin-bottom: 16px;
	opacity: 0;
	animation: rFadeInOut 1s;
}

.r-overlay .r-row .r-shape.r-last {
	animation: rFadeIn 1s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}

.r-overlay .r-row .r-shape:nth-child(odd) {
	fill: var(--text-color);
}

@keyframes rFadeInOut {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes rFadeIn {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}