/* ═══════════════════════════════════════════════════════
   🎧 Course Music Widget - Custom Styles
   Animations & effects for the floating music widget
   ═══════════════════════════════════════════════════════ */

/* ─── Prevent FOUC (Flash of Unstyled Content) ─── */
/* Hide Alpine.js elements until Alpine is loaded */
[x-cloak] {
  display: none !important;
}

/* ─── FAB Pulse Ring (khi đang phát) ─── */
@keyframes music-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(139, 92, 246, 0);
  }
}

.music-fab-playing {
  animation: music-pulse 2s ease-in-out infinite;
}

/* ─── Gradient Border Spin ─── */
@keyframes gradient-spin {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.music-fab-gradient {
  animation: gradient-spin 4s linear infinite;
}

/* ─── Disc Rotation (vinyl style) ─── */
@keyframes disc-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.music-disc-spinning {
  animation: disc-spin 3s linear infinite;
}

.music-disc-spinning.paused {
  animation-play-state: paused;
}

/* ─── Modal Slide Up (mobile bottom sheet) ─── */
@keyframes slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-down {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

.music-modal-enter {
  animation: slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.music-modal-leave {
  animation: slide-down 0.25s ease-in forwards;
}

/* ─── Desktop fade-scale animation ─── */
@keyframes fade-scale-in {
  from {
    transform: scale(0.92) translateY(8px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

@keyframes fade-scale-out {
  from {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  to {
    transform: scale(0.92) translateY(8px);
    opacity: 0;
  }
}

@media (min-width: 640px) {
  .music-modal-enter {
    animation: fade-scale-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .music-modal-leave {
    animation: fade-scale-out 0.2s ease-in forwards;
  }
}

/* ─── Marquee for long song titles ─── */
@keyframes marquee-scroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.music-marquee {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
}

.music-marquee-inner {
  display: flex;
  animation: marquee-scroll 12s linear infinite;
}

.music-marquee-inner.paused {
  animation-play-state: paused;
}

/* ─── Equalizer Bars ─── */
@keyframes eq-bar-1 {
  0%, 100% { height: 4px; }
  25% { height: 16px; }
  50% { height: 8px; }
  75% { height: 20px; }
}

@keyframes eq-bar-2 {
  0%, 100% { height: 8px; }
  25% { height: 20px; }
  50% { height: 4px; }
  75% { height: 12px; }
}

@keyframes eq-bar-3 {
  0%, 100% { height: 12px; }
  25% { height: 4px; }
  50% { height: 20px; }
  75% { height: 8px; }
}

.music-eq-bar {
  width: 3px;
  border-radius: 2px;
  background: currentColor;
  transition: height 0.1s;
}

.music-eq-bar:nth-child(1) { animation: eq-bar-1 1.2s ease-in-out infinite; }
.music-eq-bar:nth-child(2) { animation: eq-bar-2 1.0s ease-in-out infinite 0.1s; }
.music-eq-bar:nth-child(3) { animation: eq-bar-3 1.4s ease-in-out infinite 0.2s; }

.music-eq-bar.paused {
  animation-play-state: paused;
  height: 4px !important;
}

/* ─── Playlist Item ─── */
.music-playlist-item {
  transition: all 0.2s ease;
}

.music-playlist-item:hover {
  background-color: rgba(139, 92, 246, 0.04);
}

.music-playlist-item.active {
  background-color: rgba(139, 92, 246, 0.08);
  border-left: 3px solid #8b5cf6;
}

/* ─── Volume Slider Custom ─── */
.music-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: #e5e7eb;
  outline: none;
  cursor: pointer;
}

.music-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #8b5cf6;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease;
}

.music-volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.music-volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #8b5cf6;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ─── FAB bounce intro ─── */
@keyframes fab-bounce-in {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.15) rotate(10deg);
  }
  70% {
    transform: scale(0.95) rotate(-5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.music-fab-intro {
  animation: fab-bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ─── Toast notification ─── */
@keyframes toast-in {
  from {
    transform: translateY(-10px) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes toast-out {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateY(-10px) scale(0.95);
    opacity: 0;
  }
}

.music-toast-enter {
  animation: toast-in 0.3s ease-out forwards;
}

.music-toast-leave {
  animation: toast-out 0.2s ease-in forwards;
}

/* ─── Mini Progress Bar under FAB ─── */
.music-mini-progress {
  position: absolute;
  bottom: -3px;
  left: 15%;
  width: 70%;
  height: 3px;
  border-radius: 2px;
  background: rgba(139, 92, 246, 0.2);
  overflow: hidden;
}

.music-mini-progress-bar {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #8b5cf6, #6366f1);
  transition: width 0.5s linear;
}

/* ─── Scrollbar for playlist ─── */
.music-playlist-scroll::-webkit-scrollbar {
  width: 4px;
}

.music-playlist-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.music-playlist-scroll::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 2px;
}

.music-playlist-scroll::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}