.product-grid {
    transform-origin: 50% 0;
    animation: catalog-grid-arrive .42s cubic-bezier(.18, .82, .24, 1) both;
}

.product-grid .product-card {
    transform-origin: 50% 45%;
    transition: opacity .2s ease, transform .24s cubic-bezier(.4, 0, .8, .2);
}

.product-grid.catalog-is-changing .product-card {
    opacity: 0;
    transform: scale(.94) translateY(5px);
}

.product-grid.catalog-has-arrived .product-card {
    animation: catalog-card-arrive .44s var(--catalog-delay, 0ms) cubic-bezier(.16, .84, .24, 1) both;
}

.shop-intro h1,
.shop-intro > div {
    transition: opacity .18s ease, transform .22s ease;
}

main.catalog-copy-changing .shop-intro h1,
main.catalog-copy-changing .shop-intro > div {
    opacity: 0;
    transform: translateY(4px);
}

@keyframes catalog-grid-arrive {
    from { opacity: 0; transform: scale(.985) translateY(5px); }
    to { opacity: 1; transform: none; }
}

@keyframes catalog-card-arrive {
    from { opacity: 0; transform: scale(.94) translateY(7px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .product-grid,
    .product-grid.catalog-has-arrived .product-card {
        animation: none;
    }

    .product-grid .product-card,
    .shop-intro h1,
    .shop-intro > div {
        transition: none;
    }

    .product-grid.catalog-is-changing .product-card,
    main.catalog-copy-changing .shop-intro h1,
    main.catalog-copy-changing .shop-intro > div {
        opacity: 1;
        transform: none;
    }
}