/* The movie page as a tier wall across the whole window (see script.js): the
   usual title and intro, then a row of quietly framed posters per tier, with
   the notes floating over the page. Applies once the script has set
   body.tierlist; otherwise the page is the plain written list. */
body.tierlist {
    --tier-S: var(--yellow-ink);
    --tier-A: var(--pink-ink);
    --tier-B: var(--blue-ink);
    --tier-C: color-mix(in srgb, var(--pink-ink) 50%, var(--blue-ink));
    --tier-D: var(--secondary);
    --poster-w: 76px;
    --poster-h: 112px;
    --shade: rgba(60, 40, 10, 0.16);
    /* Hover titles near the edge mustn't widen the page. */
    overflow-x: clip;
}

/* No contents bar here, nor a "back" footer: the wall is the navigation and
   the header still links to Writing. */
body.tierlist nav.toc,
body.tierlist .toc,
body.tierlist .post-footer,
body.tierlist .top-link {
    display: none;
}

/* The whole window: the header floats over the page, fading into the paper. */
body.tierlist .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    max-width: none;
    padding: 26px 32px 30px;
    background: linear-gradient(var(--theme) 50%, color-mix(in srgb, var(--theme) 0%, transparent));
    pointer-events: none;
}

body.tierlist .site-header nav {
    pointer-events: auto;
}

body.tierlist .main {
    max-width: none;
    padding: 84px 32px 64px;
}

body.tierlist .post-single {
    display: block;
}

body.tierlist .post-header,
body.tierlist .post-content > :not(.tier-wall) {
    max-width: var(--main-width);
    margin-left: auto;
    margin-right: auto;
}

.tier-wall {
    width: fit-content;
    max-width: 100%;
    margin: 36px auto 0;
}

/* A row: the tier letter, then its posters. */
.tier {
    --tier: var(--tier-B);
    display: grid;
    grid-template-columns: 44px auto;
    gap: 0 22px;
    align-items: start;
    padding: 12px 0;
}

.tier[data-tier="S"] { --tier: var(--tier-S); --wash: var(--yellow); }
.tier[data-tier="A"] { --tier: var(--tier-A); --wash: var(--pink); }
.tier[data-tier="B"] { --tier: var(--tier-B); --wash: var(--blue); }
.tier[data-tier="C"] { --tier: var(--tier-C); --wash: color-mix(in srgb, var(--pink) 50%, var(--blue)); }
.tier[data-tier="D"] { --tier: var(--tier-D); --wash: var(--gray); }

.post-content .tier-label {
    margin: 0;
    font-size: 36px;
    line-height: calc(var(--poster-h) + 12px);
    font-weight: bold;
    text-align: center;
    color: var(--tier);
}

.tier-posters {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 12px;
}

/* A poster in a thin dark frame with a narrow paper mat. Muted at rest; hover
   lifts it to full color and shows its title. */
.film {
    position: relative;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.film:focus-visible {
    outline: none;
}

.film-frame {
    display: block;
    padding: 4px;
    border: 2px solid rgb(44, 34, 28);
    border-radius: 2px;
    background: var(--entry);
    box-shadow: 0 1px 2px var(--shade), 0 5px 12px -2px var(--shade);
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease;
}

.post-content .film img {
    display: block;
    width: var(--poster-w);
    height: var(--poster-h);
    margin: 0;
    object-fit: cover;
    mix-blend-mode: normal;
    background: color-mix(in srgb, var(--wash) 25%, var(--theme));
    filter: saturate(0.6) sepia(0.1);
    opacity: 0;
    transition: opacity 0.4s ease, filter 0.3s ease;
}

.film.loaded img,
.film.no-poster img {
    opacity: 0.92;
}

.film:focus-visible .film-frame,
.film[aria-pressed="true"] .film-frame {
    transform: translateY(-3px);
    box-shadow: 0 3px 6px var(--shade), 0 12px 22px -4px rgba(60, 40, 10, 0.22);
}

@media (hover: hover) {
    .film:hover .film-frame {
        transform: translateY(-3px);
        box-shadow: 0 3px 6px var(--shade), 0 12px 22px -4px rgba(60, 40, 10, 0.22);
    }
}

.film:focus-visible img,
.film[aria-pressed="true"] img {
    opacity: 1;
    filter: none;
}

@media (hover: hover) {
    .film:hover img {
        opacity: 1;
        filter: none;
    }
}

/* The open film keeps a pink rule under it, like the site's links. */
.film::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -8px;
    height: 2px;
    border-radius: 1px;
    background: var(--pink);
    transform: scaleX(0);
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.film[aria-pressed="true"]::after,
.film:focus-visible::after {
    transform: scaleX(1);
}

/* Title on hover, as a small dark tag under the poster. */
.film-caption {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    z-index: 2;
    width: max-content;
    max-width: 170px;
    padding: 4px 9px;
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
    color: var(--theme);
    background: rgba(30, 30, 30, 0.86);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -3px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.film:focus-visible .film-caption {
    opacity: 1;
    transform: translate(-50%, 0);
    transition-delay: 0.1s;
}

@media (hover: hover) {
    .film:hover .film-caption {
        opacity: 1;
        transform: translate(-50%, 0);
        transition-delay: 0.1s;
    }
}

.film[aria-pressed="true"] .film-caption {
    opacity: 0;
}

/* No hover on touch screens: tapping opens the notes, which carry the title. */
@media (hover: none) {
    .film:not(.no-poster) .film-caption {
        display: none;
    }
}

/* Missing poster: the title, set on the mat. */
.film.no-poster .film-caption {
    top: 50%;
    width: calc(var(--poster-w) - 6px);
    padding: 0;
    font-size: 11px;
    color: var(--primary);
    background: none;
    opacity: 1;
    transform: translate(-50%, -50%);
}

/* ---- The panel: one film's notes ---- */
.film-panel {
    z-index: 20;
    color: var(--primary);
    background: var(--theme);
    overscroll-behavior: contain;
}

.panel-tier {
    margin: 0 0 2px;
    padding-top: 4px;
    font-size: var(--footersize);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tier);
}

.panel-title {
    margin: 0;
    font-size: var(--step-3);
    line-height: 1.25;
    scroll-margin-top: 48px;
}

/* A bigger poster beside the tier and title. */
.panel-head {
    display: grid;
    grid-template-columns: 110px 1fr;
    grid-template-rows: auto 1fr;
    gap: 2px 18px;
    align-items: start;
    margin-bottom: 16px;
}

.panel-poster {
    grid-row: 1 / 3;
    width: 110px;
    height: auto;
    margin: 0;
    border-radius: 3px;
    box-shadow: 0 2px 4px var(--shade), 0 8px 20px rgba(60, 40, 10, 0.12);
}

.film-panel .panel-body {
    font-size: var(--step-0);
    line-height: 1.55;
}

.film-panel p {
    margin: 0 0 12px;
}

.film-panel .panel-inner > p a {
    box-shadow: 0 1px 0 var(--pink);
}

/* Swapping films: the new notes settle in. */
.panel-inner {
    animation: settle 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.panel-grip {
    display: none;
}

.panel-close {
    display: block;
    float: right;
    margin: -6px 0 0 12px;
    padding: 2px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--footersize);
    color: var(--secondary);
    cursor: pointer;
}

@media (hover: hover) {
    .panel-close:hover {
        color: var(--primary);
    }
}

/* Wide screens: the notes float over the right of the page, and the page
   narrows to the space left of them, so the wall rewraps and no poster is
   ever under the notes. */
@media (min-width: 1100px) {
    body.tierlist {
        --panel-w: 420px;
    }

    body.tierlist .post-single {
        transition: padding-right 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    .panel-open .post-single {
        padding-right: calc(var(--panel-w) + 32px);
    }

    .film-panel {
        position: fixed;
        top: 84px;
        right: 32px;
        width: var(--panel-w);
        max-height: calc(100vh - 116px);
        overflow-x: hidden;
        overflow-y: auto;
        padding: 24px 28px 14px;
        border: 1px solid var(--border);
        border-radius: 4px;
        box-shadow: 0 2px 4px var(--shade), 0 18px 40px -8px rgba(60, 40, 10, 0.22);
        visibility: hidden;
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.35s;
    }

    .panel-open .film-panel {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    .panel-backdrop {
        display: none;
    }
}

/* Narrower screens: notes come up in a sheet from the bottom. */
@media (max-width: 1099px) {
    body.tierlist .site-header {
        padding: 16px var(--gap) 24px;
    }

    body.tierlist .main {
        padding: 64px var(--gap) 48px;
    }

    .film-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 76vh;
        overflow-y: auto;
        padding: 10px 24px 32px;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 30px var(--shade);
        transform: translateY(105%);
        visibility: hidden;
        transition: transform 0.38s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.38s;
    }

    .panel-open .film-panel {
        transform: none;
        visibility: visible;
        transition: transform 0.38s cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    .film-panel .panel-inner,
    .film-panel .panel-close {
        max-width: 640px;
    }

    .panel-backdrop {
        position: fixed;
        inset: 0;
        z-index: 19;
        background: rgba(30, 25, 15, 0.28);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .panel-open .panel-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .panel-grip {
        display: block;
        width: 40px;
        height: 4px;
        margin: 0 auto 10px;
        border-radius: 2px;
        background: var(--border);
    }

    .panel-close {
        float: none;
        margin: 0 0 4px auto;
    }
}

@media (max-width: 560px) {
    body.tierlist {
        --poster-w: 50px;
        --poster-h: 74px;
    }

    .tier {
        grid-template-columns: 26px auto;
        gap: 0 12px;
    }

    .post-content .tier-label {
        font-size: 24px;
    }

    .tier-posters {
        gap: 10px 8px;
    }

    .film-frame {
        padding: 3px;
        border-width: 1.5px;
    }

    .panel-head {
        grid-template-columns: 84px 1fr;
        gap: 2px 14px;
    }

    .panel-poster {
        width: 84px;
    }

    .panel-title {
        font-size: var(--step-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.tierlist .post-single,
    .film-frame,
    .post-content .film img,
    .film::after,
    .film-caption,
    .film-panel,
    .panel-backdrop {
        transition: none !important;
    }

    .film:focus-visible .film-frame,
    .film[aria-pressed="true"] .film-frame {
        transform: none;
    }

    @media (hover: hover) {
        .film:hover .film-frame {
            transform: none;
        }
    }

    .panel-inner {
        animation: none;
    }
}

/* Each review carries when it was written; the page itself shows no date. */
body.tierlist .post-header .post-meta {
    display: none;
}

.panel-written {
    margin: 4px 0 0;
    font-size: var(--footersize);
    font-style: italic;
    color: var(--secondary);
}