/*
 * "List your Rust server" sidebar card: the store's red, type and buttons,
 * with a light sweeping round its edge, a pulsing live dot, signal rings
 * round the icon and a moving equaliser, so it is noticed next to the ads.
 * It stops for visitors who ask for less motion when the store's calm
 * effects setting is on, like the theme's own effects.
 */

.bgrs-promo {
	position: relative;
	margin: 0 0 24px;
	padding: 2px;
	overflow: hidden;
	background: #2a1410;
	font-family: var(--brs-font, "Roboto Condensed", sans-serif);
	isolation: isolate;
}

/* The light running round the edge. */
.bgrs-promo__glow {
	position: absolute;
	inset: -60%;
	z-index: -1;
	background: conic-gradient(from 0deg, transparent 0 62%, rgba(205, 64, 43, .25) 70%, #ff6a4d 80%, #ffd1c4 84%, #ff6a4d 88%, rgba(205, 64, 43, .25) 94%, transparent 100%);
	animation: bgrs-promo-spin 4.5s linear infinite;
}

.bgrs-promo__in {
	position: relative;
	padding: 22px 20px 20px;
	background:
		radial-gradient(120% 70% at 50% 0%, rgba(205, 64, 43, .28), transparent 65%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px),
		#161514;
	text-align: center;
}

.bgrs-promo__live {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin: 0 0 14px !important;
	padding: 4px 10px;
	background: rgba(205, 64, 43, .16);
	color: #ff8a73;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.bgrs-promo__live i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ff5a3c;
	box-shadow: 0 0 0 0 rgba(255, 90, 60, .7);
	animation: bgrs-promo-ping 1.6s ease-out infinite;
}

.bgrs-promo__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 40%, #e2553b, #9e2c1b);
	box-shadow: 0 8px 26px rgba(205, 64, 43, .45), inset 0 -4px 10px rgba(0, 0, 0, .35);
	color: #2a0f0a;
	animation: bgrs-promo-bob 3s ease-in-out infinite;
}

.bgrs-promo__icon .ri { font-size: 38px; color: #fff3ee; }

.bgrs-promo__ring {
	position: absolute;
	inset: 0;
	border: 2px solid rgba(255, 106, 77, .7);
	border-radius: 50%;
	animation: bgrs-promo-ring 2.4s ease-out infinite;
}

.bgrs-promo__ring.is-2 { animation-delay: 1.2s; }

.bgrs-promo__title {
	margin: 0 0 8px !important;
	color: #f4eee6 !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	letter-spacing: .02em !important;
	text-transform: uppercase;
	text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}

.bgrs-promo__text {
	margin: 0 0 14px !important;
	color: #c3bcb4;
	font-size: 14px;
	line-height: 1.5;
}

.bgrs-promo__eq {
	display: flex;
	gap: 3px;
	align-items: flex-end;
	justify-content: center;
	height: 26px;
	margin: 0 0 10px;
}

.bgrs-promo__eq i {
	width: 5px;
	height: 30%;
	background: linear-gradient(0deg, #5a6e37, #a7c46a);
	animation: bgrs-promo-eq 1.1s ease-in-out infinite alternate;
}

.bgrs-promo__eq i:nth-child(2n) { animation-duration: .9s; animation-delay: -.3s; }
.bgrs-promo__eq i:nth-child(3n) { animation-duration: 1.3s; animation-delay: -.6s; }
.bgrs-promo__eq i:nth-child(4n) { animation-duration: .7s; animation-delay: -.2s; }
.bgrs-promo__eq i:nth-child(5n) { animation-duration: 1.5s; animation-delay: -.9s; }

.bgrs-promo__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	justify-content: center;
	margin: 0 0 16px !important;
	color: #a9a29a;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.bgrs-promo__stats b { color: #f4eee6; font-size: 15px; }

.bgrs-promo .bgrs-promo__go {
	position: relative;
	width: 100%;
	height: 50px;
	overflow: hidden;
	gap: 10px;
	font-size: 15px;
}

/* A shine crossing the button now and then. */
.bgrs-promo .bgrs-promo__go::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
	transform: skewX(-20deg);
	animation: bgrs-promo-shine 3.2s ease-in-out infinite;
}

.bgrs-promo .bgrs-promo__go .ri { font-size: 22px; color: #dfe7cc; }

.bgrs-promo__browse {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	margin-top: 12px;
	color: #c9c3bc !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.bgrs-promo__browse .ri { font-size: 16px; transition: transform .2s ease; }
.bgrs-promo__browse:hover { color: #fff !important; }
.bgrs-promo__browse:hover .ri { transform: translateX(3px); }

@keyframes bgrs-promo-spin { to { transform: rotate(360deg); } }
@keyframes bgrs-promo-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 60, .7); } 100% { box-shadow: 0 0 0 9px rgba(255, 90, 60, 0); } }
@keyframes bgrs-promo-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.65); opacity: 0; } }
@keyframes bgrs-promo-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes bgrs-promo-eq { 0% { height: 18%; } 100% { height: 100%; } }
@keyframes bgrs-promo-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }

/* Still only when the store's "calm effects" setting is on (Customize > Rust store), like the theme's own effects. */
@media (prefers-reduced-motion: reduce) {
	.brs-tv-calm .bgrs-promo__glow, .brs-tv-calm .bgrs-promo__live i, .brs-tv-calm .bgrs-promo__icon, .brs-tv-calm .bgrs-promo__ring, .brs-tv-calm .bgrs-promo__eq i, .brs-tv-calm .bgrs-promo .bgrs-promo__go::after { animation: none; }
	.brs-tv-calm .bgrs-promo__ring { display: none; }
	.brs-tv-calm .bgrs-promo__eq i { height: 60%; }
}