/**
 * Home Hero component styles
 *
 * @package MBM_Theme
 * @since 1.0.0
 */

.home-hero {
    position: relative;
    overflow: visible;
    padding: 2rem 0 3rem;
    background-color: var(--la-white);
    --home-hero-zoom: 1;
    --home-hero-content-opacity: 1;
    --home-hero-content-y: 0px;
    width: 100%;
    max-width: 100%;
}

.home-hero__clouds-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    --home-hero-clouds-scale: 1;
}

/* Outer stays full-bleed; only this layer scales for scroll zoom (avoids shrinking the viewport fill) */
.home-hero__clouds-bg-zoom {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: scale(var(--home-hero-clouds-scale, 1));
    transform-origin: center center;
    will-change: transform;
}

.home-hero__clouds-bg-video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
}

.home-hero__clouds-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: var(--home-hero-clouds-bg-image, none);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.home-hero--invert-clouds-video .home-hero__clouds-bg-video,
.home-hero__clouds-bg--invert-video .home-hero__clouds-bg-video {
    transform: scaleX(-1);
    transform-origin: center;
}

/* Fixed under #main so it is not clipped by pinned hero transforms; JS moves node before #main */
body.has-home-hero-overlay #main {
    position: relative;
    z-index: 2;
}

body.has-home-hero-overlay .home-hero__clouds-bg.is-viewport-fixed {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 120vh;
    height: 120svh;
    max-width: none;
    z-index: 0;
    visibility: visible;
    opacity: 1;
    clip-path: none;
    pointer-events: none;
}

/* Avoid display:none + full ScrollTrigger.refresh (was janky with Lenis); hide without tearing the layer */
body.has-home-hero-overlay .home-hero__clouds-bg.is-viewport-released {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100svh !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip-path: inset(100%) !important;
}

.home-hero--has-clouds-bg .home-hero__clouds {
    display: none;
}

.home-hero.bg-white { background-color: var(--la-white); }
.home-hero.bg-whitesmoke { background-color: var(--la-white); }
.home-hero.bg-black { background-color: var(--la-black); color: var(--la-white); }
.home-hero.bg-xanthous { background-color: var(--la-gold-40); }
.home-hero.bg-light_cyan { background-color: var(--la-blue-40); }
.home-hero.bg-cerulean { background-color: var(--la-blue-60); color: var(--la-white); }
.home-hero.bg-prussian_blue { background-color: var(--la-blue-80); color: var(--la-white); }
.home-hero.bg-blue_charcoal { background-color: var(--la-blue); color: var(--la-white); }

.home-hero__layout {
    min-height: 70vh;
    display: flex;
    align-items: center;
    opacity: var(--home-hero-content-opacity);
    transform: translate3d(0, var(--home-hero-content-y), 0);
    transition: opacity 0.2s linear;
}

body.has-home-hero-overlay .home-hero {
    min-height: 100vh;
    padding-top: 7.5rem;
    background-color: transparent !important;
}

body.has-home-hero-overlay .home-hero__layout {
    min-height: 100vh;
}

.home-hero__left {
    position: relative;
    z-index: 4;
}

.home-hero__sticky {
    position: relative;
}

.home-hero__clouds {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.home-hero__cloud {
    position: absolute;
    left: 100%;
    top: 46%;
    width: clamp(180px, 19vw, 440px);
    max-width: 34vw;
    height: auto;
    opacity: 0;
    filter: saturate(1.02);
    will-change: transform, opacity;
}

.home-hero__zoom-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: transparent;
    background-image: var(--home-hero-bg-image, none);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transform: scale(var(--home-hero-zoom));
    will-change: transform;
}

.home-hero__zoom-layer-picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.home-hero__zoom-layer-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
}

.home-hero--zoom-layer-img .home-hero__zoom-layer {
    background-image: none !important;
}


@media (min-width: 1440px) {
    .home-hero__zoom-layer {
        transform-origin: 76% 48%;
    }
}

@media (max-width: 1440px) {
    .home-hero__zoom-layer {
        transform-origin: 85% 55%;
    }
}

.home-hero__sticky > .container {
    position: relative;
    z-index: 3;
    max-width: 1530px;
}

body.has-home-hero-overlay .home-hero.is-hero-zoom-scene {
    position: relative;
    z-index: 2;
    background-color: transparent;
    height: 100vh;
    min-height: 100vh;
    padding: 0;
}

body.has-home-hero-overlay .home-hero.is-hero-zoom-scene .home-hero__sticky {
    position: absolute;
    inset: 0;
    height: 100vh;
    overflow: hidden;
}

/*
 * Zoom scene: JS scrubs --home-hero-content-* on .home-hero; layout reads those via var().
 * No CSS transition here (would fight scrub and flicker title/widget).
 */
body.has-home-hero-overlay .home-hero.is-hero-zoom-scene .home-hero__layout {
    transition: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.home-hero__title {
    margin: 0 0 1rem;
    font-size: clamp(1.8rem, 3.8vw, 4rem);
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--la-blue);
}

.home-hero__text {
    margin: 0 0 5rem;
    max-width: 620px;
    font-size: 1.05rem;
    line-height: 1.45;
}

.home-hero__widget {
    max-width: 700px;
    width: 100%;
}

@media (max-width: 991px) {
    /*
     * Safari iOS: 100dvh tracks the dynamic chrome bar and reflows when scroll direction reverses.
     * 100svh (small viewport) stays stable so the page does not "jump" in height with the URL bar.
     */
    :root {
        --mbm-stable-vh: 120vh;
    }

    @supports (height: 120svh) {
        :root {
            --mbm-stable-vh: 110svh;
        }
    }

    @media (max-width: 360px) {
        :root {
            --mbm-stable-vh: 118svh;
        }
    }

    .home-hero {
        padding: 0;
        min-height: var(--mbm-stable-vh);
    }

    .home-hero__zoom-layer {
        background-image: var(--home-hero-bg-image-mobile, var(--home-hero-bg-image, none));
        background-position: center 40%;
        transform-origin: 50% 55%;
    }

    .home-hero--zoom-layer-img .home-hero__zoom-layer-img {
        object-position: center 40%;
    }

    body.has-home-hero-overlay .home-hero {
        min-height: var(--mbm-stable-vh);
        padding-top: 0;
    }

    .home-hero__layout {
        min-height: var(--mbm-stable-vh);
        display: flex;
        align-items: stretch;
    }

    body.has-home-hero-overlay .home-hero__layout {
        min-height: var(--mbm-stable-vh);
    }

    .home-hero__left {
        width: 100%;
        min-height: var(--mbm-stable-vh);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 8rem;
    }

    .home-hero__title {
        text-align: center;
        margin: 0 0 .5rem;
    }

    .home-hero__text {
        margin-bottom: 0;
        text-align: center;
        font-size: 1.05rem;
    }

    .charter-search-widget__actions {
        left: 0;
        margin: 0 auto;
        bottom: 9rem;
    }

    .home-hero__text {
        margin-bottom: 0;
    }

    .home-hero__widget {
        margin-top: auto;
        margin-bottom: 0;
        font-size: .9rem;
    }

    .home-hero__clouds {
        display: none;
    }

    body.has-home-hero-overlay .home-hero.is-hero-zoom-scene {
        height: var(--mbm-stable-vh);
        min-height: var(--mbm-stable-vh);
    }

    body.has-home-hero-overlay .home-hero.is-hero-zoom-scene .home-hero__sticky {
        height: var(--mbm-stable-vh);
    }

    /* Reduce compositor churn during scroll-driven zoom on touch. */
    .home-hero__zoom-layer,
    .home-hero__clouds-bg-zoom {
        will-change: auto;
    }
}