/* fixed-size wrapper clips the ribbon so it never spills outside the corner triangle */
.env-badge {
	position: fixed;
	top: 0;
	right: 0;
	width: 170px;
	height: 170px;
	overflow: hidden;
	z-index: 10050;
	transition: opacity 0.3s ease;
}

.env-badge__ribbon {
	position: absolute;
	top: 34px;
	right: -46px;
	width: 230px;
	transform: rotate(45deg);
	transform-origin: center;
	box-shadow:
		0 3px 8px rgba(0, 0, 0, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.25);
	animation: env-badge-drop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.env-badge:hover {
	opacity: 0.2 !important;
}

.env-badge--dev .env-badge__ribbon {
	background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
}

.env-badge--beta .env-badge__ribbon {
	background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%);
}

/* track holds two copies of the label back-to-back, scrolled as one unit for a seamless loop */
.env-badge__track {
	display: flex;
	width: max-content;
	padding: 6px 0;
	animation: env-badge-scroll 7s linear infinite;
}

.env-badge__track span {
	flex: 0 0 auto;
	font-family: "Roboto", "Nunito", sans-serif;
	font-size: 24px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.14em;
	color: #fff;
	text-transform: uppercase;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
	white-space: nowrap;
}

/* bullet separator between repeats of the label */
.env-badge__track span::after {
	content: "\2022";
	margin: 0 10px;
	opacity: 0.6;
}

@keyframes env-badge-scroll {
	from {
		transform: translateX(0);
	}
	to {
		/* shift by exactly one copy's width (50% of the doubled track) for a seamless loop */
		transform: translateX(-50%);
	}
}

@keyframes env-badge-drop {
	from {
		opacity: 0;
		top: 26px;
		right: -54px;
	}
	to {
		opacity: 1;
		top: 34px;
		right: -46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.env-badge__track {
		animation: none;
	}
}