.hero-mobile-heading, .hero-mobile-dots { display: none; }

@media (max-width: 700px) {
    body.home-page {
        --hero-page-background: #0d0d0d;
        background: var(--hero-page-background);
    }
    body.home-page #hero-section {
        min-height: clamp(340px, 95vw, 520px) !important;
        margin-bottom: 22px !important;
        background: var(--hero-page-background) !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    /* Fade both artwork layers out before the edge, including during slide changes. */
    body.home-page #hero-section .hero-media {
        -webkit-mask-image: linear-gradient(180deg, #000 40%, rgba(0,0,0,.9) 57%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.12) 87%, transparent 96%);
        mask-image: linear-gradient(180deg, #000 40%, rgba(0,0,0,.9) 57%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.12) 87%, transparent 96%);
    }

    body.home-page #hero-section .hero-backdrop {
        background-position: 100% 35%;
        background-size: cover;
        filter: saturate(1.02) !important;
    }
    body.home-page #hero-section .hero-backdrop.is-panning {
        animation: heroMobilePan 16s linear alternate infinite;
    }
    /* The artwork travels to the right within its crop; no empty edges appear. */
    @keyframes heroMobilePan {
        from { background-position: 100% 35%; }
        to { background-position: 0% 35%; }
    }
    body.home-page #hero-section .hero-backdrop::after,
    body.home-page #hero-section .hero-inner::before { content: none !important; }
    body.home-page #hero-section .hero-mask {
        background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.04) 35%, rgba(13,13,13,.24) 55%, rgba(13,13,13,.6) 72%, rgba(13,13,13,.94) 88%, var(--hero-page-background) 96%) !important;
    }
    body.home-page #hero-section .hero-inner {
        width: 100% !important;
        max-width: none !important;
        min-height: inherit;
        margin: 0 !important;
        padding: 154px 22px 12px !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(28px, auto) 28px !important;
        grid-template-areas: "mobile-title mobile-title" "facts themes" "dots dots" !important;
        justify-items: start !important;
        align-content: end !important;
        gap: 16px 14px !important;
        text-align: left;
    }
    body.home-page #hero-section .hero-title,
    body.home-page #hero-section .hero-title-logo,
    body.home-page #hero-section .hero-actions { display: none !important; }
    body.home-page #hero-section .hero-mobile-heading {
        grid-area: mobile-title;
        display: block;
        width: 100%;
        margin: 0;
        font-size: clamp(26px, 7.5vw, 38px);
        font-weight: 800;
        line-height: 1.12;
        letter-spacing: -.025em;
        text-transform: uppercase;
        text-shadow: 0 3px 18px rgba(0,0,0,.5);
    }
    .hero-mobile-heading a {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        overflow-wrap: anywhere;
        color: #fff;
        text-decoration: none;
    }
    #hero-section .hero-inner.is-enter .hero-mobile-heading { animation: heroReveal .45s ease both; }
    #hero-section .hero-inner.is-leave .hero-mobile-heading { animation: heroContentLeave .38s ease both; }
    body.home-page #hero-section .hero-facts {
        margin: 0 !important;
        gap: 0 !important;
        min-height: 28px !important;
        justify-content: flex-start !important;
        align-self: center;
    }
    body.home-page #hero-section .hero-facts .hero-fact:not(.is-score) { display: none !important; }
    body.home-page #hero-section .hero-facts .hero-fact.is-score {
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        font-size: 16px !important;
        gap: 8px;
    }
    body.home-page #hero-section .hero-fact-icon { width: 17px; height: 17px; flex-basis: 17px; }
    body.home-page #hero-section .hero-themes {
        align-self: center;
        justify-content: flex-start !important;
        flex-wrap: nowrap;
        gap: 9px !important;
        width: 100%;
        margin: 0 !important;
        -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent);
        mask-image: linear-gradient(90deg, #000 94%, transparent);
    }
    body.home-page #hero-section .hero-theme {
        flex: 0 0 auto;
        padding: 0 !important;
        font-size: clamp(9px, 2.7vw, 12px) !important;
        font-weight: 700 !important;
        letter-spacing: .025em;
        text-transform: uppercase;
        color: #b5b5bc !important;
    }
    body.home-page #hero-section .hero-theme:not(:last-child)::after { margin-left: 9px; }
    body.home-page #hero-section .hero-mobile-dots:not([hidden]) {
        grid-area: dots;
        display: flex;
        align-items: center;
        gap: 2px;
        max-width: 100%;
        margin-left: -7px;
    }
    .hero-mobile-dots button {
        display: grid;
        place-items: center;
        width: 24px;
        height: 28px;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        touch-action: manipulation;
    }
    .hero-mobile-dots button::before {
        content: '';
        width: 9px;
        height: 3px;
        border-radius: 999px;
        background: #535354;
        transition: width .25s ease, background .25s ease;
    }
    .hero-mobile-dots button[aria-current="true"] { width: 34px; }
    .hero-mobile-dots button[aria-current="true"]::before { width: 25px; background: #f5f5f5; }
    #hero-section :is(.hero-mobile-heading a, .hero-mobile-dots button):focus-visible {
        outline: 2px solid #b4c1ff;
        outline-offset: 3px;
        border-radius: 4px;
    }
    body.home-page.anime-preview-open #hero-section .hero-backdrop.is-panning,
    body.home-page #hero-section.is-motion-paused .hero-backdrop,
    body.home-page #hero-section.is-swipe-dragging .hero-backdrop { animation-play-state: paused; }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
    body.home-page #hero-section .hero-backdrop.is-panning { animation: none; background-position: center 35%; }
    .hero-mobile-dots button::before { transition: none; }
    #hero-section .hero-inner.is-enter .hero-mobile-heading,
    #hero-section .hero-inner.is-leave .hero-mobile-heading { animation: none; }
}