.hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    padding-top: 90px;
    overflow: hidden;
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 50% 42%,rgba(255,255,255,.14),transparent 32%),
        radial-gradient(circle at 70% 55%,rgba(0,102,180,.16),transparent 28%);
    z-index:3;
    pointer-events:none;
    animation:heroGlow 7s ease-in-out infinite alternate;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,rgba(5,11,18,.18),rgba(5,11,18,.58)),
        linear-gradient(90deg,rgba(5,11,18,.38),rgba(5,11,18,.12));
    z-index:2;
}

.hero-bg{
    position:absolute;
    inset:-20px;
    background:url("/img/hero/WP_20160411_009.jpg");
    background-size:cover;
    background-position:center;
    z-index:1;
    transition:transform .25s ease-out;
}

.hero-center-content{
    position:relative;
    z-index:4;
    width:90%;
    max-width:1200px;
    margin:auto;
}

.hero-logo{
    width:min(600px,90vw);
    margin:0 auto 48px;
    padding:22px 30px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(255,255,255,.95);
    border-radius:24px;
    border:1px solid rgba(255,255,255,.55);
    box-shadow:
        0 20px 50px rgba(0,0,0,.25);
    opacity:0;
    transform:translateY(-120vh);
}

.hero-logo img{
    width:100%;
    display:block;
}

.hero-logo:hover{
    transform:translateY(-8px) scale(1.04);
    box-shadow:
        0 35px 80px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.85);
}

.hero h1{
    font-size:clamp(3rem,4vw,4rem);
    font-weight:1000;
    line-height:1;
    letter-spacing:-2.5px;
    color:#fff;
    max-width:1050px;
    margin:0 auto 28px;
    text-shadow:
        0 4px 12px rgba(0,0,0,.38),
        0 14px 36px rgba(0,0,0,.28);
    opacity:0;
    transform:translateY(-120vh);
}

.hero h1:hover{
    transform:translateY(-3px);
    text-shadow:
        0 5px 16px rgba(0,0,0,.45),
        0 18px 45px rgba(0,0,0,.34);
}

.hero-description,
.hero p{
    max-width:780px;
    margin:auto;
    color:rgba(255,255,255,.90);
    font-size:1.08rem;
    line-height:1.75;
    text-shadow:0 3px 12px rgba(0,0,0,.32);
    opacity:0;
    transform:translateY(120vh);
}

.scroll-down{
    margin-top:2px;
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    color:#fff;
    font-size:.76rem;
    text-transform:uppercase;
    letter-spacing:2.4px;
    opacity:0;
    transform:translateY(120vh);
    transition:color .3s;
}

.scroll-down span{
    margin-top:2px;
    font-size:2rem;
    animation:arrow 1.6s infinite;
}

.scroll-down:hover{
    color:#d6c08b;
}

body.loaded .hero-logo{
    animation:heroTop .9s cubic-bezier(.22,1,.36,1) forwards;
}

body.loaded .hero h1{
    animation:heroTop .9s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay:.18s;
}

body.loaded .hero p{
    animation:heroBottom .9s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay:.45s;
}

body.loaded .scroll-down{
    animation:heroBottom .9s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay:.7s;
}

@keyframes arrow{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(8px);
    }
    100%{
        transform:translateY(0);
    }
}

@keyframes heroTop{
    from{
        opacity:0;
        transform:translateY(-90vh);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes heroBottom{
    from{
        opacity:0;
        transform:translateY(90vh);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes heroGlow{
    from{
        opacity:.45;
        transform:scale(1);
    }
    to{
        opacity:.75;
        transform:scale(1.08);
    }
}