/* ==========================================================================
   Waveform-style player skin.
   Purely visual — reuses the existing #beatProgressTrack / #beatProgressFill
   elements and JS (which already sets --fill width as a %), so no markup
   or script changes are required to adopt it. Just add class="waveform"
   to .beat-player-progress in beat.php (and any future custom players
   that follow the same track/fill pattern).
   ========================================================================== */

.beat-player-progress.waveform,
.mp-waveform {
    position: relative;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background-image: repeating-linear-gradient(
        90deg,
        var(--line, #d8d8de) 0px,
        var(--line, #d8d8de) 3px,
        transparent 3px,
        transparent 6px
    );
    background-size: 6px 100%;
    -webkit-mask-image: repeating-linear-gradient(
        180deg,
        transparent 0,
        transparent 2px,
        #000 2px,
        #000 4px
    );
    mask-image: none; /* bars themselves already come from the background pattern above */
}

/* Randomized-height bar illusion using multiple offset gradients keeps this
   pure CSS (no canvas / JS waveform analysis needed) while still reading as
   a waveform rather than a flat progress rail. */
.beat-player-progress.waveform {
    background-image:
        repeating-linear-gradient(90deg, var(--line, #d8d8de) 0 2px, transparent 2px 5px);
    -webkit-mask-image:
        linear-gradient(90deg, #000 0 100%),
        radial-gradient(ellipse 3px 55% at center, #000 60%, transparent 61%);
    mask-composite: intersect;
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-size: 5px 100%;
    mask-repeat: repeat-x;
    mask-size: 5px 100%;
}

.theme-dark .beat-player-progress.waveform,
.theme-dark .mp-waveform {
    background-image: repeating-linear-gradient(90deg, #3a3a3a 0 2px, transparent 2px 5px);
}

.beat-player-progress.waveform .beat-player-progress-fill,
.mp-waveform .mp-waveform-fill {
    position: absolute;
    inset: 0;
    width: 0%;
    background: linear-gradient(180deg, var(--purple, #7358ff), var(--pink, #ff4d74));
    background-image:
        repeating-linear-gradient(90deg, var(--purple, #7358ff) 0 2px, transparent 2px 5px);
    -webkit-mask-image: inherit;
    mask-image: inherit;
    -webkit-mask-size: 5px 100%;
    mask-size: 5px 100%;
    transition: width .1s linear;
    pointer-events: none;
}

.beat-player-progress.waveform .beat-player-progress-handle,
.mp-waveform .mp-waveform-handle {
    display: none; /* the filled bars already show playback position */
}

/* Gentle "breathing" while playing, toggled via the .is-playing class that
   beat.php's existing play/pause handler already adds to the play button —
   apply the same class to the waveform track from JS if you want this,
   or simply leave it off; it's optional polish. */
.beat-player-progress.waveform.is-playing {
    animation: mpWaveformBreathe 2.4s ease-in-out infinite;
}

@keyframes mpWaveformBreathe {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.04); }
}