:root {
    --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-fast: 180ms;
    --motion-medium: 360ms;
    --motion-slow: 720ms;
    --motion-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

html {
    scroll-behavior: smooth;
}

body.motion-ready {
    animation: motion-page-in var(--motion-medium) var(--motion-soft) both;
}

body.motion-leaving {
    pointer-events: none;
    animation: motion-page-out 160ms ease-in both;
}

.motion-ready :is(.home-header, .shop-header, .contact-header, .buyer-header, .co-header, .topbar) {
    animation: motion-header-in 460ms var(--motion-soft) both;
}

.motion-ready :is(.hero-visual > *, .auth-showcase-scene, .cta-illustration, .store-illustration) {
    animation: motion-float 7s ease-in-out infinite;
}

.motion-reveal {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    will-change: opacity, transform;
}

.motion-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity var(--motion-slow) var(--motion-soft), transform var(--motion-slow) var(--motion-soft);
    transition-delay: var(--motion-delay, 0ms);
}

.motion-ready :is(a, button, summary, input, select, textarea, .nav-item, .order-tab, .admin-order-tab, .category-tabs a, .co-choice-button, .preview-thumb, .photo-sort-card) {
    transition-property: background-color, border-color, box-shadow, color, opacity, outline-color, transform;
    transition-duration: var(--motion-fast);
    transition-timing-function: var(--motion-ease);
}

.motion-ready :is(a, button, summary, .nav-item, .order-tab, .admin-order-tab, .category-tabs a, .co-choice-button, .preview-thumb):where(:not(:disabled)):active,
.motion-ready .motion-pressed {
    transform: translateY(1px);
}

.motion-ready :is(input, select, textarea):focus {
    transform: translateY(-1px);
    transition-duration: 220ms;
}

.motion-ready :is(.primary-action, .secondary-action, .cta-button, .home-login, .shop-login, .contact-login, .apply-filter, .reset-filter, .add-product, .wa-button, .promo-button, .co-submit, .co-back, .preview-wa, .preview-secondary, .order-checkout-link, .auth-register-button, .calculator-head-button, .admin-add-user-button, .admin-edit-user-button, .account-save-button, .photo-upload-button):where(:not(:disabled)):hover {
    transform: translateY(-2px);
}

.motion-ready :is(.feature-card, .testimonial-card, .shop-card, .product-card, .stat-card, .product-stat-card, .manage-card, .promo-card, .account-card, .buyer-order-card, .co-method-card, .contact-card, .contact-info-card, .contact-message-card, .admin-card, .admin-status-card, .admin-order-item, .admin-user-item, .admin-umkm-product-card, .orders-table-card, .promotion-table-card, .report-panel, .chart-card, .recommend-card, .calc-card, .calc-summary, .calc-simulation-card, .calculator-title-card, .promise-card):hover {
    transform: translateY(-4px);
    box-shadow: var(--motion-shadow);
}

.motion-ready :is(.shop-card, .product-card, .manage-card, .admin-umkm-product-card) img {
    transition: transform var(--motion-medium) var(--motion-soft);
}

.motion-ready details[open] > :is(.home-account-menu, .shop-account-menu, .contact-account-menu, .profile-menu, .admin-product-menu-list) {
    animation: motion-menu-in 220ms var(--motion-soft) both;
    transform-origin: top right;
}

.motion-ready :is(.home-account, .shop-account, .contact-account, .sidebar-profile, .admin-product-menu)[open] summary {
    transform: translateY(-1px);
}

.motion-ready :is(.order-alert, .product-alert, .promotion-alert, .account-alert, .calculator-alert, .co-alert, .alert) {
    animation: motion-alert-in 420ms var(--motion-soft) both;
}

.motion-ready :is(.notification-overlay, .preview-backdrop, .modal-backdrop) {
    transition: opacity 240ms ease;
}

.motion-ready .notification-drawer {
    opacity: 0.96;
    transition: transform 380ms var(--motion-soft), opacity 260ms ease, box-shadow 260ms ease;
}

.motion-ready .notification-drawer.is-open {
    opacity: 1;
    box-shadow: -22px 0 50px rgba(15, 23, 42, 0.22);
}

.motion-ready .product-preview-modal:target .preview-backdrop,
.motion-ready .product-modal:target .modal-backdrop,
.motion-ready .product-modal.is-open .modal-backdrop {
    animation: motion-fade-in 220ms ease both;
}

.motion-ready .product-preview-modal:target .preview-panel,
.motion-ready .product-modal:target :is(.product-modal-panel, .admin-user-modal-panel, .calculator-modal-panel),
.motion-ready .product-modal.is-open :is(.product-modal-panel, .admin-user-modal-panel, .calculator-modal-panel) {
    animation: motion-modal-in 340ms var(--motion-soft) both;
}

.motion-ready :is(.co-cart-item, .order-item, .preview-promo-row, .co-quote-group, .notification-item, .admin-product-detail-panel) {
    animation: motion-item-in 300ms var(--motion-soft) both;
}

.motion-ready :is(.orders-table tbody tr, .promotion-table tbody tr, .admin-table tbody tr, .report-analysis-table tbody tr, .report-recap-table tbody tr):hover {
    transform: translateX(3px);
}

.motion-ready :is(.orders-table tbody tr, .promotion-table tbody tr, .admin-table tbody tr, .report-analysis-table tbody tr, .report-recap-table tbody tr) {
    transition: background-color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}

.motion-ready .motion-bump {
    animation: motion-bump 280ms var(--motion-soft) both;
}

@keyframes motion-page-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes motion-page-out {
    to {
        opacity: 0;
        transform: translateY(8px);
    }
}

@keyframes motion-header-in {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes motion-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes motion-menu-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes motion-alert-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes motion-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes motion-modal-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes motion-item-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes motion-bump {
    0% { transform: translateY(0); }
    45% { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
    }

    body.motion-ready,
    body.motion-leaving,
    .motion-reveal,
    .motion-reveal.is-visible {
        opacity: 1 !important;
        transform: none !important;
    }
}