@media (prefers-reduced-motion: no-preference) {
    .motion-enter {
        animation: section-arrival 520ms cubic-bezier(.2, .7, .3, 1) backwards;
    }

    .hero-grid > .motion-enter:nth-child(2),
    :is(.hero-facts, .company-grid, .resource-grid, .path-grid, .reviews) > .motion-enter:nth-child(3n + 2) {
        animation-delay: 55ms;
    }

    :is(.hero-facts, .company-grid, .resource-grid, .path-grid, .reviews) > .motion-enter:nth-child(3n) {
        animation-delay: 105ms;
    }

    :is(.resource, .path, .review, .hero-flags a, .region-nav a, .portal-offers) {
        transition: translate 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
    }

    @media (hover: hover) {
        :is(.resource, .path, .review):hover {
            translate: 0 -3px;
            box-shadow: 0 10px 24px #081b3a1f;
        }

        :is(.hero-flags a, .region-nav a, .portal-offers):hover {
            translate: 0 -2px;
        }
    }
}

@keyframes section-arrival {
    from { opacity: .72; translate: 0 12px; }
    to { opacity: 1; translate: 0 0; }
}