/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ── Music Player ─────────────────────────────────────────────────────────── */

/* Spinning vinyl record */
@keyframes vinyl-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.music-vinyl-spin {
  animation: vinyl-spin 4s linear infinite;
}

/* Equalizer bars */
@keyframes eq-bounce {
  0%, 100% { height: 4px; }
  50%       { height: 14px; }
}
.music-eq-bar {
  display: inline-block;
  height: 4px;
  animation: eq-bounce 0.8s ease-in-out infinite;
}

/* Volume slider — webkit track */
.music-volume-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 9999px;
}
.music-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #a78bfa;
  margin-top: -4px;
  cursor: pointer;
}
/* Volume slider — moz track */
.music-volume-slider::-moz-range-track {
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 9999px;
}
.music-volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: #a78bfa;
  cursor: pointer;
}