/* Progressive page entrance and in-view reveals. */
body.anime-detail-page.anime-motion-pending .anime-poster-wrap,
body.anime-detail-page.anime-motion-pending .anime-poster-actions,
body.anime-detail-page.anime-motion-pending .anime-poster-trailer,
body.anime-detail-page.anime-motion-pending .anime-hero-actions,
body.anime-detail-page.anime-motion-pending .anime-detail-heading,
body.anime-detail-page.anime-motion-pending .anime-summary-badges,
body.anime-detail-page.anime-motion-pending .anime-hero-facts,
body.anime-detail-page.anime-motion-pending .anime-info-pills,
body.anime-detail-page.anime-motion-pending .anime-description-card,
body.anime-detail-page.anime-motion-pending .theme-details-card,
body.anime-detail-page.anime-motion-pending .anime-episodes-head,
body.anime-detail-page.anime-motion-pending .episode-showcase-feature,
body.anime-detail-page.anime-motion-pending .episode-showcase-compact,
body.anime-detail-page.anime-motion-pending .anime-seasons-panel,
body.anime-detail-page.anime-motion-pending .anime-characters-head,
body.anime-detail-page.anime-motion-pending .anime-character-card,
body.anime-detail-page.anime-motion-pending .anime-comments-bottom,
body.anime-detail-page.anime-motion-pending .footer {
    opacity: 0;
    translate: 0 18px;
    filter: blur(4px);
}

body.anime-detail-page.anime-motion-ready .anime-page-reveal {
    opacity: 0;
    translate: 0 20px;
    filter: blur(4px);
    transition:
        opacity .72s cubic-bezier(.2, .75, .25, 1),
        translate .78s cubic-bezier(.16, 1, .3, 1),
        filter .68s ease;
    transition-delay: var(--page-reveal-delay, 0ms);
    will-change: opacity, translate, filter;
}

body.anime-detail-page.anime-motion-ready .anime-page-reveal.is-page-visible {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
}

body.anime-detail-page.anime-motion-ready .anime-poster-wrap.anime-page-reveal,
body.anime-detail-page.anime-motion-ready .anime-detail-heading.anime-page-reveal {
    translate: 0 26px;
}

body.anime-detail-page.anime-motion-ready .anime-poster-wrap.anime-page-reveal.is-page-visible,
body.anime-detail-page.anime-motion-ready .anime-detail-heading.anime-page-reveal.is-page-visible {
    translate: 0 0;
}

/* Preserve the trailer's own hover animation after its page-entry reveal. */
body.anime-detail-page.anime-motion-ready .anime-poster-trailer.anime-page-reveal {
    position: relative;
    overflow: hidden;
    background-color: rgba(255, 255, 255, .07);
    background-image: linear-gradient(
        110deg,
        transparent 0%,
        transparent 36%,
        rgba(var(--anime-accent-rgb), .22) 50%,
        transparent 64%,
        transparent 100%
    );
    background-position: 100% 0;
    background-size: 230% 100%;
    transition:
        opacity .72s cubic-bezier(.2, .75, .25, 1),
        translate .78s cubic-bezier(.16, 1, .3, 1),
        filter .26s ease,
        color .26s ease,
        border-color .26s ease,
        background-color .3s ease,
        background-position .52s cubic-bezier(.2, .75, .25, 1),
        box-shadow .3s ease;
}

body.anime-detail-page.anime-motion-ready .anime-poster-trailer.anime-page-reveal:hover,
body.anime-detail-page.anime-motion-ready .anime-poster-trailer.anime-page-reveal:focus-visible {
    color: #fff;
    border-color: rgba(var(--anime-accent-rgb), .42);
    background-color: rgba(var(--anime-accent-rgb), .13);
    background-position: 0 0;
    box-shadow: 0 8px 22px rgba(var(--anime-accent-rgb), .16), inset 0 1px 0 rgba(255, 255, 255, .06);
    filter: brightness(1.06);
}

body.anime-detail-page.anime-motion-ready .anime-poster-trailer.anime-page-reveal:active {
    background-color: rgba(var(--anime-accent-rgb), .18);
    box-shadow: 0 4px 12px rgba(var(--anime-accent-rgb), .12);
    filter: brightness(.97);
}

@media (prefers-reduced-motion: reduce) {
    body.anime-detail-page.anime-motion-pending *,
    body.anime-detail-page.anime-motion-ready .anime-page-reveal,
    body.anime-detail-page.anime-motion-ready .anime-page-reveal.is-page-visible {
        opacity: 1;
        translate: none;
        filter: none;
        transition: none;
    }
}