/* ============================================================
   AUDIO PLAYER — Scoped styles for .section-audio-worlds
   ============================================================ */

/* === CSS Variables (namespaced to avoid conflicts) === */
:root {
    --aw-font-head: "Oswald", sans-serif;
    --aw-font-body: "Inter", sans-serif;
    --aw-bg:        #e9e6e2;
    --aw-text:      #141414;
    --aw-muted:     rgba(20, 20, 20, 0.55);
    --aw-line:      rgba(20, 20, 20, 0.22);
}

/* === Tracks Section Wrapper ===
.tracks-area {
    padding-bottom: 80px;
}

.tracks-section-header {
    margin-bottom: 16px;
}

.tracks-section-header .sub-title {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--aw-muted);
    font-weight: 600;
}

/* === section-audio-worlds layout (2-col inside container) === */
.section-audio-worlds {
    display: grid;
    grid-template-columns: 32fr 68fr;
    padding: 48px 0 24px;
    gap: 0;
    align-items: center;
    position: relative;
    border-top: 1px solid rgba(20, 20, 20, .18);
}

.section-audio-worlds:last-child {
    border-bottom: 1px solid rgba(20, 20, 20, .18);
    margin-bottom: 48px;
}

/* === Left panel: track title + description — always visible === */
.section-audio-worlds .audio-left {
    grid-column: 1;
    padding-right: 32px;
    display: flex;
    align-items: center;
    padding-top: 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity 300ms ease;
}

/* subtle dim when a different player is open */
.section-audio-worlds.aw-other-playing .audio-left {
    opacity: 0.38;
}

.section-audio-worlds .audio-left-inner {
    width: min(340px, 100%);
    text-align: left;
    position: relative;
}

.section-audio-worlds .aw-track-index {
    font-family: var(--aw-font-head);
    font-size: .75rem;
    letter-spacing: .16em;
    color: rgba(20, 20, 20, .35);
    margin-bottom: 12px;
    display: block;
}

.section-audio-worlds .aw-track-title {
    font-family: var(--aw-font-head);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.1;
    color: rgba(20, 20, 20, .82);
    transition: color 250ms ease;
}

.section-audio-worlds.aw-is-playing .aw-track-title {
    color: rgba(20, 20, 20, 1);
}

.section-audio-worlds .aw-track-desc {
    margin-top: 10px;
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(20, 20, 20, .5);
    font-weight: 700;
}

.section-audio-worlds .aw-track-year {
    margin-top: 14px;
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(20, 20, 20, .35);
    font-family: var(--aw-font-body);
}

/* animated connector line (shows on play) */
.section-audio-worlds .audio-left-inner::after {
    content: "";
    position: absolute;
    left: calc(100% + 16px);
    top: 50%;
    width: 260px;
    height: 1px;
    background: rgba(20, 20, 20, .38);
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
    opacity: 0;
    transition: transform 650ms cubic-bezier(.2, .9, .2, 1), opacity 350ms ease;
    pointer-events: none;
}

.section-audio-worlds.aw-is-playing .audio-left-inner::after {
    opacity: 1;
    transform: translateY(-50%) scaleX(1);
}

/* === Right panel: audio player === */
.section-audio-worlds .audio-right {
    grid-column: 2;
    padding-left: 0;
    align-self: center;
}

/* ===================== AUDIO PLAYER ===================== */
.audio-player-wrap {
    margin-top: 42px;
    display: flex;
    justify-content: center;
}

.audio-player {
    --size:         520px;
    --disc:         450px;
    --disc-reveal:  52%;
    --vinyl-start-x: 0px;
    --vinyl-start-y: 0px;
    --vinyl-open-x: calc(var(--disc) * 0.24);
    --vinyl-open-y: 0px;
    --vinyl-dur:    820ms;
    --aw-img:       none;
    width: min(980px, 100%);
    position: relative;
    display: block;
    padding: 10px 0 0;
}

.audio-player[data-enter="right"] { --vinyl-open-x: calc(var(--disc) *  0.24); }
.audio-player[data-enter="left"]  { --vinyl-open-x: calc(var(--disc) * -0.24); }

/* Right bleed image strip */
.audio-player .right-strip {
    position: absolute;
    top: 10px;
    left: calc(var(--size) + 36px);
    right: 0;
    height: var(--size);
    background-image: var(--aw-img);
    background-size: cover;
    background-position: 70% 45%;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 450ms ease, transform 700ms cubic-bezier(.2, .9, .2, 1);
    filter: saturate(0.95) contrast(1.05);
    box-shadow: 0 24px 65px rgba(0, 0, 0, .14);
    border-radius: 2px;
    overflow: hidden;
}

.audio-player .right-strip::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(233, 230, 226, .98), rgba(233, 230, 226, .0) 38%);
    pointer-events: none;
}

.audio-player.is-playing .right-strip {
    opacity: 1;
    transform: translateX(0);
}

/* Player stage (clickable cover area) */
.player-stage {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    position: relative;
    width: 100%;
    height: var(--size);
    display: block;
    outline: none;
}

/* Cover */
.audio-player .cover {
    position: absolute;
    top: 0;
    width: var(--size);
    height: var(--size);
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 24px 65px rgba(0, 0, 0, .18);
    background: #111;
}

.audio-player .cover.main {
    left: 0;
    z-index: 4;
    isolation: isolate;
    box-shadow: 0 34px 90px rgba(0, 0, 0, .22);
}

.audio-player .cover.main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
    filter: saturate(1.06) contrast(1.04) brightness(.96);
    transform: scale(1.015);
}

.audio-player .cover.main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.55),
        rgba(0,0,0,0) 30%,
        rgba(0,0,0,0) 70%,
        rgba(0,0,0,.58)
    );
    opacity: .48;
    pointer-events: none;
}

.audio-player .cover.main::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.26), transparent 55%),
        linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,0) 58%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: .55;
    pointer-events: none;
}

/* Play badge */
.play-badge {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 10;
    transition: opacity 250ms ease, transform 250ms ease;
    pointer-events: none;
}

.play-badge::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 82px; height: 82px;
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow:
        0 18px 46px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 0 -14px 26px rgba(0,0,0,.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.play-badge::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 82px; height: 82px;
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.50), rgba(255,255,255,0) 58%),
        radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), transparent 52%);
    opacity: .35;
    pointer-events: none;
}

.play-badge .tri {
    position: relative;
    z-index: 1;
    width: 0; height: 0;
    border-left: 18px solid rgba(255,255,255,.9);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    transform: translateX(3px);
    filter: drop-shadow(0 10px 25px rgba(0,0,0,.35));
}

.audio-player.is-playing .play-badge {
    opacity: 0;
    transform: scale(.98);
}

/* Vinyl */
.audio-player .vinyl {
    position: absolute;
    left: calc(var(--size) - 18px);
    top: 50%;
    width: var(--disc);
    height: var(--disc);
    border-radius: 999px;
    transform: translate(-50%, -50%) translate(var(--vinyl-start-x), var(--vinyl-start-y)) scale(.98);
    opacity: 0;
    z-index: 2;
    transition: transform var(--vinyl-dur) cubic-bezier(.2, .9, .2, 1), opacity 450ms ease;
    box-shadow: 0 26px 70px rgba(0,0,0,.22);
    background-image:
        radial-gradient(circle at 50% 50%, rgba(0,0,0,.0) 0 12%, rgba(0,0,0,.92) 13% 27%, rgba(255,255,255,.12) 28% 29%, rgba(0,0,0,.92) 30% 100%),
        repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.14) 0 1px, rgba(0,0,0,0) 2px 6px),
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), transparent 55%),
        linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.62)),
        var(--aw-img);
    background-size: auto, auto, auto, cover, cover;
    background-position: center, center, center, center, center;
    background-repeat: no-repeat;
    clip-path: inset(0 0 0 var(--disc-reveal));
}

.audio-player[data-enter="left"] .vinyl {
    left: 18px;
    clip-path: inset(0 var(--disc-reveal) 0 0);
}

.audio-player .vinyl::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background:
        radial-gradient(circle at 62% 38%, rgba(255,255,255,.18), transparent 40%),
        conic-gradient(from 210deg,
            rgba(255,255,255,0)    0   110deg,
            rgba(255,255,255,.10) 110deg 170deg,
            rgba(255,255,255,0)  170deg 300deg,
            rgba(255,255,255,.16) 300deg 332deg,
            rgba(255,255,255,0)  332deg 360deg);
    opacity: .55;
    mix-blend-mode: screen;
    pointer-events: none;
}

.audio-player .vinyl::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.0) 0 7.5%, rgba(255,255,255,.12) 8% 8.5%, rgba(0,0,0,0) 9% 100%);
    mix-blend-mode: screen;
    opacity: .65;
}

.audio-player.is-open .vinyl {
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--vinyl-open-x), var(--vinyl-open-y)) scale(1);
}

.audio-player.is-playing .vinyl {
    clip-path: none;
    animation: aw-spin 1.9s linear infinite;
}

@keyframes aw-spin {
    to {
        transform: translate(-50%, -50%) translate(var(--vinyl-open-x), var(--vinyl-open-y)) scale(1) rotate(360deg);
    }
}

/* === Player UI === */
.player-ui {
    width: min(560px, 100%);
    margin: 16px 0 0;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 400ms ease, transform 500ms ease;
}

.audio-player.is-open .player-ui {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 2px;
}

.btn-ghost {
    border: 1px solid rgba(20, 20, 20, .45);
    background: transparent;
    color: rgba(20, 20, 20, .8);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 700;
    font-size: .62rem;
    padding: 10px 12px;
    cursor: pointer;
    font-family: var(--aw-font-body);
}

.btn-ghost:active { transform: translateY(1px); }

/* Wave animation */
.wave {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 18px;
    flex: 1;
    justify-content: center;
}

.wave span {
    width: 3px;
    height: 6px;
    background: rgba(20, 20, 20, .55);
    border-radius: 2px;
    animation: aw-bounce 950ms ease-in-out infinite;
    animation-play-state: paused;
}

.audio-player.is-playing .wave span { animation-play-state: running; }

.wave span:nth-child(2) { animation-delay: -120ms; }
.wave span:nth-child(3) { animation-delay: -260ms; }
.wave span:nth-child(4) { animation-delay: -390ms; }
.wave span:nth-child(5) { animation-delay: -540ms; }
.wave span:nth-child(6) { animation-delay: -260ms; }
.wave span:nth-child(7) { animation-delay: -120ms; }

@keyframes aw-bounce {
    0%, 100% { height: 6px;  opacity: .75; }
    50%       { height: 18px; opacity: 1;   }
}

/* Time display */
.audio-player .time {
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(20, 20, 20, .55);
    min-width: 150px;
    text-align: right;
    font-family: var(--aw-font-body);
}

/* Progress bar */
.audio-player .progress {
    height: 2px;
    background: rgba(20, 20, 20, .18);
    position: relative;
    cursor: pointer;
}

.audio-player .progress-fill {
    height: 100%;
    width: 0%;
    background: rgba(20, 20, 20, .7);
    pointer-events: none;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1060px) {
    .section-audio-worlds .audio-right { padding-left: 0; }
}

@media (max-width: 980px) {
    .audio-player {
        --size: 440px;
        --disc: 380px;
        --disc-reveal: 54%;
    }
    .audio-player .right-strip { left: calc(var(--size) + 22px); }
}

@media (max-width: 860px) {
    .section-audio-worlds {
        grid-template-columns: 1fr;
        padding: 36px 0;
    }
    .section-audio-worlds .audio-left {
        grid-column: 1;
        justify-content: flex-start;
        padding-right: 0;
        margin-bottom: 20px;
    }
    .section-audio-worlds .audio-left-inner::after { display: none; }
    .section-audio-worlds .audio-right {
        grid-column: 1;
        padding-left: 0;
        margin-top: 0;
    }
}

@media (max-width: 560px) {
    .audio-player {
        --size: 360px;
        --disc: 320px;
        --disc-reveal: 56%;
    }
    .player-stage { height: var(--size); }
    .audio-player .right-strip { display: none; }
    .controls-row { flex-wrap: wrap; gap: 8px; }
    .audio-player .time { min-width: unset; text-align: left; }
}

@media (max-width: 400px) {
    .audio-player {
        --size: 300px;
        --disc: 270px;
    }
}

/* ============================================================
   DARK THEME OVERRIDES — used when body has class="dark"
   ============================================================ */

/* --- Borders --- */
.dark .section-audio-worlds {
    border-top-color: rgba(255, 255, 255, 0.1);
}
.dark .section-audio-worlds:last-child {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* --- Section header --- */
.dark .tracks-section-header .sub-title {
    color: rgba(255, 255, 255, 0.45);
}

/* --- Left panel: hidden by default, shown when player is open --- */
.dark .section-audio-worlds .audio-left {
    opacity: 0;
    pointer-events: none;
}
.dark .section-audio-worlds:has(.audio-player.is-open) .audio-left,
.dark .section-audio-worlds.aw-is-playing .audio-left {
    opacity: 1;
    pointer-events: auto;
}
.dark .section-audio-worlds.aw-other-playing .audio-left {
    opacity: 0;
    pointer-events: none;
}

/* --- Left panel text colors (white on dark) --- */
.dark .section-audio-worlds .aw-track-index {
    color: rgba(255, 255, 255, 0.35);
}
.dark .section-audio-worlds .aw-track-title {
    color: rgba(255, 255, 255, 0.82);
}
.dark .section-audio-worlds.aw-is-playing .aw-track-title {
    color: #fff;
}
.dark .section-audio-worlds .aw-track-desc {
    color: rgba(255, 255, 255, 0.5);
}
.dark .section-audio-worlds .aw-track-year {
    color: rgba(255, 255, 255, 0.35);
}

/* --- Connector line --- */
.dark .section-audio-worlds .audio-left-inner::after {
    background: rgba(255, 255, 255, 0.22);
}

/* --- Right-strip gradient: blend into dark bg (#111111) --- */
.dark .audio-player .right-strip::after {
    background: linear-gradient(90deg, rgba(17, 17, 17, 0.98), rgba(17, 17, 17, 0) 38%);
}

/* --- Player UI controls --- */
.dark .btn-ghost {
    border-color: rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.8);
}
.dark .wave span {
    background: rgba(255, 255, 255, 0.55);
}
.dark .audio-player .time {
    color: rgba(255, 255, 255, 0.55);
}
.dark .audio-player .progress {
    background: rgba(255, 255, 255, 0.15);
}
.dark .audio-player .progress-fill {
    background: rgba(255, 255, 255, 0.7);
}