.hero-art {
    transform: scale(1.035) translate(var(--hero-x, 0), var(--hero-y, 0));
    transition: transform 1.1s cubic-bezier(.2, .7, .2, 1)
}

.hero:before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 76% 18%, rgba(255, 255, 255, .92) 0 3px, transparent 4px), radial-gradient(circle at 69% 30%, rgba(255, 255, 255, .65) 0 5px, transparent 6px), radial-gradient(circle at 86% 42%, rgba(255, 255, 255, .45) 0 2px, transparent 3px);
    animation: hero-spark 7s ease-in-out infinite
}

.hero-copy {
    animation: hero-enter 1.05s cubic-bezier(.15, .72, .22, 1) both
}

@keyframes hero-spark {
    50% {
        transform: translateY(-16px);
        opacity: .65
    }
}

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

    to {
        opacity: 1;
        transform: none
    }
}

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

    .hero-art,
    .hero:before,
    .hero-copy {
        animation: none;
        transition: none
    }
}