.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .75s var(--ease-out),
        transform .75s var(--ease-out);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

[data-hero-copy] > * {
    opacity: 0;
    transform: translateY(26px);
    animation: hero-enter .8s var(--ease-out) forwards;
}

[data-hero-copy] > *:nth-child(1) { animation-delay: .12s; }
[data-hero-copy] > *:nth-child(2) { animation-delay: .22s; }
[data-hero-copy] > *:nth-child(3) { animation-delay: .32s; }
[data-hero-copy] > *:nth-child(4) { animation-delay: .42s; }
[data-hero-copy] > *:nth-child(5) { animation-delay: .52s; }

.decorative-stars span {
    animation: star-float 8s ease-in-out infinite alternate;
}

.decorative-stars span:nth-child(2n) {
    animation-delay: -2.8s;
    animation-duration: 10s;
}

.decorative-stars span:nth-child(3n) {
    animation-delay: -4.1s;
    animation-duration: 12s;
}

@keyframes hero-enter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes star-float {
    from { transform: translate3d(0, -4px, 0) rotate(-3deg); }
    to { transform: translate3d(8px, 8px, 0) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .reveal,
    [data-hero-copy] > * {
        opacity: 1;
        transform: none;
    }
}