/**
 * Storefront motion tokens — aliases merchant panel tokens for cohesive UX.
 */

:root {
  --sf-motion-ease-drawer: var(--ease-drawer, cubic-bezier(0.32, 0.72, 0, 1));
  --sf-motion-ease-out: var(--ease-out-strong, cubic-bezier(0.23, 1, 0.32, 1));
  --sf-motion-press: var(--duration-press, 160ms);
  --sf-motion-ui: var(--duration-ui, 200ms);
  --sf-motion-sheet-open: 340ms;
  --sf-motion-sheet-close: 280ms;
}

.sf-product-card:active {
  transform: scale(0.97);
  transition-duration: var(--sf-motion-press);
}

/* Global press feedback on storefront CTAs */
.sf-btn,
.sf-btn-primary,
.sf-btn-secondary,
.sf-btn-ghost,
.sf-btn-wa,
.sf-btn-add-order,
.sf-header-icon-btn,
.sf-cart-drawer-close,
.sf-cart-drawer-foot__checkout,
.sf-cart-drawer-foot__view,
.sf-product-quick-add,
.sf-qty-btn,
.lm-branch-trigger,
.lm-branch-option,
.lm-btn,
.sf-cart-toast__action,
.sf-menu__item-plus,
.sf-motion-tap {
  transition:
    transform var(--sf-motion-press) var(--sf-motion-ease-out),
    opacity var(--sf-motion-press) ease,
    background var(--sf-motion-ui) ease,
    border-color var(--sf-motion-ui) ease,
    box-shadow var(--sf-motion-ui) ease,
    filter var(--sf-motion-ui) ease,
    color var(--sf-motion-ui) ease;
}

.sf-btn:active,
.sf-btn-primary:active,
.sf-btn-secondary:active,
.sf-btn-ghost:active,
.sf-btn-wa:active,
.sf-btn-add-order:active,
.sf-header-icon-btn:active,
.sf-cart-drawer-close:active,
.sf-cart-drawer-foot__checkout:active,
.sf-cart-drawer-foot__view:active,
.sf-product-quick-add:active,
.sf-qty-btn:active,
.lm-branch-trigger:active,
.lm-branch-option:active,
.lm-btn:active:not(:disabled),
.sf-cart-toast__action:active,
.sf-menu__item-plus:active,
.sf-motion-tap:active {
  transform: scale(0.97);
}

/* Hover lift — fine pointer only */
@media (hover: hover) {
  .sf-product-card:hover {
    box-shadow: var(--sf-shadow-lift);
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--sf-accent) 28%, var(--sf-border));
  }

  .sf-product-card:hover .sf-product-card-media img {
    transform: scale(1.04);
  }
}

/* Below-fold catalog reveal (wired via Intersection Observer in storefront.js) */
.sf-block.sf-reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(12px);
}

.sf-block.sf-reveal.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--sf-motion-ui) var(--sf-motion-ease-out),
    transform var(--sf-motion-ui) var(--sf-motion-ease-out);
}

/* JS-driven sheets — CSS transitions disabled while drag/animate runs */
.sf-cart-drawer.is-sf-driven .sf-cart-drawer-panel,
.sf-cart-drawer.is-sf-driven .sf-cart-drawer-backdrop,
.lm-branch-overlay.is-sf-driven .lm-branch-sheet,
.lm-branch-overlay.is-sf-driven .lm-branch-scrim {
  transition: none !important;
}

/* Retail mobile: bottom sheet metaphor */
@media (max-width: 767px) {
  .sf-template--clean-minimal .sf-cart-drawer {
    justify-content: center;
    align-items: flex-end;
  }

  .sf-template--clean-minimal .sf-cart-drawer-panel {
    width: 100%;
    max-width: 100%;
    max-height: min(88dvh, 720px);
    border-radius: var(--radius-s, 12px) var(--radius-s, 12px) 0 0;
    box-shadow: 0 -16px 48px rgba(15, 23, 42, 0.18);
  }

  .sf-template--clean-minimal .sf-cart-drawer-grab {
    display: block;
  }
}

/* Toast spatial enter from bottom edge */
.sf-cart-toast {
  transition:
    transform var(--sf-motion-sheet-close) var(--sf-motion-ease-drawer),
    opacity var(--sf-motion-ui) ease;
}

.sf-cart-toast.is-leaving {
  transition:
    transform var(--sf-motion-ui) var(--sf-motion-ease-out),
    opacity var(--sf-motion-ui) ease;
}

/* Delivery pin reveal on checkout */
[data-delivery-pin].is-pin-revealing {
  animation: sf-pin-reveal var(--sf-motion-ui) var(--sf-motion-ease-out) both;
}

@keyframes sf-pin-reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-block.sf-reveal:not(.is-visible),
  .sf-block.sf-reveal.is-visible,
  .sf-cart-drawer,
  .sf-cart-drawer-panel,
  .sf-cart-drawer-backdrop,
  .lm-branch-overlay,
  .lm-branch-sheet,
  .lm-branch-scrim,
  .sf-cart-toast,
  .sf-promo-toast,
  [data-delivery-pin].is-pin-revealing {
    animation: none !important;
    transition: none !important;
  }

  .sf-block.sf-reveal:not(.is-visible) {
    opacity: 1;
    transform: none;
  }

  .sf-btn:active,
  .sf-btn-primary:active,
  .sf-product-quick-add:active,
  .lm-btn:active:not(:disabled),
  .sf-motion-tap:active {
    transform: none;
  }
}