/* 波浪动态音乐图标样式 */
.nav-Bgm {
	height: 34px;
	color: #ffffff;
	font-size: 13px;
	width: 6vh;
	position: relative;
	padding: 0.3vh 2vh;
	transition: color 0.3s;
	border-left: 1px solid rgba(230, 200, 145, 0.15);
	border-right: 1px solid rgba(230, 200, 145, 0.15);
	align-items: center;
	display: flex;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
}

	.nav-Bgm path {
		transition: stroke .3s;
		stroke: #d1bba4;
		opacity: 1;
	}

/* 波浪动画 - 从里到外 */
.wave-bar {
	stroke: #d1bba4;
	stroke-width: 3;
	transform-origin: center;
}

	/* 从里到外的波浪动画 */
	.wave-bar:nth-child(1) {
		animation: waveOut 1.5s ease-in-out infinite;
		animation-delay: 0s;
	}

	.wave-bar:nth-child(2) {
		animation: waveOut 1.5s ease-in-out infinite;
		animation-delay: 0.1s;
	}

	.wave-bar:nth-child(3) {
		animation: waveOut 1.5s ease-in-out infinite;
		animation-delay: 0.2s;
	}

	.wave-bar:nth-child(4) {
		animation: waveOut 1.5s ease-in-out infinite;
		animation-delay: 0.3s;
	}

	.wave-bar:nth-child(5) {
		animation: waveOut 1.5s ease-in-out infinite;
		animation-delay: 0.4s;
	}

	.wave-bar:nth-child(6) {
		animation: waveOut 1.5s ease-in-out infinite;
		animation-delay: 0.5s;
	}

@keyframes waveOut {
	0%, 100% {
		transform: scaleY(0.3);
		opacity: 0.5;
	}

	50% {
		transform: scaleY(1);
		opacity: 1;
	}
}

/* 另一种波浪效果 - 从外到里 */
.wave-bar-reverse {
	stroke: #d1bba4;
	stroke-width: 3;
	transform-origin: center;
}

	.wave-bar-reverse:nth-child(1) {
		animation: waveIn 1.5s ease-in-out infinite;
		animation-delay: 0.5s;
	}

	.wave-bar-reverse:nth-child(2) {
		animation: waveIn 1.5s ease-in-out infinite;
		animation-delay: 0.4s;
	}

	.wave-bar-reverse:nth-child(3) {
		animation: waveIn 1.5s ease-in-out infinite;
		animation-delay: 0.3s;
	}

	.wave-bar-reverse:nth-child(4) {
		animation: waveIn 1.5s ease-in-out infinite;
		animation-delay: 0.2s;
	}

	.wave-bar-reverse:nth-child(5) {
		animation: waveIn 1.5s ease-in-out infinite;
		animation-delay: 0.1s;
	}

	.wave-bar-reverse:nth-child(6) {
		animation: waveIn 1.5s ease-in-out infinite;
		animation-delay: 0s;
	}

@keyframes waveIn {
	0%, 100% {
		transform: scaleY(0.3);
		opacity: 0.5;
	}

	50% {
		transform: scaleY(1);
		opacity: 1;
	}
}

/* 第三种效果 - 交替波浪 */
.wave-bar-alternate {
	stroke: #d1bba4;
	stroke-width: 3;
	transform-origin: center;
}

	.wave-bar-alternate:nth-child(odd) {
		animation: waveAlternate 1.2s ease-in-out infinite;
		animation-delay: 0s;
	}

	.wave-bar-alternate:nth-child(even) {
		animation: waveAlternate 1.2s ease-in-out infinite;
		animation-delay: 0.6s;
	}

@keyframes waveAlternate {
	0%, 100% {
		transform: scaleY(0.3);
		opacity: 0.5;
	}

	50% {
		transform: scaleY(1);
		opacity: 1;
	}
}

/* 第四种效果 - 随机波浪 */
.wave-bar-random {
	stroke: #d1bba4;
	stroke-width: 3;
	transform-origin: center;
}

	.wave-bar-random:nth-child(1) {
		animation: waveRandom 1.4s ease-in-out infinite;
		animation-delay: 0s;
	}

	.wave-bar-random:nth-child(2) {
		animation: waveRandom 1.8s ease-in-out infinite;
		animation-delay: 0.2s;
	}

	.wave-bar-random:nth-child(3) {
		animation: waveRandom 1.6s ease-in-out infinite;
		animation-delay: 0.1s;
	}

	.wave-bar-random:nth-child(4) {
		animation: waveRandom 1.5s ease-in-out infinite;
		animation-delay: 0.4s;
	}

	.wave-bar-random:nth-child(5) {
		animation: waveRandom 1.7s ease-in-out infinite;
		animation-delay: 0.3s;
	}

	.wave-bar-random:nth-child(6) {
		animation: waveRandom 1.9s ease-in-out infinite;
		animation-delay: 0.5s;
	}

@keyframes waveRandom {
	0%, 100% {
		transform: scaleY(0.2);
		opacity: 0.4;
	}

	50% {
		transform: scaleY(1);
		opacity: 1;
	}
}

/* 暂停状态 - 停止动画 */
.nav-Bgm.paused .wave-bar-random {
	animation: none;
	transform: scaleY(1);
	opacity: 0.6;
}

.status-indicator {
	margin-top: 15px;
	font-size: 0.9rem;
	color: rgba(209, 187, 164, 0.8);
}