/* Uses the existing hero slide renderer, without a slider viewport. */
.banner.banner--scrollReveal {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    isolation: isolate;
    padding-bottom: 0;
    --scroll-reveal-top: 0px;
}
/* Only a persistently fixed header needs a gap. Smart and inset headers
   float over the image; ordinary headers leave with the page. */
[data-plot-customizer-header-type="sticky"]:not([data-plot-customizer-header-padding="inset"]):not(.overlay-navbar) .banner--scrollReveal {
    --scroll-reveal-top: max(0px, calc(var(--navbar-height, 0px) + var(--notification-height, 0px) - var(--plot-banner-edge-overlap, 0px)));
}
.banner--scrollReveal .bannerCarouselWrap,
.banner--scrollReveal .bannerCarousel {
    height: auto;
    overflow: visible;
}
.banner--scrollReveal .bannerCarousel__slide {
    position: sticky;
    top: var(--scroll-reveal-top);
    height: auto;
    min-height: max(0px, calc(100svh - var(--scroll-reveal-top)));
    box-sizing: border-box;
    padding-bottom: var(--plot-hero-ticket-clearance, 0px);
    justify-content: flex-end;
    background: var(--backgroundColor, #111);
    isolation: isolate;
    scroll-margin-top: var(--scroll-reveal-top);
}
.banner--scrollReveal .banner__mediaWrap,
.banner--scrollReveal .banner__mediaWrap.active-grow {
    transform: none;
    transition: none;
}
.banner--scrollReveal .banner__contentWrap {
    position: relative;
    flex: 0 0 auto;
    margin-top: auto;
    z-index: 2;
}
.banner--scrollReveal .bannerCarousel__slide .psLazyLoadFrame::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 35%, rgba(0,0,0,.75));
    z-index: 1;
    pointer-events: none;
}
.banner--scrollReveal .bannerCarousel__slide:not(:has(.banner__contentWrap)) .psLazyLoadFrame::before { display: none; }
/* Long translated text and large typography must remain fully scrollable. */
.banner--scrollReveal .bannerCarousel__slide.scrollRevealTall { position: relative; top: auto; }
@media (prefers-reduced-motion: reduce) {
    .banner--scrollReveal .bannerCarousel__slide { position: relative; top: auto; }
}