@reference "tailwindcss";

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes slide-up {
    from {
        translate: 0 100%;
        opacity: 0;
    }
    to {
        translate: 0 0;
        opacity: 1;
    }
}
.animate-slide-up {
    animation: slide-up 0.3s ease-out;
}

@keyframes rotate {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}

@keyframes musicWave {
    0%, 100% { scale: 1 0.5; }
    50% { scale: 1 1; }
}

@keyframes spin-continuous {
    from {
        rotate: 0deg;
    }
    to {
        rotate: 360deg;
    }
}
.cover-container img {
    animation: spin-continuous 3s linear infinite;
    animation-play-state: paused;
}
.cover-container img.spinning {
    animation-play-state: running;
}

button.bg-\(--primary\) {
    box-shadow: 0 0 0 2px var(--primary);
    border: none;
}

.orb-player {
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.orb-player::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, var(--primary), transparent, var(--primary));
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.orb-player:hover::before {
    opacity: 0.3;
    animation: rotate 2s linear infinite;
}
.orb-player .animate-pulse {
    animation: musicWave 1.5s ease-in-out infinite;
}

.music-player {
    max-width: 320px;
    user-select: none;
}
.expanded-player {
    width: 320px;
    position: absolute;
    bottom: 0;
    right: 0;
}
.music-player.expanded .expanded-player {
    position: relative;
}
.music-player.expanded .orb-player {
    position: absolute;
    bottom: 0;
    right: 0;
}
.progress-section div:hover,
.bottom-controls > div:hover {
    scale: 1 1.2;
    transition: transform 0.2s ease;
}
/* Playlist Scrollbar Styles */
.playlist-content {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.3s ease;
}
.playlist-content:hover {
    scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
}
.playlist-content::-webkit-scrollbar {
    width: 4px;
}
.playlist-content::-webkit-scrollbar-track {
    background: transparent;
}
.playlist-content::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 4px;
}
.playlist-content:hover::-webkit-scrollbar-thumb {
    background-color: rgba(155, 155, 155, 0.5);
}

@media (hover: none) and (pointer: coarse) {
    .music-player button,
    .playlist-item {
        min-height: 44px;
    }
    .progress-section > div,
    .bottom-controls > div:nth-child(2) {
        height: 12px;
    }
}

@media (max-width: 768px) {
    .music-player {
        max-width: 280px;
        /*left: 8px !important;*/
        bottom: 8px !important;
        right: 8px !important;
    }
    .music-player.expanded {
        width: calc(100vw - 16px);
        max-width: 320px;
        /*left: 8px !important;*/
        right: 8px !important;
    }
    .expanded-player {
        width: min(calc(100vw - 16px), 320px) !important;
    }
    .playlist-panel {
        width: min(calc(100vw - 16px), 320px) !important;
        /*left: 8px !important;*/
        /*right: 8px !important;*/
        max-width: none;
    }
    .controls {
        gap: 8px;
    }
    .controls button {
        width: 36px;
        height: 36px;
    }
    .controls button:nth-child(3) {
        width: 44px;
        height: 44px;
    }
}