/* Hero movement begins only after the visitor has passed through the entrance cover. */
body:not(.has-entered) .hero-copy {
    opacity: 0
}

body.has-entered .hero-copy {
    animation: hero-visible 1s .12s cubic-bezier(.15, .72, .22, 1) both
}

body.has-entered .hero-art {
    animation: hero-ambient 12s ease-in-out infinite alternate
}

body.has-entered .hero:after {
    animation: hero-light 7s ease-in-out infinite
}

@keyframes hero-visible {
    from {
        opacity: 0;
        transform: translateY(34px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes hero-ambient {
    from {
        transform: scale(1.035) translate(-5px, -3px)
    }

    to {
        transform: scale(1.09) translate(7px, 5px)
    }
}

@keyframes hero-light {
    50% {
        opacity: .72;
        transform: translateX(2%)
    }
}

@media(prefers-reduced-motion:reduce) {

    body:not(.has-entered) .hero-copy,
    body.has-entered .hero-copy {
        opacity: 1;
        animation: none
    }

    body.has-entered .hero-art,
    body.has-entered .hero:after {
        animation: none
    }
}