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

.hero{

position:relative;
height:100vh;
min-height:760px;
overflow:hidden;

}

.hero-image{

position:absolute;
inset:0;
z-index:1;

}

.hero-image img{

    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;

    transform:scale(1.12);

    animation:heroZoom 14s cubic-bezier(.22,.61,.36,1) forwards;

    will-change:transform;

}

.hero-overlay{

position:absolute;
inset:0;
z-index:2;

background:

linear-gradient(
180deg,
rgba(8,28,44,.45) 0%,
rgba(8,28,44,.18) 35%,
rgba(8,28,44,.28) 100%
);

}

.hero-content{

position:relative;
z-index:5;

height:100%;

display:flex;
flex-direction:column;
justify-content:center;

max-width:700px;

color:#fff;

padding-top:80px;

}

.hero-small{

margin-bottom:26px;

font-size:13px;

letter-spacing:4px;

text-transform:uppercase;

color:#fff;

opacity:.9;

}

.hero h1{

font-size:88px;

font-weight:600;

line-height:1;

margin-bottom:28px;

color:#fff;

}

.hero p{

font-size:19px;

line-height:1.9;

max-width:620px;

margin-bottom:45px;

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

}

.hero-buttons{

display:flex;

align-items:center;

gap:28px;

}

.hero-link{

font-size:13px;

letter-spacing:2px;

font-weight:600;

text-transform:uppercase;

color:#fff;

}

.hero-link:hover{

opacity:.75;

}

.scroll-indicator{

position:absolute;

left:50%;

bottom:40px;

transform:translateX(-50%);

z-index:20;

font-size:12px;

letter-spacing:3px;

text-transform:uppercase;

color:#fff;

opacity:.75;

}

@keyframes heroZoom{

    from{

        transform:scale(1.12);

    }

    to{

        transform:scale(1);

    }

}

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

.hero-small,
.hero h1,
.hero p,
.hero-buttons,
.scroll-indicator{

    opacity:0;

    transform:translateY(28px);

    animation:heroReveal 1s ease forwards;

}

.hero-small{

    animation-delay:.35s;

}

.hero h1{

    animation-delay:.60s;

}

.hero p{

    animation-delay:.90s;

}

.hero-buttons{

    animation-delay:1.20s;

}

.scroll-indicator{

    animation-delay:1.60s;

}

@keyframes heroReveal{

    from{

        opacity:0;

        transform:translateY(28px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}