/* Hero entrance animation — cohesive composition without hurting LCP
 *
 * Container slides up (transform-only, no opacity → LCP-safe).
 * Inner elements fade-in with cascade (opacity + small translate).
 * Pure CSS, no JS dependency, fires immediately when CSS parses.
 */

.hero-search__inner {
    animation: uberHeroSlideUp 800ms cubic-bezier(.2, .7, .2, 1) both;
}

.hero-search__inner > h1.section-title,
.hero-search__inner > .rich-text,
.hero-search__inner > .search-form,
.hero-search__inner #openChatButton {
    animation: uberHeroFadeIn 800ms cubic-bezier(.2, .7, .2, 1) both;
}

.hero-search__inner > h1.section-title  { animation-delay: 80ms; }
.hero-search__inner > .rich-text        { animation-delay: 160ms; }
.hero-search__inner > .search-form      { animation-delay: 240ms; }
.hero-search__inner #openChatButton     { animation-delay: 320ms; }

@keyframes uberHeroSlideUp {
    from { transform: translateY(40px); }
    to   { transform: translateY(0); }
}

@keyframes uberHeroFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-search__inner,
    .hero-search__inner > h1.section-title,
    .hero-search__inner > .rich-text,
    .hero-search__inner > .search-form,
    .hero-search__inner #openChatButton {
        animation: none;
    }
}