/* Hero Animation */

.hero {
    overflow: hidden;
}

.hero img,
.hero.hero-animate {
    opacity: 0;
    transform: scale(1.08);
    filter: blur(8px);
}

.hero.hero-animate {
    animation: heroReveal 1.8s cubic-bezier(.22,1,.36,1) forwards;
}

.hero.hero-animate img {
    animation: heroReveal 1.8s cubic-bezier(.22,1,.36,1) forwards,
               heroZoom 14s ease-out 1.8s forwards;
}

@keyframes heroReveal {

    from {
        opacity: 0;
        transform: scale(1.08);
        filter: blur(8px);
    }

    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }

}

@keyframes heroZoom {

    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.03);
    }

}