/* ─── Vinyl record ──────────────────────────────────────────────── */

/* Vinyl fills the top region's available space, square via aspect-ratio.
   max-height ensures it never crowds meta/controls below. */
.vinyl-wrap {
    position: relative;
    aspect-ratio: 1;
    width: min(280px, 75cqi, 45cqb);
    height: auto;
}

.vinyl-record {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Stacked: hundreds of fine grooves on top of dark radial body */
    background:
        repeating-radial-gradient(
            circle at 50% 50%,
            transparent 0,
            transparent 2px,
            rgba(255, 255, 255, 0.035) 2.4px,
            transparent 3px
        ),
        radial-gradient(circle at 50% 50%, #1a1a1d 0%, #0c0c0e 65%, #050506 100%);
    position: relative;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 24px 80px rgba(0, 0, 0, 0.6),
        inset 0 0 30px rgba(0, 0, 0, 0.4);
    will-change: transform;
    transform-origin: center;
    /* Always-on spin, JS toggles play-state to pause/resume in place. */
    animation: spin 8s linear infinite;
    animation-play-state: paused;
    overflow: hidden;
}

/* Vinyl body tint overlay — colour wash that respects user override.
   Default --color-vinyl-tint is transparent → no effect. */
.vinyl-record::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--color-vinyl-tint);
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Off-center reflection — soft white sweep mimicking ambient light.
   Sits OUTSIDE .vinyl-record so it doesn't rotate with the disc. */
.vinyl-sheen {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(
            ellipse 90% 50% at 28% 22%,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.04) 30%,
            transparent 60%
        ),
        radial-gradient(
            ellipse 60% 30% at 72% 80%,
            rgba(255, 255, 255, 0.05) 0%,
            transparent 50%
        );
}

/* Spindle hole — tiny dark dot in dead center */
.vinyl-spindle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10%;
    height: 10%;
    background: radial-gradient(circle at 35% 35%, #18181b 0%, #050506 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
    z-index: 3;
}

.vinyl-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44%;
    height: 44%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hi) 100%);
    display: grid;
    place-items: center;
    box-shadow:
        inset 0 0 24px rgba(0, 0, 0, 0.35),
        0 0 24px var(--accent-glow);
}

.vinyl-album-art {
    width: 78%;
    height: 78%;
    border-radius: 50%;
    background-color: var(--bg-1);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-opacity="0.4" stroke-width="1.5"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40%;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.music-player.has-album-art .vinyl-album-art,
.vinyl-record.has-art .vinyl-album-art {
    background-size: cover;
}

/* When album art is present, swap the SVG hint */
.vinyl-album-art[data-has-art="true"] {
    background-size: cover;
}

/* ─── Tonearm ───────────────────────────────────────────────────── */

/* SVG tonearm — counterweight + pivot housing + arm + headshell + cartridge */
.tonearm {
    position: absolute;
    top: -10%;
    right: -8%;
    width: 22%;
    height: 75%;
    transform-origin: 50% 10%;     /* pivot ~ y=22 of 220 viewBox */
    transform: rotate(28deg);
    transition: transform var(--dur-slow) var(--ease-out);
    z-index: 2;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55));
}

.tonearm.playing {
    transform: rotate(16deg);
}

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

/* ─── Song info ─────────────────────────────────────────────────── */

.meta {
    text-align: center;
    width: 100%;
}

.vinyl-song-title {
    font-family: var(--font-player);
    font-size: clamp(16px, 5cqmin, 22px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-title);
    line-height: 1.15;
    word-break: break-word;
}

.vinyl-artist-name {
    margin-top: var(--s-1);
    font-family: var(--font-player);
    font-size: clamp(11px, 3cqmin, 14px);
    color: var(--color-artist);
    letter-spacing: 0.02em;
}

/* Empty title or artist? Collapse it so we don't reserve any vertical space. */
.vinyl-song-title:empty,
.vinyl-artist-name:empty {
    display: none;
}

.vinyl-lyrics-text {
    margin-top: var(--s-3);
    font-family: var(--font-player);
    font-size: clamp(13px, 3.5cqmin, 16px);
    color: var(--color-lyrics);
    font-weight: 500;
    line-height: 1.4;
    min-height: 1.4em;
    transition: opacity var(--dur) var(--ease-out);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ─── First-time hint (hidden once audio loaded) ────────────────── */

.stage-hint {
    font-family: inherit;
    font-size: clamp(10px, 2.5cqmin, 13px);
    color: var(--fg-3);
    text-align: center;
    padding: clamp(4px, 1.2cqmin, 8px) clamp(8px, 2cqmin, 14px);
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: border-color var(--dur), color var(--dur);
    animation: hintPulse 2.4s var(--ease-in-out) infinite;
}

.stage-hint:hover {
    border-color: var(--accent);
    color: var(--fg-1);
}

.stage-hint strong {
    color: var(--accent);
    font-weight: 600;
}

.stage-hint[hidden] {
    display: none;
}

@keyframes hintPulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

/* ─── Progress ──────────────────────────────────────────────────── */

.progress-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-size: 12px;
    color: var(--fg-3);
}

.vinyl-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--bg-3);
    border-radius: var(--r-pill);
    cursor: pointer;
    position: relative;
    transition: height var(--dur) var(--ease-out);
    touch-action: none;
}

.vinyl-progress-bar:hover,
.vinyl-progress-bar[data-scrubbing="true"] {
    height: 6px;
}

.vinyl-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-hi));
    border-radius: inherit;
    width: 0%;
    transition: width 100ms linear;
}

/* ─── Controls ──────────────────────────────────────────────────── */

.controls {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1.8cqmin, 10px);
}

.control-btn {
    width: clamp(32px, 8.5cqmin, 38px);
    height: clamp(32px, 8.5cqmin, 38px);
    border-radius: 50%;
    background: var(--bg-2);
    border: 1px solid var(--border-1);
    color: var(--fg-1);
    display: grid;
    place-items: center;
    transition: background var(--dur), border-color var(--dur), transform var(--dur), color var(--dur);
}

.control-btn:hover:not(:disabled) {
    background: var(--bg-3);
    border-color: var(--border-2);
    color: var(--fg-0);
}

.control-btn:active:not(:disabled) {
    transform: scale(0.94);
}

.control-btn:disabled {
    opacity: 0.4;
}

/* During WebM export, controls are functionally disabled but the captured
   frame should LOOK alive (accent play button, full-opacity sides). */
.frame[data-exporting="true"] .control-btn:disabled {
    opacity: 1;
    cursor: default;
}

.frame[data-exporting="true"] .vinyl-play-pause-btn:disabled {
    background: var(--accent);
    color: var(--bg-0);
    border-color: transparent;
    box-shadow: 0 8px 24px var(--accent-glow);
}

.vinyl-play-pause-btn {
    width: clamp(40px, 11cqmin, 50px);
    height: clamp(40px, 11cqmin, 50px);
    background: var(--accent);
    color: var(--bg-0);
    border-color: transparent;
    box-shadow: 0 8px 24px var(--accent-glow);
}

.vinyl-play-pause-btn:hover:not(:disabled) {
    background: var(--accent-hi);
    color: var(--bg-0);
    border-color: transparent;
}

.vinyl-play-pause-btn:disabled {
    background: var(--bg-3);
    color: var(--fg-3);
    box-shadow: none;
}

.vinyl-repeat-btn.active {
    color: var(--accent);
    border-color: var(--accent);
}

/* ─── Responsive ────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .vinyl-wrap {
        width: 260px;
        height: 260px;
    }

    .vinyl-song-title {
        font-size: 22px;
    }

    .vinyl-lyrics-text {
        font-size: 16px;
    }
}