/* music-player.css */

.vinyl-wrapper {
    position: relative;
    width: 4rem;
    height: 4rem;
    cursor: pointer;
    margin-right: 0.75rem;

    /* Debug: ensure visibility */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100 !important;
}

.vinyl-record {
    width: 64px;
    height: 64px;
    position: relative;
    border-radius: 50%;
    transform-style: preserve-3d;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    animation: spin 8s linear infinite;
    animation-play-state: paused;

    /* Debug: ensure vinyl record container has explicit dimensions */
    display: block !important;
    background: #000;
}

.vinyl-wrapper.playing .vinyl-record {
    animation-play-state: running;
}

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

.vinyl-art {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
    z-index: 1;

    /* Debug: ensure image has proper dimensions */
    display: block !important;
    opacity: 1 !important;
    min-height: 64px !important;
    min-width: 64px !important;
}

.vinyl-grooves {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image:
        radial-gradient(circle at center, transparent 32%, rgba(0,0,0,0.1) 32.2%, transparent 32.4%),
        radial-gradient(circle at center, transparent 44%, rgba(255,255,255,0.02) 44.2%, transparent 44.4%),
        radial-gradient(circle at center, transparent 56%, rgba(0,0,0,0.1) 56.2%, transparent 56.4%),
        radial-gradient(circle at center, transparent 68%, rgba(255,255,255,0.02) 68.2%, transparent 68.4%),
        radial-gradient(circle at center, transparent 80%, rgba(0,0,0,0.1) 80.2%, transparent 80.4%),
        radial-gradient(circle at center, transparent 92%, rgba(255,255,255,0.02) 92.2%, transparent 92.4%);
    z-index: 2;
}

.vinyl-label, .vinyl-spindle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.vinyl-label {
    width: 30%;
    height: 30%;
    background: #181818;
    border: 1px solid #333;
    z-index: 3;
}

.vinyl-spindle {
    width: 8%;
    height: 8%;
    background: radial-gradient(circle, #ddd 10%, #444 80%);
    z-index: 4;
}

.tonearm {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: -0.5rem;
    left: 2rem;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g fill="none" stroke-width="8"><circle cx="85" cy="15" r="10" stroke="%236c6c6c"/><path d="M85 15 L25 75 A20 20 0 0 0 15 85 L10 80 Z" stroke="%23b0b0b0" stroke-linecap="round" stroke-linejoin="round"/><circle cx="10" cy="80" r="4" fill="%23e0e0e0" stroke="%23888"/></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    transform-origin: 85% 15%;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    transform: rotate(-35deg);
    z-index: 5;
}

.vinyl-wrapper.playing .tonearm {
    transform: rotate(10deg);
}