/* Hero polaroid — overlaps the story block; parallax gives depth on scroll.
 * On scroll the green story block (higher z-index) rises and the polaroid
 * lags behind it (slower parallax) so the photo tucks underneath the green.
 * The hero background is a separate oversized layer that drifts on scroll. */

.banner {
    position: relative;
    z-index: 1;
    /* must stay visible so the polaroid can overlap the green section below */
    overflow: visible;
}

/* --- Hero parallax background layer --- */
.banner__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.banner__bg-media {
    position: absolute;
    top: -16%;
    left: 0;
    right: 0;
    height: 132%;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.banner .container {
    position: relative;
    z-index: 1;
}

.banner__img {
    position: relative;
    z-index: 4;
    margin-bottom: -280px;
    will-change: transform;
}

.banner__img img {
    width: min(92vw, 360px);
    max-width: none;
    height: auto;
    display: block;
}

@media (max-width: 991.98px) {
    .video-intro {
        position: relative;
        z-index: 2;
        margin-top: -80px;
    }

    .banner__img {
        z-index: 3;
    }
}

@media (min-width: 992px) {
    .banner__img {
        margin-bottom: 0;
        margin-right: 10px;
        padding-left: 24px;
        /* below the green story block so it can slide underneath on scroll */
        z-index: 1;
    }

    .banner__img img {
        width: 420px;
        transform: rotate(-5deg);
    }

    .video-intro {
        position: relative;
        /* above the polaroid so the photo tucks under it as you scroll */
        z-index: 3;
        margin-top: -180px;
    }

    .video-intro__inner {
        padding-top: 64px;
    }
}

@media (min-width: 1200px) {
    .banner__img img {
        width: 460px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .banner__bg-media,
    .banner__img {
        transform: none !important;
        will-change: auto;
    }
}