/* ===== Custom Styles — Beyond Tailwind ===== */

/* Ambient background blobs */
.ambient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.4;
  animation: blobFloat 20s ease-in-out infinite;
}

.blob-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.3), transparent 70%);
  top: -10%;
  left: -10%;
  animation-delay: 0s;
}

.blob-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.25), transparent 70%);
  bottom: -5%;
  right: -10%;
  animation-delay: -7s;
}

.blob-3 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.2), transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -14s;
}

@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -40px) scale(1.1); }
  50% { transform: translate(-20px, 20px) scale(0.95); }
  75% { transform: translate(15px, 30px) scale(1.05); }
}

/* Vinyl Record */
.vinyl-record {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #1a1a2e 0deg,
    #2a2a40 30deg,
    #1a1a2e 60deg,
    #2a2a40 90deg,
    #1a1a2e 120deg,
    #2a2a40 150deg,
    #1a1a2e 180deg,
    #2a2a40 210deg,
    #1a1a2e 240deg,
    #2a2a40 270deg,
    #1a1a2e 300deg,
    #2a2a40 330deg,
    #1a1a2e 360deg
  );
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.05),
    0 0 40px rgba(0, 0, 0, 0.5),
    inset 0 0 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
  position: relative;
}

.vinyl-record::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle at center,
    transparent 0px,
    transparent 2px,
    rgba(255, 255, 255, 0.03) 2px,
    rgba(255, 255, 255, 0.03) 3px
  );
}

.vinyl-record.spinning {
  animation: spin 3s linear infinite;
}

.vinyl-inner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.vinyl-label {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Equalizer bars */
.eq-bar {
  width: 4px;
  height: 4px;
  background: linear-gradient(to top, #8b5cf6, #f97316);
  border-radius: 2px;
  animation: eqBar 0.8s ease-in-out infinite alternate;
}

@keyframes eqBar {
  0% { height: 4px; }
  100% { height: 28px; }
}

/* Volume slider */
.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, #8b5cf6 0%, #8b5cf6 var(--volume-percent, 80%), #242435 var(--volume-percent, 80%), #242435 100%);
  outline: none;
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(139, 92, 246, 0.5);
  transition: transform 0.15s ease;
}

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

.volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 6px rgba(139, 92, 246, 0.5);
}

/* Star rating */
.star-btn {
  font-size: 1.75rem;
  color: #242435;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
  line-height: 1;
  padding: 0 2px;
}

.star-btn:hover,
.star-btn.active {
  color: #f97316;
  transform: scale(1.15);
}

.star-btn.active {
  text-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
}

/* Track list items */
.track-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.track-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.track-item.active {
  background: rgba(139, 92, 246, 0.08);
}

.track-item.active .track-item-number {
  color: #8b5cf6;
}

.track-item.active .track-item-title {
  color: #a78bfa;
}

.track-item-number {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.75rem;
  color: #555;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.track-item-title {
  flex: 1;
  font-size: 0.875rem;
  color: #ccc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-item-duration {
  font-family: monospace;
  font-size: 0.75rem;
  color: #555;
  flex-shrink: 0;
}

.track-item-eq {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.track-item.active.playing .track-item-eq {
  display: flex;
}

.track-item.active.playing .track-item-number-text {
  display: none;
}

.track-item-eq-bar {
  width: 2px;
  background: #8b5cf6;
  border-radius: 1px;
  animation: eqBarSmall 0.6s ease-in-out infinite alternate;
}

@keyframes eqBarSmall {
  0% { height: 3px; }
  100% { height: 14px; }
}

/* Feedback items */
.feedback-item {
  padding: 14px 20px;
  animation: slideUp 0.3s ease-out;
}

.feedback-stars {
  color: #f97316;
  font-size: 0.75rem;
  letter-spacing: 2px;
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Toast animation helpers */
#toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Responsive adjustments */
@media (min-width: 768px) {
  .vinyl-record {
    width: 220px;
    height: 220px;
  }

  .vinyl-inner {
    width: 72px;
    height: 72px;
  }
}

/* Selection color */
::selection {
  background: rgba(139, 92, 246, 0.4);
  color: white;
}