/* Infogiant FM — global player. Fixed shell; the waveform equaliser is the
   signature motif of the brand. */

.player {
	position: fixed; inset-inline: 0; bottom: 0; z-index: 80;
	height: var(--player-h);
	background: var(--ink); color: var(--white);
	border-top: 3px solid var(--red);
	box-shadow: 0 -8px 30px rgba(0,0,0,.35);
}
.player__inner {
	max-width: var(--maxw); margin-inline: auto; height: 100%;
	display: flex; align-items: center; gap: 1rem;
	padding-inline: clamp(.75rem, 3vw, 1.5rem);
}

.player__art { position: relative; width: 56px; height: 56px; flex: 0 0 auto; border-radius: 10px; overflow: hidden; background: var(--surface-dark); display: grid; place-items: center; }
.player__art-img { width: 100%; height: 100%; object-fit: cover; }

/* Waveform equaliser — the brand's signature element. */
.player__eq { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3px; background: rgba(11,11,12,.35); }
.player__eq i { width: 4px; height: 10px; background: var(--red); border-radius: 2px; transform-origin: bottom; }
.player[data-playing] .player__eq i { animation: eq 900ms ease-in-out infinite; }
.player[data-playing] .player__eq i:nth-child(2) { animation-delay: .15s; }
.player[data-playing] .player__eq i:nth-child(3) { animation-delay: .3s; }
.player[data-playing] .player__eq i:nth-child(4) { animation-delay: .45s; }
.player:not([data-playing]) .player__eq { opacity: 0; }

@keyframes eq {
	0%,100% { transform: scaleY(.5); }
	50% { transform: scaleY(2.4); }
}

.player__play {
	flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
	background: var(--red); border: 0; color: var(--white); cursor: pointer;
	display: grid; place-items: center;
}
.player__play:hover { background: var(--red-dk); }
.player__play svg { width: 26px; height: 26px; fill: currentColor; }
.player__play .icon-pause { display: none; }
.player[data-playing] .player__play .icon-play { display: none; }
.player[data-playing] .player__play .icon-pause { display: block; }

.player__meta { min-width: 0; flex: 1 1 auto; }
.player__badge { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .82rem; }
.player__live {
	font-family: var(--font-display); font-weight: 800; font-size: .68rem; letter-spacing: .08em;
	background: var(--red); color: var(--white); padding: .12rem .4rem; border-radius: 4px; text-transform: uppercase;
}
.player__live[data-state="reconnecting"] { background: #8a6d00; }
.player__live[data-state="offline"] { background: var(--muted); }
.player__show { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__with { color: rgba(255,255,255,.6); white-space: nowrap; }
.player__track { margin: .1rem 0 0; color: rgba(255,255,255,.85); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.player__controls { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.player__mute { background: none; border: 0; color: rgba(255,255,255,.85); cursor: pointer; padding: 4px; }
.player__mute svg { width: 22px; height: 22px; fill: currentColor; }
.player[data-muted] .player__mute { color: var(--red); }

.player__volume input[type="range"] {
	width: 90px; accent-color: var(--red); cursor: pointer;
}

@media (max-width: 640px) {
	.player__with, .player__volume { display: none; }
	.player__meta { flex: 1 1 auto; }
}

/* Hero listen-live proxy button reflects player state. */
.btn--play[data-playing] svg { display: none; }