/* =============================================================================
   ui/player.css — انیمیشن‌ها و جزئیات بازطراحی‌شدهٔ پلیر.

   چیدمانِ حیاتی پلیر در خودِ shell.js به‌صورت inline نوشته شده تا اگر مرورگر
   یک CSS کهنه را از کش سرو کرد، باز هم پلیر سالم بماند. اینجا فقط چیزهایی
   است که inline نمی‌شود: keyframes، hover و حالت‌های پویا.
   ========================================================================== */

/* ------------------------------ mini player ------------------------------- */

.mpx { transition: box-shadow 240ms ease, transform 160ms var(--e-spring, ease); }
.mpx:active { transform: scale(.994); }

/* متنِ سررفتنی — معادل basicMarquee اندروید. فقط وقتی لازم باشد روشن می‌شود. */
.mqx {
  display: block; overflow: hidden; white-space: nowrap;
  max-width: 100%; text-overflow: ellipsis;
}
.mqx > span { display: inline-block; }
.mqx.on { text-overflow: clip; }
.mqx.on > span { animation: mqxSlide 9s linear infinite; }
@keyframes mqxSlide {
  0%, 8% { transform: translateX(0); }
  50%, 58% { transform: translateX(var(--mqx, 0)); }
  100% { transform: translateX(0); }
}
[dir='rtl'] .mqx.on > span { animation-name: mqxSlideRtl; }
@keyframes mqxSlideRtl {
  0%, 8% { transform: translateX(0); }
  50%, 58% { transform: translateX(calc(-1 * var(--mqx, 0))); }
  100% { transform: translateX(0); }
}

/* اکولایزر سه‌میله‌ای کنار عنوان: نشانهٔ زندهٔ پخش */
.mpx-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; flex: none; }
.mpx-eq > i {
  width: 2.5px; border-radius: 2px; height: 4px;
  background: linear-gradient(180deg, var(--primary), var(--secondary));
  animation: mpxEq 900ms ease-in-out infinite;
}
.mpx-eq > i:nth-child(2) { animation-delay: 150ms; }
.mpx-eq > i:nth-child(3) { animation-delay: 300ms; }
@keyframes mpxEq {
  0%, 100% { height: 4px; opacity: .75; }
  50% { height: 12px; opacity: 1; }
}

.mpx-play { transition: transform 150ms var(--e-spring, ease), box-shadow 240ms ease; }
.mpx-play:active { transform: scale(.9); }
.mpx-play.on { animation: mpxGlow 2200ms ease-in-out infinite; }
@keyframes mpxGlow {
  0%, 100% { box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5); }
  50% { box-shadow: 0 8px 26px -6px rgba(var(--primary-rgb) / .95); }
}

#miniPlayer.loading .mpx-cov { animation: mpxPulse 1100ms ease-in-out infinite; }
@keyframes mpxPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ------------------------------ full player ------------------------------- */

/* کاور وقتی پخش است به‌آرامی نفس می‌کشد — همان حسِ breath اندروید */
.fpx-art { transition: transform 420ms cubic-bezier(.2, .9, .3, 1); }
.fpx-art.on { animation: fpxBreath 4200ms ease-in-out infinite alternate; }
@keyframes fpxBreath {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.035) translateY(-4px); }
}

.fpx-play { transition: transform 150ms var(--e-spring, ease), box-shadow 260ms ease; }
.fpx-play:active { transform: scale(.92); }
.fpx-play.on { animation: fpxGlow 2600ms ease-in-out infinite; }
@keyframes fpxGlow {
  0%, 100% { box-shadow: 0 18px 40px -14px rgba(56, 189, 248, .75); }
  50% { box-shadow: 0 18px 54px -10px rgba(74, 222, 159, .95); }
}

#fullPlayer .icon-btn:active { transform: scale(.9); }
#fpBar #fpKnob { transition: inset-inline-start 240ms linear; }
#fpBar:active #fpKnob { transition: none; transform: translateX(50%) scale(1.25); }
#fpBar #fpFill { transition: width 240ms linear; }
#fpBar:active #fpFill { transition: none; }

#fpQList::-webkit-scrollbar { width: 0; }
#fpQList > button { transition: background 180ms ease, transform 140ms ease; }
#fpQList > button:active { transform: scale(.985); }

@media (max-width: 360px) {
  .fpx-art { width: 200px !important; height: 200px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mqx.on > span, .mpx-eq > i, .mpx-play.on, .fpx-art.on, .fpx-play.on,
  #miniPlayer.loading .mpx-cov { animation: none !important; }
}