/*
    animations.css
    Keyframe-based motion. Only transform and opacity are animated
    (both are compositor-friendly and avoid layout thrash). Simple
    :hover/:focus transitions live alongside their component in
    components.css; this file is for the page-level entrance effect.

    Reduced-motion users already get near-instant timing globally via
    the blanket override in reset.css, so no separate media query is
    needed here.
*/

@keyframes fade-slide-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

.hero__content {
    animation: fade-slide-up var(--transition-base) ease-out both;
}

.hero .media-placeholder {
    animation: fade-slide-up var(--transition-base) ease-out both;
    animation-delay: 100ms;
}