/* ============================================
   AnimeRadio.de - Custom CSS (Animations & Overrides)
   Used alongside Tailwind CSS
   ============================================ */

/* --- Animated Background --- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(233, 30, 140, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 212, 255, 0.05) 0%, transparent 60%),
    linear-gradient(160deg, #1a1040 0%, #2d1060 40%, #4a0e3a 100%);
  z-index: -1;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #06060f; }
::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.5); }

/* --- EQ Bars Animation --- */
.eq-bars { display: inline-flex; gap: 2px; height: 12px; align-items: flex-end; }
.eq-bars span {
  width: 3px;
  background: #00d4ff;
  border-radius: 1px;
  animation: eq-bar 0.8s ease-in-out infinite alternate;
}
.eq-bars span:nth-child(1) { height: 4px; animation-delay: 0s; }
.eq-bars span:nth-child(2) { height: 8px; animation-delay: 0.15s; }
.eq-bars span:nth-child(3) { height: 5px; animation-delay: 0.3s; }
.eq-bars span:nth-child(4) { height: 10px; animation-delay: 0.45s; }
.eq-bars.paused span { animation: none !important; height: 3px !important; }

@keyframes eq-bar {
  0% { height: 3px; }
  100% { height: 12px; }
}

/* --- Live Animations --- */
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 0, 110, 0.2); }
  50% { box-shadow: 0 0 16px rgba(255, 0, 110, 0.4); }
}

@keyframes dot-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes live-glow {
  0%, 100% { box-shadow: 0 0 15px rgba(255, 0, 110, 0.1); }
  50% { box-shadow: 0 0 30px rgba(255, 0, 110, 0.2); }
}

/* --- Volume Slider --- */
.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  cursor: pointer;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #00d4ff;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}
.volume-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #00d4ff;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}

/* --- Scroll Animation --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeInUp 0.6s ease-out forwards; }

/* --- Marquee --- */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
.marquee-text { display: inline-block; animation: marquee 12s linear infinite; }

/* --- Gradient Text Helper --- */
.text-gradient-main {
  background: linear-gradient(135deg, #00d4ff, #8b5cf6, #e91e8c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-logo {
  background: linear-gradient(135deg, #00d4ff, #e91e8c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-tour {
  background: linear-gradient(135deg, #ffd700, #ff8c00, #ff1493);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn {
  margin: 5px;
  display: inline-block;
}

.quality-btn.active {
  border-color: rgba(139, 92, 246, 1);   /* ar-purple */
  color: #fff;
  background: rgba(139, 92, 246, 0.12);
}