/**

 * Shared motion / press feedback — buyer, merchant, admin, hub, legal.

 * Link: /design/design-motion.css?v=design-002

 */

:root {

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --duration-fast: 120ms;

  --duration-ui: 200ms;

  --duration-sheet: 320ms;

  --duration-sheet-close: 280ms;

  --shadow-lift: 0 14px 36px rgba(31, 31, 36, 0.1);

  --font-body: "Inter", system-ui, sans-serif;

  --font-display: "Playfair Display", Georgia, serif;

}



.primary,

.btn-add,

#send,

.chip,

.ghost,

.nav-item,

.top-nav-item,

.nav-btn,

.card-more,

.recipient-chip,

.addr-suggest-item,

.btn,

.btn.primary,

.btn.ghost,

.hub-btn,

.password-toggle,

.catalog-card,

.card,

.btn-fav,

.btn-close-detail,

.order-hide-btn,

.theme-option {

  transition:

    transform var(--duration-fast) var(--ease-out),

    background-color var(--duration-ui) var(--ease-out),

    border-color var(--duration-ui) var(--ease-out),

    color var(--duration-ui) var(--ease-out),

    box-shadow var(--duration-ui) var(--ease-out),

    filter var(--duration-ui) var(--ease-out),

    opacity var(--duration-ui) var(--ease-out);

}

.catalog-yx-mode-btn,

.catalog-yx-chip,

.catalog-yx-icon-btn,

.catalog-yx-fab,

.yc-tile-add,

.yc-section-all,

.catalog-filter-opt,

.catalog-cat-btn {

  transition:

    transform var(--duration-fast) var(--ease-out),

    background-color var(--duration-ui) var(--ease-out),

    border-color var(--duration-ui) var(--ease-out),

    color var(--duration-ui) var(--ease-out),

    box-shadow var(--duration-ui) var(--ease-out);

}

.app-bar-menu,

.app-menu-item {

  transition:

    transform var(--duration-fast) var(--ease-out),

    background-color var(--duration-ui) var(--ease-out),

    border-color var(--duration-ui) var(--ease-out),

    color var(--duration-ui) var(--ease-out);

}



.primary:active:not(:disabled),

.btn-add:active:not(:disabled),

#send:active:not(:disabled),

.chip:active,

.ghost:active,

.nav-item:active,

.top-nav-item:active,

.nav-btn:active,

.card-more:active,

.recipient-chip:active,

.addr-suggest-item:active,

.btn:active:not(:disabled),

.hub-btn:active,

.password-toggle:active,

.catalog-card:active,

.card:active,

.btn-fav:active,

.btn-close-detail:active,

.order-hide-btn:active,

.theme-option:active {

  transform: scale(0.97);

}

.catalog-yx-mode-btn:active,

.catalog-yx-chip:active,

.catalog-yx-icon-btn:active,

.catalog-yx-fab:active,

.yc-tile-add:active,

.yc-section-all:active,

.catalog-filter-opt:active,

.catalog-cat-btn:active,

.app-bar-menu:active,

.app-menu-item:active {

  transform: scale(0.97);

}



@media (hover: hover) and (pointer: fine) {

  .card:hover,

  .catalog-card:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow-lift);

  }

}



.card,

.catalog-card {

  transition:

    transform var(--duration-ui) var(--ease-out),

    box-shadow var(--duration-ui) var(--ease-out);

}



/* ——— Sheet / dialog enter ——— */

.sheet-backdrop:not([hidden]),

.product-detail-backdrop:not(.is-closing) {

  animation: backdrop-in 220ms var(--ease-out) both;

}



.sheet:not([hidden]):not(.is-closing),

.product-detail-sheet:not(.is-closing) {

  animation: sheet-in var(--duration-sheet) var(--ease-drawer) both;

}



dialog[open]:not(.is-closing) {

  animation: dialog-in 280ms var(--ease-out) both;

}



dialog[open]:not(.is-closing)::backdrop {

  animation: backdrop-in 220ms var(--ease-out) both;

}



@keyframes backdrop-in {

  from { opacity: 0; }

  to { opacity: 1; }

}



@keyframes sheet-in {

  from { opacity: 0; transform: translateY(100%); }

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

}



@keyframes dialog-in {

  from { opacity: 0; transform: translateY(8px) scale(0.98); }

  to { opacity: 1; transform: none; }

}



@media (min-width: 1024px) {

  .sheet:not([hidden]):not(.is-closing) {

    animation: sheet-in-desktop var(--duration-sheet) var(--ease-drawer) both;

  }

  @keyframes sheet-in-desktop {

    from { opacity: 0; transform: translateX(-50%) translateY(100%); }

    to { opacity: 1; transform: translateX(-50%) translateY(0); }

  }

}



/* ——— Sheet / dialog exit (JS adds .is-closing) ——— */

.sheet-backdrop.is-closing,

.product-detail-backdrop.is-closing {

  animation: none;

  opacity: 0;

  transition: opacity 220ms var(--ease-out);

}



.sheet.is-closing {

  animation: none;

  opacity: 0;

  transform: translateY(100%);

  transition:

    transform var(--duration-sheet-close) var(--ease-drawer),

    opacity 220ms var(--ease-out);

}



.product-detail-sheet.is-closing {

  animation: none;

  opacity: 0;

  transform: translateY(100%);

  transition:

    transform var(--duration-sheet-close) var(--ease-drawer),

    opacity 220ms var(--ease-out);

}



@media (min-width: 1024px) {

  .sheet.is-closing {

    transform: translateX(-50%) translateY(100%);

  }

}



dialog.is-closing {

  animation: none;

  opacity: 0;

  transform: translateY(8px) scale(0.98);

  transition:

    transform 220ms var(--ease-out),

    opacity 180ms var(--ease-out);

}



/* Catalog grid stagger (buyer) */

.catalog-grid.is-loaded .catalog-card {

  animation: catalog-in 280ms var(--ease-out) both;

}

.catalog-grid.is-loaded .catalog-card:nth-child(1) { animation-delay: 0ms; }

.catalog-grid.is-loaded .catalog-card:nth-child(2) { animation-delay: 40ms; }

.catalog-grid.is-loaded .catalog-card:nth-child(3) { animation-delay: 80ms; }

.catalog-grid.is-loaded .catalog-card:nth-child(4) { animation-delay: 120ms; }

.catalog-grid.is-loaded .catalog-card:nth-child(5) { animation-delay: 160ms; }

.catalog-grid.is-loaded .catalog-card:nth-child(6) { animation-delay: 200ms; }

.catalog-grid.is-loaded .catalog-card:nth-child(n+7) { animation-delay: 200ms; }



@keyframes catalog-in {

  from { opacity: 0; transform: translateY(6px); }

  to { opacity: 1; transform: none; }

}



@media (prefers-reduced-motion: reduce) {

  .catalog-grid.is-loaded .catalog-card {

    animation: catalog-in-fade 150ms var(--ease-out) both;

    transform: none !important;

  }

  @keyframes catalog-in-fade {

    from { opacity: 0; }

    to { opacity: 1; }

  }



  *,

  *::before,

  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

  }



  .sheet-backdrop.is-closing,

  .product-detail-backdrop.is-closing,

  .sheet.is-closing,

  .product-detail-sheet.is-closing,

  dialog.is-closing {

    transition-duration: 0.01ms !important;

  }



  .primary:active:not(:disabled),

  .btn-add:active:not(:disabled),

  #send:active:not(:disabled),

  .chip:active,

  .ghost:active,

  .nav-item:active,

  .top-nav-item:active,

  .nav-btn:active,

  .btn:active:not(:disabled),

  .hub-btn:active,

  .catalog-card:active,

  .card:active,

  .btn-fav:active {

    transform: none;

  }



  @media (hover: hover) and (pointer: fine) {

    .card:hover,

    .catalog-card:hover {

      transform: none;

    }

  }

}