/*==================================================
  HERO.CSS
  Zen Spa Home
==================================================*/

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

.hero{

    position:relative;

    display:flex;
    align-items:center;

    min-height:100svh;

    overflow:hidden;

    isolation:isolate;

    background:#0b0b0b;

}

/*==============================================
  BACKGROUND
==============================================*/

.hero-bg{

    position:absolute;

    inset:0;

    z-index:-3;

    overflow:hidden;

}

.hero-video{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.08);

    will-change:transform;

}

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

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,.28) 0%,
        rgba(0,0,0,.45) 45%,
        rgba(0,0,0,.72) 100%
    );

}

/*==============================================
  GOLD GLOW
==============================================*/

.hero-gradient{

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at 50% 30%,
        rgba(185,145,93,.12),
        transparent 65%
    );

    mix-blend-mode:screen;

}

/*==============================================
  CONTAINER
==============================================*/

.hero .container{

    position:relative;

    z-index:10;

    width:100%;

}

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

.hero-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    max-width:760px;

    min-height:100svh;

    padding-top:120px;

    padding-bottom:120px;

}

/*==============================================
  SUBTITLE
==============================================*/

.hero-subtitle{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:28px;

    color:var(--color-primary);

    font-size:.85rem;

    font-weight:600;

    letter-spacing:.35em;

    text-transform:uppercase;

}

.hero-subtitle::before{

    content:"";

    width:60px;

    height:1px;

    background:currentColor;

}

/*==============================================
  TITLE
==============================================*/

.hero-title{

    margin:0;

    color:#ffffff;

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

    font-weight:300;

    line-height:.95;

    letter-spacing:-.04em;

}

.hero-title .char{

    display:inline-block;

    opacity:0;

    transform:translateY(120px) rotateX(-90deg);

    transform-origin:bottom;

    will-change:transform,opacity;

}

/*==============================================
  DESCRIPTION
==============================================*/

.hero-description{

    max-width:620px;

    margin-top:36px;

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

    font-size:1.12rem;

    line-height:2;

}

/*==============================================
  BUTTONS
==============================================*/

.hero-buttons{

    display:flex;

    gap:22px;

    margin-top:52px;

    flex-wrap:wrap;

}

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

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    z-index:20;

}

.hero-scroll span{

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

    font-size:.72rem;

    letter-spacing:.25em;

    text-transform:uppercase;

}

.hero-scroll-line{

    position:relative;

    width:1px;

    height:70px;

    background:rgba(255,255,255,.18);

    overflow:hidden;

}

.hero-scroll-dot{

    position:absolute;

    top:0;

    left:50%;

    width:5px;

    height:18px;

    border-radius:20px;

    background:var(--color-primary);

    transform:translateX(-50%);

    animation:scrollMove 2s infinite;

}

@keyframes scrollMove{

    0%{

        transform:translate(-50%,0);

        opacity:1;

    }

    100%{

        transform:translate(-50%,55px);

        opacity:0;

    }

}

/*==============================================
  BOTTOM FADE
==============================================*/

.hero::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:220px;

    background:linear-gradient(
        to top,
        #0b0b0b,
        transparent
    );

    pointer-events:none;

}

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

@media(max-width:1200px){

    .hero-content{

        max-width:680px;

    }

}

@media(max-width:992px){

    .hero{

        min-height:100dvh;

    }

    .hero-content{

        align-items:center;

        text-align:center;

    }

    .hero-subtitle{

        justify-content:center;

    }

    .hero-subtitle::after{

        content:"";

        width:60px;

        height:1px;

        background:currentColor;

    }

    .hero-description{

        margin-inline:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

}

@media(max-width:768px){

    .hero-content{

        padding-top:140px;

        padding-bottom:100px;

    }

    .hero-title{

        font-size:clamp(3rem,13vw,5rem);

    }

    .hero-description{

        font-size:1rem;

        line-height:1.8;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-scroll{

        bottom:25px;

    }

}

@media(max-width:576px){

    .hero-subtitle{

        font-size:.72rem;

        letter-spacing:.22em;

    }

    .hero-title{

        font-size:clamp(2.7rem,12vw,4rem);

    }

    .hero-description{

        margin-top:24px;

    }

}