/**
 * ASM Waveform Player — Base Styles
 *
 * CSS Custom Properties (override in your theme SCSS or per-album ACF field):
 *
 * --asm-wave-color:      Unplayed waveform color       (default: #d9d9d9)
 * --asm-progress-color:  Played/progress color          (default: #555555)
 * --asm-cursor-color:    Playback cursor color           (default: #333333)
 * --asm-cursor-overhang: How far the cursor extends past the waveform top/bottom (default: 6px)
 * --asm-height:          Waveform height in px           (default: 48)
 *
 * Bar-style waveform (set --asm-bar-width > 0 to enable):
 * --asm-bar-width:       Individual bar width in px      (default: 0 = classic wave)
 * --asm-bar-gap:         Gap between bars in px          (default: 0)
 * --asm-bar-radius:      Bar corner radius in px         (default: 0)
 *
 * Button:
 * --asm-btn-size:         Play/pause button size          (default: 36px)
 * --asm-btn-color:        Button icon color               (default: #333333)
 *                         Auto-set from ACF album_description:_font_color on album pages.
 * --asm-btn-hover-opacity: Opacity on hover               (default: 0.6)
 *
 * Squiggly line style (set --asm-render-style to 'squiggly' to enable):
 * --asm-render-style:    Render mode: '', 'squiggly', or 'spike'  (default: '')
 * --asm-line-width:      Stroke width in px (squiggly + spike)    (default: 1)
 *
 * Spike style (set --asm-render-style to 'spike' to enable):
 *   High-res rounded vertical spikes, alternating above/below centre.
 *   Also uses --asm-line-width for stroke thickness.
 *
 * Amplitude curve (all styles):
 * --asm-amplitude-curve: Power exponent for display scaling  (default: 0.5)
 *   1.0 = linear (brick-wall look on compressed audio)
 *   0.5 = square root — good default, opens up dynamic range visually
 *   0.3 = aggressive — quiet sections stretched, peaks very prominent
 *   Classic/bar: applied via fetch+Web Audio decode before Wavesurfer loads.
 *   Squiggly/spike: applied inside the custom renderFunction.
 *   Controlled site-wide from the plugin admin page (Waveform Player → Settings).
 *   Override per-album via ACF custom_css_for_portfolio:
 *     .asm-player { --asm-amplitude-curve: 0.4; }
 *
 * Time:
 * --asm-time-color:      Time display color              (default: #666666)
 * --asm-time-font-size:  Time display font size          (default: 12px)
 */

/* ── Container ────────────────────────────────── */

.asm-player {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    width: 100%;
    box-sizing: border-box;
}

/* ── Play / Pause Button ─────────────────────── */

.asm-player__btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--asm-btn-size, 36px);
    height: var(--asm-btn-size, 36px);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--asm-btn-color, #333333);
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.asm-player__btn:hover,
.asm-player__btn:focus-visible {
    opacity: var(--asm-btn-hover-opacity, 0.6);
    outline: none;
}

.asm-player__icon {
    width: 60%;
    height: 60%;
}

/* Show play icon by default, hide pause. */
.asm-player__icon--pause {
    display: none;
}

/* When playing, swap icons. */
.asm-player--playing .asm-player__icon--play {
    display: none;
}

.asm-player--playing .asm-player__icon--pause {
    display: block;
}

/* ── Waveform Container ──────────────────────── */

.asm-player__waveform {
    flex-grow: 1;
    min-width: 0;
    overflow: visible; /* Allow cursor to overhang beyond waveform edges */
    position: relative; /* Needed for fade pseudo-elements */
}

/* Edge fade — softens the hard start/end of every waveform style.
 * Classic wave and bar use this CSS overlay (squiggly + spike handle
 * it directly in the canvas gradient instead).
 * Uses the player's background colour via --asm-bg (default transparent).
 * Override --asm-bg in your theme if the player sits on a solid colour:
 *   .asm-player { --asm-bg: #1a1a1a; }
 */
.asm-player__waveform::before,
.asm-player__waveform::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32px;
    pointer-events: none;
    z-index: 1;
}

.asm-player__waveform::before {
    left: 0;
    background: linear-gradient(
        to right,
        var(--asm-bg, transparent),
        transparent
    );
}

.asm-player__waveform::after {
    right: 0;
    background: linear-gradient(
        to left,
        var(--asm-bg, transparent),
        transparent
    );
}

/* ── Time Display ────────────────────────────── */

.asm-player__time {
    flex-shrink: 0;
    min-width: 3.5em;
    text-align: right;
    font-size: var(--asm-time-font-size, 12px);
    color: var(--asm-time-color, #666666);
    font-variant-numeric: tabular-nums;
    user-select: none;
}

/* ── Cursor visibility + size ────────────────── */
/* Hide the playback cursor unless this player is actively playing.      */
/* Wavesurfer renders the cursor as a child div with part="cursor".      */
/* We extend it vertically beyond the waveform with negative top/bottom  */
/* margins — length controlled by --asm-cursor-overhang (default: 6px). */

.asm-player__waveform ::part(cursor) {
    display: none;
}

.asm-player--playing .asm-player__waveform ::part(cursor) {
    display: block;
    top:    calc( -1 * var(--asm-cursor-overhang, 6px) ) !important;
    bottom: calc( -1 * var(--asm-cursor-overhang, 6px) );
    height: auto !important;
}

/* ── Loading State ───────────────────────────── */

.asm-player--loading .asm-player__waveform {
    opacity: 0.4;
}

.asm-player--loading .asm-player__btn {
    pointer-events: none;
    opacity: 0.4;
}

/* ── Error State ─────────────────────────────── */

.asm-player--error .asm-player__waveform {
    opacity: 0.2;
}

.asm-player--error .asm-player__btn {
    pointer-events: none;
    opacity: 0.2;
}