/* The starting frame stays legible. Individual translate leaves existing hover transforms intact. */
@keyframes mf-soft-arrival {
    from { opacity: .86; translate: 0 var(--mf-arrival-distance, 8px); }
    to   { opacity: 1; translate: 0 0; }
}

@media screen and (prefers-reduced-motion: no-preference) {
    .mf-site :where(
        .mf-hero-inner > .mf-kicker, .mf-hero h1, .mf-hero-lede, .mf-hero .mf-actions > a, .mf-photo-tool,
        .mf-breadcrumb, .mf-page-intro h1, .mf-page-intro .mf-wrap > p,
        .mf-navgroup > summary, .mf-menu > a, .mf-menu-toggle, .mf-navapply, .mf-mobile-callback > a,
        .mf-navgroup[open] > ul > li, .mf-arriving
    ) {
        animation: mf-soft-arrival 650ms cubic-bezier(.2,.75,.25,1) var(--mf-arrival-delay, 65ms) backwards;
    }

    /* Let an entrance finish naturally while the focused control keeps its full contrast. */
    .mf-site :where(.mf-arriving, .mf-hero a, .mf-header a, .mf-header summary, .mf-header button, .mf-header li, .mf-breadcrumb):is(:focus-within,:target) {
        opacity: 1 !important;
        translate: none !important;
    }

    .mf-site :is(.mf-hero h1, .mf-page-intro h1) { --mf-arrival-delay: 130ms; }
    .mf-site :is(.mf-hero-lede, .mf-page-intro .mf-wrap > p) { --mf-arrival-delay: 205ms; }
    .mf-site .mf-hero .mf-actions > a { --mf-arrival-delay: 250ms; }
    .mf-site :is(.mf-hero .mf-actions > a:nth-child(2), .mf-photo-tool) { --mf-arrival-delay: 305ms; }

    /* Click targets stay in place while their labels soften in. */
    .mf-site :is(a, button, [role="tab"], summary, .mf-navgroup li, .mf-footer li) { --mf-arrival-distance: 0px; }
    .mf-site :is(.mf-navgroup:nth-child(2) > summary, .mf-navgroup li:nth-child(2)) { --mf-arrival-delay: 105ms; }
    .mf-site :is(.mf-navgroup:nth-child(3) > summary, .mf-navgroup li:nth-child(3)) { --mf-arrival-delay: 145ms; }
    .mf-site :is(.mf-navgroup:nth-child(n+4) > summary, .mf-navgroup li:nth-child(n+4), .mf-menu > a, .mf-navapply) { --mf-arrival-delay: 185ms; }
}

/* First-paint letter animation keeps the full accessible heading name in place. */
@keyframes mf-letter-entrance {
    from { opacity: 0; transform: translateY(.58em); }
    to   { opacity: 1; transform: translateY(0); }
}
@media screen and (prefers-reduced-motion: no-preference) {
    .mf-site .mf-letter-heading { animation: none; }
    .mf-site .mf-letter-heading .mf-headline-glyph {
        animation: mf-letter-entrance 1500ms cubic-bezier(.2,.78,.24,1) calc(200ms + var(--mf-letter, 0) * 15ms) backwards;
    }
}
@media screen and (prefers-reduced-motion: no-preference) {
    .mf-site .mf-hero .mf-hero-lede {
        animation: mf-letter-entrance 850ms cubic-bezier(.2,.78,.24,1) 600ms backwards;
    }
    .mf-site .mf-hero .mf-actions {
        animation: mf-soft-arrival 700ms ease-out 800ms backwards;
        --mf-arrival-distance: 5px;
    }
    .mf-site .mf-hero .mf-actions > a { animation: none; }
    .mf-site .mf-hero .mf-actions:focus-within { opacity: 1 !important; translate: none !important; }
}