/**
 * Apple / iOS–inspired motion layer
 * Soft springs, sheet slides, press feedback. Respects reduced-motion.
 */
:root {
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-ios-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-ios-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-ios-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
  --dur-fast: 0.2s;
  --dur-mid: 0.36s;
  --dur-slow: 0.48s;
}

/* —— Press / tap feedback (iOS button feel) —— */
@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled),
  .chip,
  .nav-link,
  .nav-btn,
  .rail-menu-btn,
  .wish-btn,
  .home-showcase-dot,
  .product-card .add-to-cart,
  .admin-tabs [data-admin-tab],
  .market-segment .chip {
    transition:
      transform var(--dur-fast) var(--ease-ios),
      filter var(--dur-fast) var(--ease-ios),
      background var(--dur-fast) ease,
      border-color var(--dur-fast) ease,
      box-shadow var(--dur-fast) ease,
      color var(--dur-fast) ease,
      opacity var(--dur-fast) ease;
  }
  .btn:not(:disabled):hover,
  .chip:hover,
  .nav-link:hover,
  .nav-btn:hover {
    transform: translateY(-1px);
  }
  .btn:not(:disabled):active,
  .chip:active,
  .nav-link:active,
  .nav-btn:active,
  .rail-menu-btn:active,
  .wish-btn:active,
  .home-showcase-dot:active,
  .product-card .add-to-cart:active,
  .admin-tabs [data-admin-tab]:active {
    transform: scale(0.97);
  }
}

@supports (padding: max(0px)) {
  .btn:not(:disabled),
  .chip,
  .rail-menu-btn {
    -webkit-tap-highlight-color: transparent;
  }
}

/* —— Product cards: soft lift —— */
body:not(.dex-page) .product-card {
  transition:
    transform var(--dur-mid) var(--ease-ios),
    box-shadow var(--dur-mid) var(--ease-ios),
    border-color var(--dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  body:not(.dex-page) .product-card:hover {
    transform: translateY(-3px) scale(1.01);
  }
  body:not(.dex-page) .product-card:active {
    transform: translateY(-1px) scale(0.995);
  }
}

/* Staggered fade-up when grid paints (first screen only) */
@keyframes ios-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.grid > .product-card:nth-child(-n+12),
.products-grid > .product-card:nth-child(-n+12),
.product-grid > .product-card:nth-child(-n+12),
#singles-products > .product-card:nth-child(-n+12),
#sealed-products > .product-card:nth-child(-n+12),
#graded-products > .product-card:nth-child(-n+12) {
  animation: ios-fade-up var(--dur-slow) var(--ease-ios) both;
}
.grid > .product-card:nth-child(1),
.products-grid > .product-card:nth-child(1),
.product-grid > .product-card:nth-child(1),
#singles-products > .product-card:nth-child(1),
#sealed-products > .product-card:nth-child(1),
#graded-products > .product-card:nth-child(1) { animation-delay: 0.02s; }
.grid > .product-card:nth-child(2),
.products-grid > .product-card:nth-child(2),
.product-grid > .product-card:nth-child(2),
#singles-products > .product-card:nth-child(2),
#sealed-products > .product-card:nth-child(2),
#graded-products > .product-card:nth-child(2) { animation-delay: 0.05s; }
.grid > .product-card:nth-child(3),
.products-grid > .product-card:nth-child(3),
.product-grid > .product-card:nth-child(3),
#singles-products > .product-card:nth-child(3),
#sealed-products > .product-card:nth-child(3),
#graded-products > .product-card:nth-child(3) { animation-delay: 0.08s; }
.grid > .product-card:nth-child(4),
.products-grid > .product-card:nth-child(4),
.product-grid > .product-card:nth-child(4),
#singles-products > .product-card:nth-child(4),
#sealed-products > .product-card:nth-child(4),
#graded-products > .product-card:nth-child(4) { animation-delay: 0.11s; }
.grid > .product-card:nth-child(5),
.products-grid > .product-card:nth-child(5),
.product-grid > .product-card:nth-child(5),
#singles-products > .product-card:nth-child(5),
#sealed-products > .product-card:nth-child(5),
#graded-products > .product-card:nth-child(5) { animation-delay: 0.14s; }
.grid > .product-card:nth-child(6),
.products-grid > .product-card:nth-child(6),
.product-grid > .product-card:nth-child(6),
#singles-products > .product-card:nth-child(6),
#sealed-products > .product-card:nth-child(6),
#graded-products > .product-card:nth-child(6) { animation-delay: 0.17s; }
.grid > .product-card:nth-child(n+7),
.products-grid > .product-card:nth-child(n+7),
.product-grid > .product-card:nth-child(n+7),
#singles-products > .product-card:nth-child(n+7),
#sealed-products > .product-card:nth-child(n+7),
#graded-products > .product-card:nth-child(n+7) { animation-delay: 0.2s; }

/* —— Section enter (store tabs / nav) —— */
@keyframes ios-section-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.ios-section-enter {
  animation: ios-section-in var(--dur-mid) var(--ease-ios) both;
}

/* —— Mini cart: iOS side sheet —— */
.mini-cart {
  transition: transform var(--dur-mid) var(--ease-ios) !important;
  will-change: transform;
}
.mini-cart-backdrop {
  background: rgba(15, 23, 42, 0.42) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity var(--dur-mid) var(--ease-ios) !important;
}

/* —— Quick view / centered modals —— */
#quick-view-modal.modal,
.modal#quick-view-modal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(8, 10, 16, 0.48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    opacity var(--dur-mid) var(--ease-ios),
    visibility var(--dur-mid) var(--ease-ios),
    background var(--dur-mid) ease;
}
#quick-view-modal.modal.is-open,
.modal#quick-view-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#quick-view-modal .panel,
#pickup-modal .panel,
#card-modal .panel,
#price-modal .panel,
.modal .panel {
  transition:
    transform var(--dur-mid) var(--ease-ios),
    opacity var(--dur-mid) var(--ease-ios);
}
#quick-view-modal:not(.is-open) .panel {
  transform: translateY(18px) scale(0.96);
  opacity: 0;
}
#quick-view-modal.is-open .panel {
  transform: none;
  opacity: 1;
}
#quick-view-modal.is-closing .panel {
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  transition-timing-function: var(--ease-ios-in);
}

/* Class-based modals (.open) */
#card-modal,
#price-modal,
#pickup-modal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    opacity var(--dur-mid) var(--ease-ios),
    visibility var(--dur-mid) var(--ease-ios);
}
#card-modal.open,
#price-modal.open,
#pickup-modal.open {
  display: flex !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#card-modal:not(.open) .panel,
#price-modal:not(.open) .panel,
#pickup-modal:not(.open) .panel {
  transform: translateY(16px) scale(0.97);
  opacity: 0;
}
#card-modal.open .panel,
#price-modal.open .panel,
#pickup-modal.open .panel {
  transform: none;
  opacity: 1;
}

/* —— Bottom sheets —— */
.policy-sheet-backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity var(--dur-mid) var(--ease-ios) !important;
}
.policy-sheet {
  transition: transform var(--dur-slow) var(--ease-ios) !important;
}

/* —— Mobile rail drawer —— */
@media (max-width: 899px) {
  .site-header.site-rail,
  header.site-header.site-rail {
    transition: left var(--dur-mid) var(--ease-ios) !important;
  }
  .rail-backdrop {
    display: block !important;
    opacity: 0;
    pointer-events: none;
    background: rgba(8, 10, 16, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity var(--dur-mid) var(--ease-ios);
  }
  .rail-backdrop[hidden] {
    display: block !important;
    opacity: 0;
    pointer-events: none;
  }
  html.rail-open .rail-backdrop,
  .rail-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

/* —— Toast: slide + fade like iOS banners —— */
.toast {
  opacity: 0;
  transform: translateX(-50%) translateY(12px) scale(0.96);
  transition:
    opacity var(--dur-mid) var(--ease-ios),
    transform var(--dur-mid) var(--ease-ios) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.admin-page .toast,
body.admin-page .toast {
  transform: translateX(-50%) translateY(12px) scale(0.96);
}
.admin-page .toast.show,
body.admin-page .toast.show {
  transform: translateX(-50%) translateY(0) scale(1);
}

/* —— Showcase —— */
.home-showcase-slide.is-enter {
  animation: ios-showcase-in var(--dur-slow) var(--ease-ios) both !important;
}
@keyframes ios-showcase-in {
  from {
    opacity: 0;
    transform: translateX(28px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.home-showcase-dot {
  transition:
    transform var(--dur-fast) var(--ease-ios),
    background var(--dur-fast) ease,
    width var(--dur-mid) var(--ease-ios) !important;
}
.home-showcase-dot.is-active {
  transform: scale(1.15);
}

/* —— Admin tabs —— */
.admin-tabs [data-admin-tab] {
  transition:
    transform var(--dur-fast) var(--ease-ios),
    background var(--dur-fast) ease,
    color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}
.admin-tabs [data-admin-tab].active {
  transition: transform var(--dur-mid) var(--ease-ios-spring);
}

/* —— Wishlist heart pop —— */
@keyframes ios-heart-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.wish-btn.on {
  animation: ios-heart-pop 0.42s var(--ease-ios-spring);
}

/* —— Desktop / mouse: everyday chrome (subtle) —— */
@media (hover: hover) and (pointer: fine) {
  /* Left rail expand + icons */
  .site-header.site-rail {
    transition: width var(--dur-mid) var(--ease-ios) !important;
  }
  .site-header.site-rail .nav-links .nav-link,
  .site-header.site-rail .nav-links .nav-btn {
    transition:
      transform var(--dur-fast) var(--ease-ios),
      background var(--dur-fast) ease,
      border-color var(--dur-fast) ease,
      box-shadow var(--dur-fast) ease,
      gap var(--dur-mid) var(--ease-ios),
      padding var(--dur-mid) var(--ease-ios),
      width var(--dur-mid) var(--ease-ios) !important;
  }
  .site-header.site-rail .nav-links .nav-link:hover,
  .site-header.site-rail .nav-links .nav-btn:hover {
    transform: translateX(2px) scale(1.02);
  }
  .site-header.site-rail .nav-links .nav-link:active,
  .site-header.site-rail .nav-links .nav-btn:active {
    transform: scale(0.97);
  }
  .site-header.site-rail .right-controls .icon-btn {
    transition:
      transform var(--dur-fast) var(--ease-ios),
      background var(--dur-fast) ease,
      border-color var(--dur-fast) ease,
      box-shadow var(--dur-fast) ease !important;
  }
  .site-header.site-rail .right-controls .icon-btn:hover {
    transform: scale(1.08);
  }
  .site-header.site-rail .right-controls .icon-btn:active {
    transform: scale(0.94);
  }

  /* Store tabs + filter chips */
  .store-area-tab,
  .filter-btn,
  .condition-btn,
  .chip {
    transition:
      transform var(--dur-fast) var(--ease-ios),
      background var(--dur-fast) ease,
      border-color var(--dur-fast) ease,
      box-shadow var(--dur-mid) var(--ease-ios),
      color var(--dur-fast) ease !important;
  }
  .store-area-tab:hover,
  .filter-btn:hover,
  .condition-btn:hover {
    transform: translateY(-1px);
  }
  .store-area-tab.active,
  .filter-btn.active,
  .condition-btn.active {
    transform: scale(1.03);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  }

  /* Home shop lanes */
  .home-lane {
    transition:
      transform var(--dur-mid) var(--ease-ios),
      border-color var(--dur-fast) ease,
      background var(--dur-fast) ease,
      box-shadow var(--dur-mid) var(--ease-ios) !important;
  }
  .home-lane:hover {
    transform: translateY(-4px) scale(1.01) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  }
  .home-lane:active {
    transform: translateY(-1px) scale(0.99) !important;
  }

  /* Search / selects focus */
  #search,
  input[type="search"],
  .store-find input,
  .store-find select,
  select.currency-select {
    transition:
      border-color var(--dur-fast) ease,
      box-shadow var(--dur-mid) var(--ease-ios),
      transform var(--dur-fast) var(--ease-ios);
  }
  #search:focus,
  input[type="search"]:focus,
  .store-find input:focus,
  .store-find select:focus {
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pk-primary, #ff2d2d) 22%, transparent);
  }

  /* Product quick-view affordance */
  body:not(.dex-page) .product-card .quick-view-btn {
    transition:
      opacity var(--dur-mid) var(--ease-ios),
      transform var(--dur-mid) var(--ease-ios) !important;
  }
  body:not(.dex-page) .product-card:hover .product-image img,
  body:not(.dex-page) .product-card:hover .media img {
    transform: scale(1.045);
    transition: transform var(--dur-slow) var(--ease-ios);
  }

  /* Showcase controls */
  .home-showcase-prev,
  .home-showcase-next,
  #home-showcase-prev,
  #home-showcase-next {
    transition:
      transform var(--dur-fast) var(--ease-ios),
      background var(--dur-fast) ease,
      opacity var(--dur-fast) ease;
  }
  .home-showcase-prev:hover,
  .home-showcase-next:hover,
  #home-showcase-prev:hover,
  #home-showcase-next:hover {
    transform: scale(1.08);
  }
}

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .grid > .product-card,
  .products-grid > .product-card,
  .product-grid > .product-card,
  #singles-products > .product-card,
  #sealed-products > .product-card,
  #graded-products > .product-card,
  .ios-section-enter,
  .home-showcase-slide.is-enter,
  .wish-btn.on {
    animation: none !important;
  }
  .btn:not(:disabled):hover,
  .btn:not(:disabled):active,
  body:not(.dex-page) .product-card:hover,
  body:not(.dex-page) .product-card:active,
  .home-lane:hover,
  .home-lane:active,
  .store-area-tab.active,
  .site-header.site-rail .nav-links .nav-link:hover,
  .site-header.site-rail .right-controls .icon-btn:hover {
    transform: none !important;
  }
}