/* Custom Winamp Ti Styles */

body {
    font-family: 'Exo 2', sans-serif;
    background: #0a0a0a;
    color: #e0e0e0;
}

.bg-scanlines {
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 255, 0.03) 2px,
        rgba(0, 255, 255, 0.03) 4px
    );
}

.eq-slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

.eq-slider::-webkit-slider-track {
    background: linear-gradient(to right, #374151, #4b5563);
    height: 6px;
    border-radius: 3px;
}

.eq-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 20px;
    width: 10px;
    background: linear-gradient(to bottom, #06b6d4, #0891b2);
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
}

.eq-slider::-moz-range-track {
    background: linear-gradient(to right, #374151, #4b5563);
    height: 6px;
    border-radius: 3px;
    border: none;
}

.eq-slider::-moz-range-thumb {
    height: 20px;
    width: 10px;
    background: linear-gradient(to bottom, #06b6d4, #0891b2);
    border-radius: 5px;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
}

/* Glowing effects */
.text-transparent.bg-clip-text {
    text-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
}

/* Hover animations */
button:hover {
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
}

/* Retro glow effects */
.border-cyan-500\/20:hover {
    box-shadow: inset 0 0 20px rgba(6, 182, 212, 0.1);
}

/* Custom scrollbar for playlist */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #374151;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #06b6d4, #0891b2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #0891b2, #0e7490);
}

/* Metallic button effects */
.bg-gradient-to-r.from-cyan-600.to-blue-600 {
    background: linear-gradient(45deg, #0891b2, #2563eb, #06b6d4);
    background-size: 300% 300%;
    animation: metallic-shine 3s ease-in-out infinite;
}

@keyframes metallic-shine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Pulse animation for playing track */
.bg-cyan-900\/30 {
    animation: subtle-pulse 2s ease-in-out infinite;
}

@keyframes subtle-pulse {
    0%, 100% { background-color: rgba(22, 78, 99, 0.3); }
    50% { background-color: rgba(22, 78, 99, 0.5); }
}

/* Retro CRT effect */
@media (min-width: 768px) {
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: 
            repeating-linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.03),
                rgba(0, 0, 0, 0.03) 1px,
                transparent 1px,
                transparent 2px
            ),
            repeating-linear-gradient(
                rgba(0, 0, 0, 0.02),
                rgba(0, 0, 0, 0.02) 1px,
                transparent 1px,
                transparent 2px
            );
        pointer-events: none;
        z-index: 1000;
    }
}