/* Background layer for the existing V3 episode page. */
body:has(.v3-episode-background) {
    isolation: isolate;
    background: #0f1014;
}

body:has(.v3-episode-background) .v3-main {
    position: relative;
    overflow: visible;
    isolation: isolate;
}

.v3-episode-background {
    position: fixed;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: #071316;
}

.v3-episode-background img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--episode-bg-x, 50%) var(--episode-bg-y, 27%);
    transform: scale(var(--episode-bg-zoom, 1.015));
    filter: saturate(.76) brightness(.58);
    transform-origin: center;
}

.v3-episode-background.is-default img {
    filter: hue-rotate(148deg) saturate(.72) brightness(.62);
}

.v3-episode-background::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(180deg, rgba(3, 17, 20, .24) 0%, rgba(3, 17, 20, .48) 26%, rgba(15, 16, 20, .86) 73%, #0f1014 100%),
        linear-gradient(90deg, rgba(4, 13, 18, .32), rgba(4, 13, 18, .04) 54%, rgba(4, 13, 18, .3));
}

@media (max-width: 760px) {
    .v3-episode-background img {
        object-position: var(--episode-bg-mobile-x, 59%) var(--episode-bg-mobile-y, 0%);
        transform: scale(var(--episode-bg-mobile-zoom, 1.015));
    }
}
