.sound-button {
	position: absolute;
	bottom: 20px;
	right: 20px;
	background-color: #000;
	border: none;
	cursor: pointer;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease; /* Smooth transition for growing/shrinking */
}

.sound-button .line {
	display: block;
	width: 3px;
	background-color: #fff; /* default color white */
	margin: 0 2px;
	border-radius: 2px;
	transform-origin: bottom;
}

/* State when video is muted - prominent button */
.sound-button.muted .line {
	animation: bounceMuted 1s infinite alternate;
	background-color: #f00; /* red color when muted */
}

/* State when video is not muted - subtle button */
.sound-button:not(.muted) .line {
	animation: bounceUnmuted 2s infinite alternate;
	height: 10px; /* Static height when not muted */
}

@keyframes bounceMuted {
	0%,
	100% {
		height: 10px;
	}
	50% {
		height: 20px;
	}
}

@keyframes bounceUnmuted {
	0%,
	100% {
		height: 15px;
	}
	50% {
		height: 10px;
	}
}