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

.hero{

    position:relative;

    width:100%;

    height:85vh;

    overflow:hidden;

    background:#ffffff;

}


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

.hero-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center center;

    display:block;

    filter:blur(0);

    transition:filter 2.5s ease-in-out;

    will-change:filter;

}

.hero.blur-active .hero-video{

    filter:blur(15px);

}


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

.hero-logo{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    transform:translateY(-3vh);

    z-index:10;

    opacity:0;

    pointer-events:none;

}

.hero-logo img{

    width:clamp(340px,42vw,720px);

    height:auto;

    display:block;

}

/* ==========================================
   HERO LOGO ANIMATION
========================================== */

.hero-logo.animate{

    animation:logoFade 2s ease-in-out forwards;

}

@keyframes logoFade{

    from{

        opacity:0;

        transform:translateY(-3vh) scale(.97);

    }

    to{

        opacity:1;

        transform:translateY(-3vh) scale(1);

    }

}


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

.hero-tagline{

    position:absolute;

    left:50%;

    top:72%;

    transform:translateX(-50%);

    z-index:20;

    white-space:nowrap;

    color:#ffffff;

    font-family:Arial, Helvetica, sans-serif;

    font-size:clamp(34px,3vw,54px);

    font-weight:300;

    letter-spacing:.08em;

    text-align:center;

    pointer-events:none;

}

.hero-tagline span{

    display:inline-block;

    opacity:0;

    transform:translateX(20px);

}

.hero-tagline.show span{

    animation:letterReveal .7s ease forwards;

}

@keyframes letterReveal{

    from{

        opacity:0;

        transform:translateX(20px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


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


/* ==========================================
   COMPUTER
========================================== */

@media (min-width:1367px){

    .hero-logo img{

        width:clamp(400px,48vw,860px);

    }

}


/* ==========================================
   IPAD
========================================== */

@media (min-width:769px) and (max-width:1366px){

    .hero-logo img{

        width:clamp(380px,70vw,900px);

    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width:768px){

    .hero-logo{

        transform:translateY(-2vh);

    }

    .hero-logo img{

        width:clamp(320px,82vw,650px);

    }

    .hero-tagline{

        font-size:clamp(16px,4.2vw,22px);

        letter-spacing:.04em;

        top:71%;

    }

}