/*
PODCAST-FULLSCREEN THESIS: شنیدن به یک صحنه مستقل تبدیل می‌شود؛ نه نسخه صوتی یک پلیر ویدئو و نه تقلید از نمای Lyrics.
OWN-WORLD: کاور واقعی، زغال عمیق، نارنجی خرداد و رنگ‌های محو استخراج‌شده از خود کاور با حرکت بسیار آهسته.
STORY: کاربر پخش را بدون وقفه به نمای متمرکز می‌برد، کنترل می‌کند و هم‌زمان می‌داند بعد از این چه چیزی پخش می‌شود.
FIRST VIEWPORT: کاور بزرگ در راست، اطلاعات و کنترل‌ها در مرکز، و صف واقعی قسمت‌های بعدی در چپ؛ در موبایل همین مسیر عمودی می‌شود.
FORM: یک صحنه شنیداری تمام‌صفحه در حالت Operate؛ محتوا و کنترل بر جلوه مقدم‌اند و حرکت فقط در پس‌زمینه رخ می‌دهد.
*/

html.khp-podcast-fullscreen-open {
    overflow: hidden !important;
}

.khp-podcast__ambient,
.khp-podcast__fullscreen-exit,
.khp-podcast__up-next {
    display: none;
}

.khp-podcast.is-podcast-fullscreen {
    background: #0b0908;
    height: 100dvh;
    inset: 0;
    margin: 0;
    max-width: none;
    overflow: hidden;
    position: fixed;
    width: 100vw;
    z-index: 2147483000;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__shell {
    align-items: center;
    background: rgba(8, 6, 4, 0.44);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: grid;
    gap: clamp(28px, 4.5vw, 72px);
    grid-template-columns:
        minmax(270px, 0.9fr)
        minmax(360px, 1.25fr)
        minmax(290px, 0.92fr);
    height: 100%;
    min-height: 100dvh;
    overflow: auto;
    padding: clamp(32px, 5vw, 76px);
    position: relative;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__shell::after {
    background: linear-gradient(
        180deg,
        rgba(5, 4, 3, 0.08),
        rgba(5, 4, 3, 0.42)
    );
    opacity: 1;
}

/*
MOTION THESIS: A slow Khordad aurora carries the listening scene while a deeper
mesh field gives the fullscreen player spatial continuity. Motion is decorative,
fullscreen-only, transform/opacity-led, and fully disabled by Reduce Motion.
*/
.khp-podcast.is-podcast-fullscreen .khp-podcast__ambient {
    background:
        radial-gradient(ellipse at 50% 118%, rgba(255, 126, 7, 0.18), transparent 54%),
        linear-gradient(145deg, #070503 0%, #150b04 48%, #030302 100%);
    display: block;
    inset: 0;
    isolation: isolate;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    z-index: -2;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__ambient::before {
    animation: khp-podcast-mesh-roam 74s ease-in-out infinite alternate;
    background:
        radial-gradient(circle at 14% 22%, rgba(255, 203, 82, 0.42) 0%, rgba(255, 177, 42, 0.13) 24%, transparent 50%),
        radial-gradient(circle at 78% 18%, rgba(255, 132, 12, 0.34) 0%, rgba(255, 97, 0, 0.1) 26%, transparent 52%),
        radial-gradient(circle at 72% 82%, rgba(255, 174, 45, 0.36) 0%, rgba(255, 125, 8, 0.09) 28%, transparent 56%),
        radial-gradient(circle at 26% 76%, rgba(255, 89, 0, 0.3) 0%, rgba(255, 137, 14, 0.08) 26%, transparent 54%);
    content: "";
    filter: blur(48px);
    inset: -28%;
    opacity: 0.82;
    position: absolute;
    transform: translate3d(-2%, 1%, 0) rotate(-5deg) scale(1.06);
    will-change: transform, opacity;
    z-index: -2;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__ambient::after {
    background:
        linear-gradient(90deg, rgba(4, 3, 2, 0.7), rgba(4, 3, 2, 0.16) 48%, rgba(4, 3, 2, 0.66)),
        radial-gradient(ellipse at 50% 42%, transparent 20%, rgba(2, 2, 1, 0.3) 86%),
        linear-gradient(180deg, rgba(4, 3, 2, 0.04), rgba(4, 3, 2, 0.44));
    content: "";
    inset: 0;
    position: absolute;
    z-index: 3;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__ambient img {
    animation: khp-podcast-cover-bloom 86s ease-in-out infinite alternate;
    filter: blur(104px) brightness(0.24) grayscale(0.84) sepia(0.72) saturate(2);
    height: 136%;
    inset: -18%;
    max-width: none;
    object-fit: cover;
    opacity: 0.18;
    position: absolute;
    transform: scale(1.16) translate3d(1.5%, -0.5%, 0);
    width: 136%;
    will-change: transform, opacity;
    z-index: -1;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__ambient i {
    animation: khp-podcast-aurora-wave-one 56s ease-in-out infinite alternate;
    background:
        linear-gradient(118deg, transparent 12%, rgba(255, 213, 107, 0.46) 36%, rgba(255, 164, 35, 0.32) 51%, rgba(255, 104, 0, 0.18) 66%, transparent 86%);
    border-radius: 42% 58% 64% 36%;
    filter: blur(54px);
    height: max(38vw, 460px);
    mix-blend-mode: screen;
    opacity: 0.54;
    position: absolute;
    right: -20%;
    top: -32%;
    transform: translate3d(-2%, 0, 0) skewX(-7deg) rotate(-15deg) scaleY(0.94);
    width: max(94vw, 1060px);
    will-change: transform, opacity;
    z-index: 1;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__ambient i + i {
    animation: khp-podcast-aurora-wave-two 68s ease-in-out -31s infinite alternate;
    background:
        linear-gradient(132deg, transparent 14%, rgba(255, 90, 0, 0.22) 34%, rgba(255, 145, 18, 0.35) 52%, rgba(255, 197, 72, 0.26) 66%, transparent 84%);
    bottom: -38%;
    left: -24%;
    right: auto;
    top: auto;
    transform: translate3d(2%, 0, 0) skewX(6deg) rotate(13deg) scaleY(1.06);
}

@keyframes khp-podcast-mesh-roam {
    to {
        opacity: 0.7;
        transform: translate3d(5%, -4%, 0) rotate(3deg) scale(1.14);
    }
}

@keyframes khp-podcast-cover-bloom {
    to {
        opacity: 0.12;
        transform: scale(1.26) translate3d(-3%, 2.5%, 0);
    }
}

@keyframes khp-podcast-aurora-wave-one {
    to {
        opacity: 0.38;
        transform: translate3d(-9vw, 6vh, 0) skewX(8deg) rotate(-7deg) scaleY(1.18);
    }
}

@keyframes khp-podcast-aurora-wave-two {
    to {
        opacity: 0.34;
        transform: translate3d(10vw, -5vh, 0) skewX(-9deg) rotate(5deg) scaleY(0.9);
    }
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__fullscreen-exit {
    align-items: center !important;
    background: rgba(10, 9, 8, 0.24) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 50% !important;
    color: var(--khp-audio-text) !important;
    cursor: pointer;
    display: inline-flex !important;
    height: 42px !important;
    justify-content: center !important;
    left: clamp(16px, 2.5vw, 36px) !important;
    margin: 0 !important;
    max-height: 42px !important;
    max-width: 42px !important;
    min-height: 42px !important;
    min-width: 42px !important;
    opacity: 0.58;
    padding: 0 !important;
    position: fixed !important;
    top: clamp(16px, 2.5vw, 36px) !important;
    transition: background-color 180ms ease, border-color 180ms ease, opacity 180ms ease, transform 220ms ease;
    width: 42px !important;
    z-index: 15;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__fullscreen-exit:hover {
    background: rgba(255, 154, 60, 0.16) !important;
    border-color: var(--khp-audio-accent) !important;
    opacity: 1;
    transform: rotate(5deg);
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__fullscreen-exit:focus-visible {
    opacity: 1;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__art {
    align-self: center;
    border-radius: 16px;
    box-shadow: 0 28px 74px rgba(0, 0, 0, 0.48);
    justify-self: center;
    max-width: 430px;
    width: 100%;
    z-index: 2;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__body {
    align-self: center;
    display: block;
    grid-column: auto;
    max-width: 720px;
    min-width: 0;
    width: 100%;
    z-index: 2;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__header h2 {
    font-size: clamp(26px, 3vw, 46px);
    line-height: 1.55;
    max-width: 20ch;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__timeline {
    margin-right: 0;
    margin-top: clamp(28px, 5vh, 54px);
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__time-row,
.khp-podcast.is-podcast-fullscreen .khp-podcast__transport,
.khp-podcast.is-podcast-fullscreen .khp-podcast__actions {
    margin-right: 0;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__transport {
    margin-block: clamp(20px, 3.5vh, 34px);
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__actions {
    border-top: 0;
    gap: 2px;
    justify-content: center;
    min-height: 38px;
    padding-top: 0;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__button {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: rgba(255, 241, 226, 0.58);
    height: 36px;
    opacity: 1;
    transform: none;
    width: 36px;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__button:hover,
.khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__button:focus-visible,
.khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__button:active,
.khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__button[aria-expanded="true"],
.khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__button[aria-pressed="true"] {
    background: rgba(255, 154, 60, 0.1);
    border-color: transparent;
    color: var(--khp-audio-text);
    opacity: 1;
    transform: none;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__volume {
    gap: 0;
    opacity: 1;
    transition: opacity 180ms ease;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__volume:hover,
.khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__volume:focus-within {
    opacity: 1;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__volume input {
    opacity: 0.52;
    transition: opacity 180ms ease;
    width: 58px;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__volume:hover input,
.khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__volume:focus-within input {
    opacity: 0.9;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__speed {
    background: transparent;
    border: 0;
    color: rgba(255, 241, 226, 0.58);
    height: 36px;
    opacity: 1;
    padding-inline: 5px;
    transition: background-color 180ms ease, color 180ms ease, opacity 180ms ease;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__speed:hover,
.khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__speed:focus-within,
.khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__speed:active {
    background: rgba(255, 154, 60, 0.08);
    color: var(--khp-audio-text);
    opacity: 1;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__speed .khp-icon {
    color: currentColor;
    font-size: 17px;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__actions [data-khp-podcast-queue-toggle],
.khp-podcast.is-podcast-fullscreen .khp-podcast__actions [data-khp-podcast-fullscreen],
.khp-podcast.is-podcast-fullscreen .khp-podcast__actions [data-khp-podcast-clear-progress],
.khp-podcast.is-podcast-fullscreen .khp-podcast__actions > a[download] {
    display: none;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__up-next {
    opacity: 0.72;
    transition: opacity 240ms ease;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__up-next:hover,
.khp-podcast.is-podcast-fullscreen .khp-podcast__up-next:focus-within {
    opacity: 1;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__up-next > header p {
    display: none;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast__up-next {
    align-self: center;
    display: block;
    max-height: min(76dvh, 760px);
    min-width: 0;
    overflow: hidden;
    z-index: 2;
}

.khp-podcast__up-next > header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    margin-bottom: 8px;
    padding-bottom: 18px;
}

.khp-podcast__up-next > header span {
    color: var(--khp-audio-accent);
    display: block;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 4px;
}

.khp-podcast__up-next > header h3 {
    color: var(--khp-audio-text);
    font-size: clamp(23px, 2.2vw, 34px);
    line-height: 1.45;
    margin: 0;
}

.khp-podcast__up-next > header p,
.khp-podcast__up-next-empty {
    color: var(--khp-audio-muted);
    font-size: 12px;
    line-height: 1.9;
    margin: 7px 0 0;
}

.khp-podcast__up-next > div {
    max-height: min(55dvh, 560px);
    overflow: auto;
    padding-inline-end: 4px;
    scrollbar-color: rgba(255, 154, 60, 0.5) transparent;
    scrollbar-width: thin;
}

.khp-podcast__up-next .khp-podcast-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    gap: 13px;
    grid-template-columns: 58px minmax(0, 1fr);
    padding: 14px 0;
    transition: color 180ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.khp-podcast__up-next .khp-podcast-item:hover,
.khp-podcast__up-next .khp-podcast-item:focus-visible {
    border-color: rgba(255, 154, 60, 0.62);
    transform: translateX(-5px);
}

.khp-podcast__up-next .khp-podcast-item img,
.khp-podcast__up-next .khp-podcast-item__placeholder {
    border-radius: 10px;
    height: 58px;
    width: 58px;
}

.khp-podcast__up-next .khp-podcast-item strong {
    font-size: 15px;
    line-height: 1.75;
    margin-block: 2px;
    white-space: normal;
}

.khp-podcast__up-next .khp-podcast-item:first-child strong {
    color: var(--khp-audio-text);
    font-size: 18px;
}

.khp-podcast__up-next .khp-podcast-item > b {
    display: none;
}

.khp-podcast.is-podcast-fullscreen .khp-podcast-mini {
    display: none !important;
}

@media (max-width: 1180px) {
    .khp-podcast.is-podcast-fullscreen .khp-podcast__shell {
        align-content: start;
        grid-template-columns: minmax(220px, 0.78fr) minmax(360px, 1.22fr);
        padding: clamp(28px, 5vw, 56px);
    }

    .khp-podcast.is-podcast-fullscreen .khp-podcast__art {
        max-width: 340px;
    }

    .khp-podcast.is-podcast-fullscreen .khp-podcast__up-next {
        grid-column: 1 / -1;
        max-height: none;
        width: 100%;
    }

    .khp-podcast__up-next > div {
        display: grid;
        gap: 0 24px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none;
    }
}

@media (max-width: 820px) {
    .khp-podcast.is-podcast-fullscreen {
        overflow: auto;
    }

    .khp-podcast.is-podcast-fullscreen .khp-podcast__ambient::before {
        filter: blur(36px);
        inset: -18%;
    }

    .khp-podcast.is-podcast-fullscreen .khp-podcast__ambient img,
    .khp-podcast.is-podcast-fullscreen .khp-podcast__ambient i + i {
        display: none;
    }

    .khp-podcast.is-podcast-fullscreen .khp-podcast__ambient i {
        filter: blur(42px);
        height: clamp(280px, 68vw, 460px);
        right: -26%;
        top: -18%;
        width: min(160vw, 880px);
    }

    .khp-podcast.is-podcast-fullscreen .khp-podcast__shell {
        align-content: start;
        gap: 22px;
        grid-template-columns: 1fr;
        height: auto;
        min-height: 100dvh;
        overflow: visible;
        padding: 72px clamp(18px, 5vw, 38px) 34px;
    }

    .khp-podcast.is-podcast-fullscreen .khp-podcast__art {
        max-width: min(54vw, 310px);
    }

    .khp-podcast.is-podcast-fullscreen .khp-podcast__body,
    .khp-podcast.is-podcast-fullscreen .khp-podcast__up-next {
        grid-column: 1;
        max-width: 680px;
        width: 100%;
    }

    .khp-podcast.is-podcast-fullscreen .khp-podcast__header h2 {
        font-size: clamp(23px, 5vw, 34px);
        max-width: none;
        text-align: center;
    }

    .khp-podcast.is-podcast-fullscreen .khp-podcast__header > div,
    .khp-podcast.is-podcast-fullscreen .khp-podcast__header p {
        justify-content: center;
    }

    .khp-podcast.is-podcast-fullscreen .khp-podcast__actions {
        gap: 0;
    }

    .khp-podcast.is-podcast-fullscreen .khp-podcast__fullscreen-exit,
    .khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__button {
        height: 44px !important;
        max-height: 44px !important;
        max-width: 44px !important;
        min-height: 44px !important;
        min-width: 44px !important;
        width: 44px !important;
    }

    .khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__speed {
        height: 44px;
        min-height: 44px;
    }

    .khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__volume {
        position: relative;
    }

    .khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__volume input {
        background: rgba(12, 9, 6, 0.88);
        border-radius: 999px;
        bottom: calc(100% + 8px);
        display: block;
        height: 34px;
        left: 50%;
        opacity: 0;
        padding-inline: 9px;
        pointer-events: none;
        position: absolute;
        transform: translate3d(-50%, 4px, 0) scale(0.94);
        transition: opacity 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
        width: 88px;
        z-index: 4;
    }

    .khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__volume:hover input,
    .khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__volume:focus-within input,
    .khp-podcast.is-podcast-fullscreen .khp-podcast__actions .khp-podcast__volume.is-volume-open input {
        opacity: 0.96;
        pointer-events: auto;
        transform: translate3d(-50%, 0, 0) scale(1);
    }

    .khp-podcast.is-podcast-fullscreen .khp-podcast__up-next {
        opacity: 0.82;
    }

    .khp-podcast__up-next > div {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .khp-podcast.is-podcast-fullscreen .khp-podcast__shell {
        padding-inline: 15px;
    }

    .khp-podcast.is-podcast-fullscreen .khp-podcast__art {
        max-width: min(58vw, 230px);
    }

    .khp-podcast.is-podcast-fullscreen .khp-podcast__header h2 {
        font-size: 21px;
    }

    .khp-podcast.is-podcast-fullscreen .khp-podcast__timeline {
        margin-top: 22px;
    }

    .khp-podcast.is-podcast-fullscreen .khp-podcast__actions {
        gap: 6px;
    }

    .khp-podcast__up-next > header h3 {
        font-size: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .khp-podcast.is-podcast-fullscreen .khp-podcast__ambient::before,
    .khp-podcast.is-podcast-fullscreen .khp-podcast__ambient img,
    .khp-podcast.is-podcast-fullscreen .khp-podcast__ambient i {
        animation: none !important;
        will-change: auto;
    }

    .khp-podcast__ambient img,
    .khp-podcast__ambient i + i {
        display: none !important;
    }
}

@media (forced-colors: active) {
    .khp-podcast__fullscreen-exit,
    .khp-podcast__up-next .khp-podcast-item {
        border: 1px solid CanvasText;
    }
}