/**
 * Floating Audio Widget — stili frontend.
 * Tutte le regole sono namespaced sotto .faw-widget per non
 * interferire con gli stili del tema.
 */

.faw-widget,
.faw-widget *,
.faw-widget *::before,
.faw-widget *::after {
	box-sizing: border-box;
}

.faw-widget {
	--faw-accent: #BE1823;
	--faw-bg: rgba(18, 18, 18, 0.92);
	--faw-fg: #ffffff;
	--faw-bar: rgba(255, 255, 255, 0.35);

	position: fixed;
	left: 30px;
	bottom: 30px;
	z-index: 999999;

	display: flex;
	align-items: center;
	gap: 14px;

	padding: 8px 22px 8px 8px;
	background: var(--faw-bg);
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1;
}

/* Pulsante play/pausa */

.faw-play-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;

	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	border-radius: 50%;
	appearance: none;
	-webkit-appearance: none;
	background: var(--faw-accent);
	color: var(--faw-fg);
	cursor: pointer;

	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.faw-play-btn:hover {
	transform: scale(1.06);
}

.faw-play-btn:active {
	transform: scale(0.96);
}

.faw-play-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
	box-shadow: 0 0 0 4px var(--faw-accent);
}

/* Autoplay bloccato dal browser: l'audio suona già ma è muto, in
 * attesa della prima interazione dell'utente sulla pagina. Un anello
 * che si espande intorno al pulsante invita a toccare per attivare
 * il suono (usa var(--faw-accent), qualunque colore sia impostato). */

.faw-widget.is-muted .faw-play-btn {
	position: relative;
}

.faw-widget.is-muted .faw-play-btn::after {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid var(--faw-accent);
	animation: faw-mute-ring 1.6s ease-out infinite;
	pointer-events: none;
}

@keyframes faw-mute-ring {
	0%   { transform: scale(0.85); opacity: 0.9; }
	100% { transform: scale(1.45); opacity: 0; }
}

.faw-icon {
	width: 20px;
	height: 20px;
}

.faw-icon-pause,
.faw-icon-loading {
	display: none;
}

.faw-widget.is-playing .faw-icon-play {
	display: none;
}

.faw-widget.is-playing .faw-icon-pause {
	display: block;
}

/* Stato di caricamento: piccolo spinner al posto delle icone play/pausa */

.faw-widget.is-loading .faw-icon-play,
.faw-widget.is-loading .faw-icon-pause {
	display: none;
}

.faw-widget.is-loading .faw-icon-loading {
	display: block;
}

.faw-icon-loading {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	animation: faw-spin 0.8s linear infinite;
}

@keyframes faw-spin {
	to { transform: rotate(360deg); }
}

/*
 * Spettro audio: forma d'onda "waveform" (fake, puramente decorativo),
 * barre sottili che crescono simmetricamente dal centro (come una
 * traccia audio reale), non un semplice equalizzatore a barre.
 */

.faw-spectrum {
	display: flex;
	align-items: center;
	gap: 2px;
	height: 26px;
}

.faw-spectrum span {
	display: block;
	width: 2px;
	height: 6px;
	border-radius: 1px;
	background: var(--faw-bar);
	transform-origin: center;
	transform: scaleY(1);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

/* In caricamento: tutte le barre "respirano" insieme, ancora neutre */

.faw-widget.is-loading .faw-spectrum span {
	animation: faw-pulse 1s ease-in-out infinite;
}

/* In riproduzione: le barre si colorano con l'accent color e ondeggiano
 * ciascuna con un'ampiezza e un ritardo diversi, per un effetto organico. */

.faw-widget.is-playing .faw-spectrum span {
	background: var(--faw-accent);
	animation-name: faw-wave;
	animation-duration: 0.9s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.faw-spectrum span:nth-child(1)  { --faw-peak: 2.2; animation-delay: -0.90s; }
.faw-spectrum span:nth-child(2)  { --faw-peak: 3.4; animation-delay: -0.75s; }
.faw-spectrum span:nth-child(3)  { --faw-peak: 1.8; animation-delay: -1.35s; }
.faw-spectrum span:nth-child(4)  { --faw-peak: 4.2; animation-delay: -0.15s; }
.faw-spectrum span:nth-child(5)  { --faw-peak: 3.0; animation-delay: -0.60s; }
.faw-spectrum span:nth-child(6)  { --faw-peak: 2.6; animation-delay: -1.05s; }
.faw-spectrum span:nth-child(7)  { --faw-peak: 4.4; animation-delay: -0.30s; }
.faw-spectrum span:nth-child(8)  { --faw-peak: 1.6; animation-delay: -0.90s; }
.faw-spectrum span:nth-child(9)  { --faw-peak: 3.8; animation-delay: -0.45s; }
.faw-spectrum span:nth-child(10) { --faw-peak: 2.4; animation-delay: -1.20s; }
.faw-spectrum span:nth-child(11) { --faw-peak: 4.0; animation-delay: -0.75s; }
.faw-spectrum span:nth-child(12) { --faw-peak: 1.8; animation-delay: -0.15s; }
.faw-spectrum span:nth-child(13) { --faw-peak: 3.2; animation-delay: -0.60s; }
.faw-spectrum span:nth-child(14) { --faw-peak: 4.4; animation-delay: -1.05s; }
.faw-spectrum span:nth-child(15) { --faw-peak: 2.0; animation-delay: -0.30s; }
.faw-spectrum span:nth-child(16) { --faw-peak: 3.6; animation-delay: -0.90s; }
.faw-spectrum span:nth-child(17) { --faw-peak: 2.8; animation-delay: -0.45s; }
.faw-spectrum span:nth-child(18) { --faw-peak: 1.6; animation-delay: -1.20s; }

@keyframes faw-wave {
	0%, 100% { transform: scaleY(1); }
	50% { transform: scaleY(var(--faw-peak, 3)); }
}

@keyframes faw-pulse {
	0%, 100% { transform: scaleY(1); }
	50% { transform: scaleY(1.8); }
}

/* Stato di errore (es. file non raggiungibile) */

.faw-widget.faw-error {
	opacity: 0.5;
	pointer-events: none;
}

/* Responsive: stesso concetto, margini leggermente ridotti su mobile */

@media (max-width: 480px) {
	.faw-widget {
		left: 20px;
		bottom: 20px;
		padding: 6px 18px 6px 6px;
		gap: 10px;
	}

	.faw-play-btn {
		width: 26px;
		height: 26px;
	}
}

/* Rispetta le preferenze di riduzione del movimento */

@media (prefers-reduced-motion: reduce) {
	.faw-widget.is-playing .faw-spectrum span,
	.faw-widget.is-loading .faw-spectrum span {
		animation: none;
		transform: scaleY(1.8);
	}

	.faw-icon-loading {
		animation: none;
	}

	.faw-widget.is-muted .faw-play-btn::after {
		animation: none;
		transform: scale(1.1);
		opacity: 0.9;
	}

	.faw-play-btn,
	.faw-spectrum span {
		transition: none;
	}
}