/* Playlist transition feedback for the persistent Wavyl player. */
#wavyl-playlist-loading-indicator {
	position: fixed;
	right: 18px;
	bottom: 92px;
	z-index: 99998;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-width: 48px;
	height: 28px;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(13, 16, 22, 0.88);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity 160ms ease, transform 160ms ease;
}

#wavyl-playlist-loading-indicator .wavyl-playlist-loading__bar {
	display: block;
	width: 4px;
	height: 13px;
	border-radius: 999px;
	background: #f15bb5;
	animation: wavyl-playlist-loading-bars 720ms ease-in-out infinite;
}

#wavyl-playlist-loading-indicator .wavyl-playlist-loading__bar:nth-child(2) {
	background: #00d9ff;
	animation-delay: 110ms;
}

#wavyl-playlist-loading-indicator .wavyl-playlist-loading__bar:nth-child(3) {
	background: #ffd166;
	animation-delay: 220ms;
}

body.wavyl-playlist-loading #wavyl-playlist-loading-indicator {
	opacity: 1;
	transform: translateY(0);
}

#plyr-playlist.wavyl-playlist-loading {
	overflow: visible;
}

#plyr-playlist.wavyl-playlist-loading::before {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	height: 2px;
	z-index: 6;
	background: linear-gradient(90deg, transparent, #f15bb5, #00d9ff, #ffd166, transparent);
	background-size: 220% 100%;
	animation: wavyl-playlist-loading-sweep 980ms linear infinite;
}

#plyr-playlist.wavyl-playlist-loading .plyr__poster,
#plyr-playlist.wavyl-playlist-loading .wavyl-poster-halo {
	position: relative;
}

#plyr-playlist.wavyl-playlist-loading .plyr__poster::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.22) 45%, transparent 78%);
	background-size: 240% 100%;
	animation: wavyl-playlist-loading-sheen 920ms linear infinite;
	pointer-events: none;
}

body.wavyl-game-player-page {
	padding-bottom: max(88px, env(safe-area-inset-bottom));
}

body.wavyl-game-player-page #plyr-playlist.fixed-bottom:not(.is-expanded) {
	backdrop-filter: blur(18px);
}

@keyframes wavyl-playlist-loading-bars {
	0%,
	100% {
		transform: scaleY(0.45);
		opacity: 0.58;
	}
	48% {
		transform: scaleY(1);
		opacity: 1;
	}
}

@keyframes wavyl-playlist-loading-sweep {
	from {
		background-position: 120% 0;
	}
	to {
		background-position: -120% 0;
	}
}

@keyframes wavyl-playlist-loading-sheen {
	from {
		background-position: 120% 0;
	}
	to {
		background-position: -120% 0;
	}
}

@media (max-width: 782px) {
	#wavyl-playlist-loading-indicator {
		right: 12px;
		bottom: 74px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#wavyl-playlist-loading-indicator .wavyl-playlist-loading__bar,
	#plyr-playlist.wavyl-playlist-loading::before,
	#plyr-playlist.wavyl-playlist-loading .plyr__poster::after {
		animation-duration: 1ms;
		animation-iteration-count: 1;
	}
}