/**
 * audio-player.css
 * -----------------------------------------------------------------------
 * Estilo DIRETO (CSS puro) da barra de áudio fixa no rodapé. O elemento
 * <audio> nativo não é exibido — os controles (play/pause, progresso,
 * mudo) são feitos à mão pra manter a linguagem visual minimalista do
 * tema, em vez da UI padrão (e inconsistente entre navegadores) do
 * player nativo.
 * ----------------------------------------------------------------------- */

.audio-bar {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	transform: translateX(-50%);
	z-index: 60;
	width: min(300px, calc(100vw - 2rem));
	border-radius: 999px;
	background-color: rgba(255, 254, 250, 0.82);
	color: var(--dc-color-ink);
	box-shadow: 0 16px 40px rgba(32, 26, 21, 0.1);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.audio-bar audio {
	display: none;
}

.audio-bar__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.6rem 1.5rem 0.6rem 0.6rem;
}

.audio-bar__toggle,
.audio-bar__mute {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: inherit;
}

.audio-bar__toggle {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	background-color: var(--dc-color-primary);
	color: var(--dc-color-cream);
	transition: background-color 0.3s ease;
}

.audio-bar__toggle:hover {
	background-color: var(--dc-color-primary-dark);
}

.audio-bar__mute {
	width: 2rem;
	height: 2rem;
	opacity: 0.75;
	transition: opacity 0.3s ease;
}

.audio-bar__mute:hover {
	opacity: 1;
}

.audio-bar__icon {
	width: 1.05rem;
	height: 1.05rem;
}

.audio-bar__icon--pause,
.audio-bar__icon--muted {
	display: none;
}

.audio-bar.is-playing .audio-bar__icon--play {
	display: none;
}

.audio-bar.is-playing .audio-bar__icon--pause {
	display: block;
}

.audio-bar.is-muted .audio-bar__icon--sound {
	display: none;
}

.audio-bar.is-muted .audio-bar__icon--muted {
	display: block;
}

.audio-bar__info {
	flex: 1 1 auto;
	min-width: 0;
}

.audio-bar__title {
	position: relative;
	font-family: var(--dc-font-body);
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.2;
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0 0 0.4rem;
}

.audio-bar__title-track {
	display: inline-block;
}

/* Quando o texto não cabe, em vez de truncar com "...", ele desliza pro
 * lado até revelar o final, pausa, e volta — igual ao Spotify. Só ativa
 * se o JS detectar overflow de verdade (ver assets/js/audio-player.js);
 * sem JS/overflow, o text-overflow: ellipsis acima já resolve sozinho. */
.audio-bar.has-marquee .audio-bar__title {
	text-overflow: clip;
}

.audio-bar.has-marquee .audio-bar__title-track {
	animation: audio-bar-marquee var(--marquee-duration, 8s) ease-in-out infinite;
}

@keyframes audio-bar-marquee {
	0%, 12% {
		transform: translateX(0);
	}
	45%, 55% {
		transform: translateX(var(--marquee-distance, 0));
	}
	88%, 100% {
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.audio-bar.has-marquee .audio-bar__title-track {
		animation: none;
	}
}

.audio-bar__progress {
	position: relative;
	height: 3px;
	border-radius: 999px;
	background-color: rgba(58, 51, 44, 0.15);
	cursor: pointer;
}

.audio-bar__progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	border-radius: 999px;
	background-color: var(--dc-color-primary);
}

/* O espaço reservado embaixo do body pra essa barra não tapar o rodapé
 * está centralizado em assets/css/footer.css (body { padding-bottom }). */

@media (prefers-reduced-motion: reduce) {
	.audio-bar__progress-fill {
		transition: none;
	}
}