/* ===== iOS Lock Screen Music Player Style ===== */

/* --- 1. Full-screen player: glassmorphism blur --- */
.fixed.inset-0.z-50 {
  background: transparent !important;
}

.fixed.inset-0.z-50 > div:first-child,
.fixed.inset-0.z-50 > .flex {
  background: rgba(0,0,0,0.25) !important;
  backdrop-filter: blur(50px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(50px) saturate(180%) !important;
}

/* --- 2. Album cover: rounded, NO breathing anim --- */
.fixed.inset-0.z-50 .aspect-square.rounded-2xl {
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
  overflow: hidden !important;
}

.fixed.inset-0.z-50 .aspect-square.rounded-2xl img {
  animation: none !important;
}

/* --- 3. Song title: white, 18px, centered --- */
.fixed.inset-0.z-50 .font-body.text-base.sm\:text-lg.text-white {
  font-weight: 600 !important;
  font-size: 18px !important;
  color: rgba(255,255,255,0.95) !important;
  text-align: center !important;
  letter-spacing: -0.2px !important;
}

/* --- 4. Subtitle: dim white --- */
.fixed.inset-0.z-50 .font-body.text-xs.sm\:text-sm.text-white\/40 {
  font-size: 14px !important;
  color: rgba(255,255,255,0.5) !important;
  text-align: center !important;
  margin-top: 2px !important;
}

/* --- 5. Progress bar: iOS white --- */
.fixed.inset-0.z-50 .h-\[3px\].bg-white\/10 {
  height: 4px !important;
  background: rgba(255,255,255,0.15) !important;
  border-radius: 2px !important;
}

.fixed.inset-0.z-50 .bg-gradient-to-r.from-\[\#A855F7\].to-\[\#C084FC\] {
  background: rgba(255,255,255,0.9) !important;
  border-radius: 2px !important;
}

/* Progress thumb */
.fixed.inset-0.z-50 .h-\[3px\].bg-white\/10 .absolute.top-1\/2.-translate-y-1\/2 {
  width: 12px !important;
  height: 12px !important;
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

.fixed.inset-0.z-50 .h-\[3px\].bg-white\/10:hover .absolute.top-1\/2.-translate-y-1\/2 {
  opacity: 1 !important;
}

/* Time labels */
.fixed.inset-0.z-50 .font-mono.text-\[10px\].text-white\/30 {
  font-size: 12px !important;
  color: rgba(255,255,255,0.4) !important;
}

/* --- 6. Control buttons: iOS style --- */
.fixed.inset-0.z-50 .rounded-full.bg-white {
  width: 64px !important;
  height: 64px !important;
  background: #fff !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
  transition: transform 0.15s ease !important;
}

.fixed.inset-0.z-50 .rounded-full.bg-white:active {
  transform: scale(0.92) !important;
}

.fixed.inset-0.z-50 .text-white\/70.hover\:text-white {
  color: rgba(255,255,255,0.7) !important;
  transition: all 0.15s ease !important;
}

.fixed.inset-0.z-50 .text-white\/70.hover\:text-white:active {
  transform: scale(0.88) !important;
  opacity: 0.7 !important;
}

/* --- 7. Lyrics area --- */
.fixed.inset-0.z-50 .max-h-\[140px\].overflow-y-auto,
.fixed.inset-0.z-50 .max-h-\[200px\].overflow-y-auto {
  max-height: 200px !important;
  scrollbar-width: none !important;
}

.fixed.inset-0.z-50 .max-h-\[140px\].overflow-y-auto::-webkit-scrollbar,
.fixed.inset-0.z-50 .max-h-\[200px\].overflow-y-auto::-webkit-scrollbar {
  display: none !important;
}

/* Lyric lines */
.fixed.inset-0.z-50 .space-y-1 .font-body,
.fixed.inset-0.z-50 .space-y-1\.5 .font-body {
  color: rgba(255,255,255,0.35) !important;
  font-size: 14px !important;
  line-height: 2 !important;
  transition: all 0.3s ease !important;
  text-align: center !important;
}

/* Current lyric - white highlight */
.fixed.inset-0.z-50 .space-y-1 .text-white\/80,
.fixed.inset-0.z-50 .space-y-1\.5 .text-white\/80,
.fixed.inset-0.z-50 .space-y-1 .text-white\/90,
.fixed.inset-0.z-50 .space-y-1\.5 .text-white\/90 {
  color: rgba(255,255,255,0.95) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

/* --- 8. Bottom mini player --- */
.fixed.bottom-0.left-0.right-0.z-50.bg-\[\#1a1a1a\]\/95 {
  background: rgba(20,20,20,0.95) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border-top: 1px solid rgba(255,255,255,0.04) !important;
}

/* --- 9. Waveform animation --- */
.wave-bar {
  animation: wave-bar ease-in-out infinite;
  transform-origin: bottom center;
}
.wave-bar-1 { animation-duration: 0.4s; }
.wave-bar-2 { animation-duration: 0.55s; animation-delay: 0.08s; }
.wave-bar-3 { animation-duration: 0.5s; animation-delay: 0.16s; }
.wave-bar-4 { animation-duration: 0.65s; animation-delay: 0.06s; }
.wave-bar-5 { animation-duration: 0.45s; animation-delay: 0.12s; }

@keyframes wave-bar {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

.waveform-paused .wave-bar {
  animation-play-state: paused !important;
  transform: scaleY(0.3) !important;
}

/* --- 10. Star pop animation --- */
@keyframes star-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.star-pop {
  animation: star-pop 0.3s ease-out;
}

/* --- 11. Card entrance --- */
@keyframes card-enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.ios-card-enter {
  animation: card-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}