/*==================================================
    MIRLO FILMS
    HERO
==================================================*/


/*==================================================
    HERO
==================================================*/

.hero{

    position:relative;

    width:100%;

    height:100vh;

    min-height:720px;

    overflow:hidden;

    background:#000;

}


/*==================================================
    HERO SLIDER
==================================================*/

.hero-slider{

    position:absolute;

    inset:0;

    overflow:hidden;

    contain:layout paint;

}


/*==================================================
    HERO LAYERS
==================================================*/

.hero-layer{

    position:absolute;

    inset:0;

    opacity:0;

    transition:
        opacity 2.5s ease-in-out;

    z-index:1;

}

.hero-layer.is-visible{

    opacity:1;

    z-index:2;

}


/*==================================================
    HERO IMAGE
==================================================*/

.hero-layer img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    user-select:none;

    -webkit-user-drag:none;

    pointer-events:none;

    transform:scale(1);

    transition:

        transform 9s linear;

    will-change:

        transform,

        opacity;

}


/*==================================================
    HERO OVERLAY
==================================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            180deg,

            rgba(0,0,0,.24) 0%,

            rgba(0,0,0,.10) 35%,

            rgba(0,0,0,.45) 100%

        );

    z-index:2;

}


.hero .container{

    position:relative;

    z-index:3;

    height:100%;

}


/*==================================================
    HERO CONTENT
==================================================*/

.hero-content{

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    max-width:760px;

    color:#fff;

}

.hero-subtitle{

    margin-bottom:24px;

    font-family:"Montserrat",sans-serif;

    font-size:.82rem;

    font-weight:500;

    letter-spacing:.35em;

    text-transform:uppercase;

    color:rgba(255,255,255,.82);

}

.hero-title{

    margin-bottom:30px;

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(2.8rem,5vw,4.6rem);

    font-weight:400;

    line-height:1.08;

    letter-spacing:-.02em;

    color:#FFFFFF;

    text-shadow:

        0 2px 10px rgba(0,0,0,.18),

        0 6px 30px rgba(0,0,0,.20);

}

.hero-description{

    max-width:620px;

    margin-bottom:48px;

    font-family:"Montserrat",sans-serif;

    font-size:1.05rem;

    line-height:1.9;

    color:rgba(255,255,255,.94);

    text-shadow:

        0 2px 8px rgba(0,0,0,.18);

}

.hero-buttons{

    display:flex;

    gap:20px;

}


/*==================================================
    SCROLL DOWN
==================================================*/

.scroll-down{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    width:36px;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    border:2px solid rgba(255,255,255,.65);

    border-radius:30px;

    text-decoration:none;

    z-index:5;

}

.scroll-down span{

    width:6px;

    height:10px;

    margin-top:10px;

    border-radius:10px;

    background:#fff;

    animation:heroScroll 2.2s infinite;

}

@keyframes heroScroll{

    0%{

        opacity:0;

        transform:translateY(0);

    }

    30%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateY(24px);

    }

}


/*==================================================
    PERFORMANCE
==================================================*/

.hero{

    user-select:none;

    -webkit-user-select:none;

}

.hero-content{

    animation:

        heroContent

        1.4s ease;

}

@keyframes heroContent{

    from{

        opacity:0;

        transform:

            translateY(20px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}


/*==================================================
    HERO RESPONSIVE
==================================================*/

@media (max-width:900px){

    .hero{

        min-height:100svh;

        height:auto;

    }

    .hero .container{

        width:90%;

    }

    .hero-content{

        max-width:100%;

        justify-content:center;

        align-items:flex-start;

    }

    .hero-subtitle{

        margin-bottom:18px;

        font-size:.72rem;

        letter-spacing:.28em;

    }

    .hero-title{

        margin-bottom:24px;

        font-size:clamp(2.8rem,11vw,4rem);

        line-height:1.08;

    }

    .hero-description{

        max-width:100%;

        margin-bottom:36px;

        font-size:1rem;

        line-height:1.8;

    }

    .hero-buttons{

        width:100%;

    }

    .hero-buttons .btn{

        width:100%;

        min-width:0;

    }

    .scroll-down{

        bottom:calc(78px + env(safe-area-inset-bottom));

    }

    .hero-overlay{

        background:

            linear-gradient(

                180deg,

                rgba(0,0,0,.38) 0%,

                rgba(0,0,0,.20) 35%,

                rgba(0,0,0,.58) 100%

            );

    }

}