:root {
    --motion-duration-fast: 140ms;
    --motion-duration-base: 220ms;
    --motion-duration-slow: 320ms;
    --motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-lift-sm: 2px;
    --motion-lift-md: 4px;
}

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

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

.app-modern .admin-context-shell,
.app-modern .content-stack > *,
.app-modern .card,
.app-modern .alert,
.app-modern .dropdown-menu,
.app-modern .btn,
.app-modern .page-link,
.app-modern .c-sidebar-nav-link,
.app-modern .c-sidebar-nav-dropdown-toggle,
.app-modern .admin-theme-toggle__option,
body.login-page .card,
body.login-page .btn,
body.login-page .form-control,
body.login-page .page-link,
.shopfront-body .shop-stage,
.shopfront-body .shop-action-link,
.shopfront-body .shop-nav-pill,
.shopfront-body .shop-category-group,
.shopfront-body .shop-brand-link,
.shopfront-body .shop-price-list-link,
.shopfront-body .shop-search-suggestion-item,
.shopfront-body .shop-search-product-card,
.shopfront-body .shop-search-product-rail-card,
.shopfront-body .product-tile,
.shopfront-body .shop-panel,
.shopfront-body .shop-surface,
.shopfront-body .shop-filter-group,
.shopfront-body .shop-auth-shell,
.shopfront-body .shop-hero,
.shopfront-body .shop-about-summary__item,
.shopfront-body .shop-faq-summary__item,
.shopfront-body .shop-contact-card,
.shopfront-body .shop-enquiry-card,
.shopfront-body .shop-policy-note-block,
.shopfront-body .shop-privacy-note-block,
.shopfront-body .shop-terms-note-block,
.shopfront-body .shop-shipping-note-block,
.shopfront-body .shop-warranty-brand-card,
.shopfront-body .shop-warranty-claim-card {
    transition:
        transform var(--motion-duration-fast) var(--motion-ease-standard),
        opacity var(--motion-duration-fast) var(--motion-ease-standard),
        background-color var(--motion-duration-fast) var(--motion-ease-standard),
        border-color var(--motion-duration-fast) var(--motion-ease-standard),
        color var(--motion-duration-fast) var(--motion-ease-standard),
        box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.app-modern .admin-context-shell,
.app-modern .content-stack > *,
.shopfront-body .shop-stage {
    animation: motion-fade-up var(--motion-duration-base) var(--motion-ease-emphasized) both;
}

.app-modern .content-stack > *:nth-child(2),
.shopfront-body .shop-grid-stagger > [class*='col-']:nth-child(2) {
    animation-delay: 50ms;
}

.app-modern .content-stack > *:nth-child(3),
.shopfront-body .shop-grid-stagger > [class*='col-']:nth-child(3) {
    animation-delay: 100ms;
}

.app-modern .content-stack > *:nth-child(4),
.shopfront-body .shop-grid-stagger > [class*='col-']:nth-child(4) {
    animation-delay: 150ms;
}

.app-modern .content-stack > *:nth-child(5),
.shopfront-body .shop-grid-stagger > [class*='col-']:nth-child(5) {
    animation-delay: 200ms;
}

.app-modern .content-stack > *:nth-child(6),
.shopfront-body .shop-grid-stagger > [class*='col-']:nth-child(6) {
    animation-delay: 250ms;
}

@media (hover: hover) and (pointer: fine) {
    .app-modern .btn:hover,
    .app-modern .card:hover,
    .app-modern .c-sidebar-nav-link:hover,
    .app-modern .c-sidebar-nav-dropdown-toggle:hover,
    .app-modern .admin-theme-toggle__option:hover,
    body.login-page .btn:hover,
    .shopfront-body .shop-action-link:hover,
    .shopfront-body .shop-nav-pill:hover,
    .shopfront-body .shop-category-group:hover,
    .shopfront-body .shop-brand-link:hover,
    .shopfront-body .shop-price-list-link:hover,
    .shopfront-body .shop-search-suggestion-item:hover,
    .shopfront-body .shop-search-product-card:hover,
    .shopfront-body .shop-search-product-rail-card:hover,
    .shopfront-body .product-tile:hover,
    .shopfront-body .shop-panel:hover,
    .shopfront-body .shop-surface:hover,
    .shopfront-body .shop-filter-group:hover,
    .shopfront-body .shop-auth-shell:hover,
    .shopfront-body .shop-hero:hover,
    .shopfront-body .shop-about-summary__item:hover,
    .shopfront-body .shop-faq-summary__item:hover,
    .shopfront-body .shop-contact-card:hover,
    .shopfront-body .shop-enquiry-card:hover,
    .shopfront-body .shop-policy-note-block:hover,
    .shopfront-body .shop-privacy-note-block:hover,
    .shopfront-body .shop-terms-note-block:hover,
    .shopfront-body .shop-shipping-note-block:hover,
    .shopfront-body .shop-warranty-brand-card:hover,
    .shopfront-body .shop-warranty-claim-card:hover {
        transform: translateY(calc(var(--motion-lift-sm) * -1));
    }

    .app-modern .admin-theme-toggle__option.is-active {
        transform: translateY(calc(var(--motion-lift-md) * -1));
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-modern *,
    .app-modern *::before,
    .app-modern *::after,
    .shopfront-body *,
    .shopfront-body *::before,
    .shopfront-body *::after,
    body.login-page *,
    body.login-page *::before,
    body.login-page *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .app-modern .btn:hover,
    .app-modern .card:hover,
    .app-modern .c-sidebar-nav-link:hover,
    .app-modern .c-sidebar-nav-dropdown-toggle:hover,
    .app-modern .admin-theme-toggle__option:hover,
    .shopfront-body .shop-action-link:hover,
    .shopfront-body .shop-nav-pill:hover,
    .shopfront-body .shop-category-group:hover,
    .shopfront-body .shop-brand-link:hover,
    .shopfront-body .shop-price-list-link:hover,
    .shopfront-body .shop-search-suggestion-item:hover,
    .shopfront-body .shop-search-product-card:hover,
    .shopfront-body .shop-search-product-rail-card:hover,
    .shopfront-body .product-tile:hover,
    .shopfront-body .shop-panel:hover,
    .shopfront-body .shop-surface:hover,
    .shopfront-body .shop-filter-group:hover,
    .shopfront-body .shop-auth-shell:hover,
    .shopfront-body .shop-hero:hover,
    .shopfront-body .shop-about-summary__item:hover,
    .shopfront-body .shop-faq-summary__item:hover,
    .shopfront-body .shop-contact-card:hover,
    .shopfront-body .shop-enquiry-card:hover,
    .shopfront-body .shop-policy-note-block:hover,
    .shopfront-body .shop-privacy-note-block:hover,
    .shopfront-body .shop-terms-note-block:hover,
    .shopfront-body .shop-shipping-note-block:hover,
    .shopfront-body .shop-warranty-brand-card:hover,
    .shopfront-body .shop-warranty-claim-card:hover {
        transform: none !important;
    }
}