/* ============================================================
   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 phone
   layout below, 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: var(--focus-outline);
    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%;
    /* A flex item is never narrower than its longest word unless it is told
       it may be, and the card hides whatever sticks out of it (#581). */
    min-width: 0;
}

.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;
}

/* A word wider than the column breaks onto the next line instead of running
   under the card's edge (#581). Inherited by the artist and the title. */
.audio-player-description {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* 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);
}

/* The before-and-after (#124): demo and mix, two of the kit's quiet pills
   under the title. Nothing here restyles the button — the row only places
   them. Rendered `hidden` and shown by ap_service.js for a track that has a
   demo, so the guard below is what keeps it out of every other track. */
.audio-player-versions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.audio-player-versions[hidden] {
    display: none;
}

.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;
    /* 44px at every width, the phone layout included: the row takes what it
       is short of from the card, never from an arrow. One that may shrink
       comes out an oval, and under what a thumb needs (#581). */
    flex: 0 0 auto;
    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: var(--focus-outline);
    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: 1264px) {
    .audio-player-description-title {
        font-size: 24px;
    }

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

/* The player's own layout on a tablet and on a phone, on every page that has
   the player (#581). It was written in the project carousel's stylesheet and
   scoped to the carousel, so the same player on the mixing and recording
   pages had none: the desktop row, squeezed until the title was cut. */
@media (max-width: 768px) {
    .audio-player-container {
        gap: var(--space-3);
    }

    .audio-player {
        gap: var(--space-4);
        padding: 1.25em;
        border-radius: var(--radius-md);
    }

    .audio-player-description-artist {
        font-size: 18px;
    }

    /* The arrows keep their 44px here, so the card is a little narrower than
       it was: the two times sit 4px closer to the timeline to give it back. */
    .audio-player-transport {
        gap: var(--space-2);
    }
}

/* On a phone the card takes the full width — play button and title on top,
   the timeline across underneath — and the two arrows sit below it, side by
   side in the middle. */
@media (max-width: 480px) {
    .audio-player-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: stretch;
        /* 8px under the card, 12px between the two arrows. */
        gap: var(--space-2) var(--space-3);
    }

    .audio-player {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-column: 1 / -1;
        gap: var(--space-3);
        padding: 1rem;
    }

    .audio-nav-prev {
        grid-column: 1;
        grid-row: 2;
        justify-self: end;
    }

    .audio-nav-next {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
    }

    .audio-player-circle {
        width: 3em;
        height: 3em;
        flex: 0 0 3em;
        align-self: start;
        grid-column: 1;
        grid-row: 1;
    }

    .audio-player-circle svg {
        width: 2.25em;
        height: 2.25em;
    }

    .audio-player-transport-container {
        display: contents;
    }

    .audio-player-description {
        grid-column: 2;
        grid-row: 1;
    }

    /* The demo and mix pills (mixing page) and the timeline name a column and
       no row: the timeline is the second row when the pills are hidden and
       the third when they show. Giving it a row puts it on top of them. */
    .audio-player-versions {
        grid-column: 1 / -1;
    }

    .audio-player-transport {
        grid-column: 1 / -1;
        width: 100%;
        gap: 0.4rem;
    }

    .audio-player-description-title {
        font-size: 20px;
    }

    .audio-player-description-artist {
        font-size: 16px;
    }

    .audio-player-times {
        font-size: 0.75rem;
    }
}

/* 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;
    }
}