/* ============================================================
   features/audio_player/audio_player.css — player v2
   (redesign · P2 s3 reskin)
   ------------------------------------------------------------
   Reskin only. The JS contract is unchanged: .audio-player,
   .audio-player-circle, .icon-play/.icon-pause, .audio-time-current/
   -total, .audio-player-transport-background/-progress/-thumb,
   .audio-nav(.animate) all keep their names + behaviour.

   Soft-dreamy language: organic squircle card on a warm gradient with
   a coral glow bloom + fine grain, a glowing gradient play circle with
   a breathing ring, a mono tape-label artist marked by the dot, and a
   live coral waveform scrub track (the round thumb is retired).
   ============================================================ */

.audio-player-container {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: var(--space-7);
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}

.audio-player {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-7);
    cursor: default;

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    padding: var(--space-7);

    transition: transform var(--dur-slow) var(--ease-dreamy),
        border-color var(--dur-slow) var(--ease-dreamy),
        box-shadow var(--dur-slow) var(--ease-dreamy);
    box-shadow: var(--shadow-md);

    /* warm dreamy wash so the card never reads as flat white */
    background: var(--grad-soft);
}

/* Coral glow bloom behind the play button. */
.audio-player::before {
    content: "";
    position: absolute;
    left: -4%;
    top: 50%;
    width: 340px;
    height: 340px;
    transform: translateY(-50%);
    background: var(--glow-coral);
    pointer-events: none;
    z-index: 0;
}

/* Fine film grain to unify the soft surfaces. */
.audio-player::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--grain);
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
}

/* Keep all real content above the decorative layers (covers the
   480px grid case where the transport container is display:contents). */
.audio-player > *,
.audio-player-description,
.audio-player-transport-container,
.audio-player-transport {
    position: relative;
    z-index: 1;
}

.audio-player:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.audio-player-circle {
    position: relative;
    background: var(--grad-coral);
    height: 4.5em;
    width: 4.5em;
    flex: 0 0 4.5em;
    border-radius: 50%;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: var(--shadow-glow);
    transition: transform var(--dur-base) var(--ease-dreamy),
        filter var(--dur-base) var(--ease-soft);
}

/* Soft ring that breathes outward on hover. */
.audio-player-circle::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--accent);
    opacity: 0;
    transform: scale(1);
    transition: opacity var(--dur-base) var(--ease-soft),
        transform var(--dur-slow) var(--ease-dreamy);
    pointer-events: none;
}

.audio-player-circle:hover {
    filter: brightness(1.05);
    transform: scale(1.05);
}

.audio-player-circle:hover::after {
    opacity: 0.45;
    transform: scale(1.3);
}

.audio-player-circle:active {
    transform: scale(0.98);
}

.audio-player-circle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 4px;
}

.audio-player-circle svg {
    position: relative;
    z-index: 1;
}

.audio-player-transport-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
}

.audio-player-transport {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* The scrub track is a waveform: the same mask shapes both the muted
   rail and the coral fill, so playback "fills in" the waveform. The old
   round thumb is retired (the fill edge is the position). Click-to-seek
   still hits the full box — CSS masks don't affect pointer events. */
.audio-player-transport-background {
    width: 100%;
    height: 30px;
    background: var(--coral-100);

    -webkit-mask: var(--wave-mask) left center / var(--wave-mask-size) repeat-x;
    mask: var(--wave-mask) left center / var(--wave-mask-size) repeat-x;

    position: relative;
    /* so children can absolutely position */
    cursor: pointer;
}

.audio-player-transport-progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    /* JS updates this */
    background: var(--grad-coral);
}

/* Retired in v2 — the waveform fill edge marks the position. Kept in the
   DOM (aria-hidden) for the unchanged JS contract; just not painted. */
.audio-player-transport-thumb {
    display: none;
}

/* Artist as a mono tape-label, marked by the brand dot. */
.audio-player-description-artist {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    letter-spacing: var(--tracking-label);
    color: var(--accent-strong);
}

.audio-player-description-artist::before {
    content: "";
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    background: var(--accent);
    flex: 0 0 auto;
}

.audio-player-description-title {
    font-family: var(--font-display);
    font-size: 32px;
    line-height: var(--lh-tight);
    color: var(--text);
}

.audio-time-current {
    margin-right: var(--space-2);
}

.audio-time-total {
    margin-left: var(--space-2);
}

.audio-player-times {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    letter-spacing: var(--tracking-label);
    color: var(--text-muted);
    user-select: none;
}

.audio-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    position: relative;
    width: 44px;
    height: 44px;
    z-index: 0;

    border-radius: var(--radius-pill);
    border: 1px solid var(--glass-border);

    background: var(--glass-bg);
    box-shadow: var(--shadow-md);

    cursor: pointer;

    transition: transform var(--dur-base) var(--ease-dreamy),
        border-color var(--dur-base) var(--ease-dreamy),
        background var(--dur-base) var(--ease-dreamy);

    color: var(--text);
    /* svg inherits */

    margin-top: auto;
    margin-bottom: auto;

    overflow: hidden;
}

.audio-nav::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;

    border-radius: 50%;
    background: var(--tint-soft);

    transform: scale(0);
    transition:
        transform var(--dur-slow) var(--ease-soft),
        background var(--dur-slow) var(--ease-soft);
}

.audio-nav:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    background: var(--glass-bg-strong);
}

.audio-nav:active {
    transform: translateY(0);
}

.audio-nav:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.audio-nav svg {
    transition: color var(--dur-slow) var(--ease-soft);
}

.audio-nav.animate::after {
    animation: fillPulse 0.5s var(--ease-soft);
}

.audio-nav.animate svg {
    animation: iconFlash 0.45s var(--ease-soft);
}

/* Ensure the player flexes while arrows stay compact */
.audio-player-container .audio-player {
    flex: 1 1 auto;
}

@keyframes playerBounce {
    0% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(6px);
    }

    /* small downward push */
    100% {
        transform: translateY(0);
    }
}

@keyframes fillPulse {
    0% {
        background: var(--tint-faint);
        transform: scale(0);
    }

    35% {
        background: var(--accent);
        transform: scale(1.4);
    }

    100% {
        background: var(--tint-faint);
        transform: scale(0);
    }
}

@keyframes iconFlash {
    0% {
        color: var(--text-on-coral);
    }

    70% {
        color: var(--text-on-coral);
    }

    /* stays light during the main fill */
    100% {
        color: var(--text);
    }

    /* fades back early */
}

.audio-player.bounce {
    animation: playerBounce 0.3s var(--ease-soft);
}

@media (max-width: 1200px) {
    .audio-player-description-title {
        font-size: 24px;
    }

    .audio-player-container {
        align-items: space-between;
        gap: var(--space-4);
    }
}

/* Reduced motion: keep the player calm — no lift, bounce, ring or pulse. */
@media (prefers-reduced-motion: reduce) {

    .audio-player,
    .audio-player-circle,
    .audio-player-circle::after,
    .audio-nav,
    .audio-nav svg,
    .audio-nav::after {
        transition: none;
    }

    .audio-player:hover,
    .audio-player-circle:hover,
    .audio-player-circle:active,
    .audio-nav:hover {
        transform: none;
    }

    .audio-player-circle:hover::after {
        transform: scale(1);
    }

    .audio-player.bounce,
    .audio-nav.animate::after,
    .audio-nav.animate svg {
        animation: none;
    }
}