@keyframes sppHeroLine {
	0% {
		background-position: 0% 0%;
	}
	
	100% {
		background-position: 300% 0%;
	}
}

@keyframes sppHeroPulse {
	0%, 100% {
		opacity: 1;
	}
	
	50% {
		opacity: .4;
		transform: scale(.8);
	}
}

@keyframes sppHeroFloat {
	0%, 100% {
		transform: translateY(0px);
	}
	
	50% {
		transform: translateY(-12px);
	}
}

@keyframes sppHeroGlow {
	0%, 100% {
		opacity: .3;
		transform: scale(1);
	}
	
	50% {
		opacity: .6;
		transform: scale(1.12);
	}
}

@keyframes sppHeroSpin {
	from {
		transform: rotate(0deg);
	}
	
	to {
		transform: rotate(360deg);
	}
}

@keyframes sppHeroShimmer {
	0% {
		transform: translateX(-100%) skewX(-15deg);
	}
	
	100% {
		transform: translateX(400%) skewX(-15deg);
	}
}

.spp-fire-gif {
	display: inline-block;
	vertical-align: middle;
}

@keyframes sppNoticeShimmer {
	0% {
		transform: translateX(-100%) skewX(-14deg);
	}
	
	100% {
		transform: translateX(400%) skewX(-14deg);
	}
}

@keyframes sppNoticePulse {
	0%, 100% {
		opacity: .85;
		transform: scale(1);
	}
	
	50% {
		opacity: 1;
		transform: scale(1.04);
	}
}

@keyframes sppNoticeSlideIn {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}
	
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes sppBarShimmer {
	0% {
		transform: translateX(-100%) skewX(-12deg);
	}
	
	100% {
		transform: translateX(350%) skewX(-12deg);
	}
}

@keyframes sppBarPulse {
	0%, 100% {
		opacity: .8;
	}
	
	50% {
		opacity: 1;
	}
}

@keyframes sppNavGlow {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(220, 38, 38, .5), 0 4px 14px rgba(220, 38, 38, .35);
	}
	
	50% {
		box-shadow: 0 0 0 6px rgba(220, 38, 38, 0), 0 4px 20px rgba(220, 38, 38, .5);
	}
}

@keyframes sppNavRing {
	0% {
		transform: scale(1);
		opacity: .65;
	}
	
	100% {
		transform: scale(2.4);
		opacity: 0;
	}
}

@keyframes sppNavShimmer {
	0% {
		left: -60%;
	}
	
	100% {
		left: 130%;
	}
}

.spp-nav-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 18px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .2px;
	background: linear-gradient(120deg, #b91c1c 0%, #e63946 45%, #f4810a 100%);
	color: #fff !important;
	box-shadow: 0 2px 10px rgba(220, 38, 38, .28);
	transition: transform .18s, box-shadow .18s, opacity .18s, filter .18s;
	overflow: hidden;
	white-space: nowrap;
	border: none;
}

.spp-nav-btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.06);
	box-shadow: 0 5px 16px rgba(220, 38, 38, .4);
}

.spp-nav-txt {
	position: relative;
	z-index: 1;
}

.spp-nav-fire {
	position: relative;
	z-index: 1;
}

.spp-nav-inactive, .spp-nav-ended {
	box-shadow: 0 2px 8px rgba(220, 38, 38, .2);
}

.spp-nav-inactive:hover, .spp-nav-ended:hover {
	box-shadow: 0 5px 16px rgba(220, 38, 38, .38);
}

.spp-nav-inactive .spp-nav-live-ring, .spp-nav-ended .spp-nav-live-ring, .spp-nav-upcoming .spp-nav-live-ring {
	display: none;
}

@keyframes sppBall {
	0% {
		transform: translateX(-60px) rotate(-90deg);
		opacity: .4;
	}
	
	60% {
		transform: translateX(0) rotate(0deg);
		opacity: 1;
	}
	
	100% {
		transform: translateX(0) rotate(0deg);
		opacity: 1;
	}
}

@keyframes sppSix {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes sppSeq {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes sppProgFill {
	from {
		width: 0;
	}
	
	to {
		width: 100%;
	}
}

@keyframes sppFadeOut {
	to {
		opacity: 0;
		visibility: hidden;
	}
}