/* Manual Básico – Motion (reports/motion-plan.md, items 1–5). Front end only.
   Transform and opacity only, interruptible transitions, reduced motion handled per item.
   Curves: --mb-ease comes from the design plugin (fallback below if it is ever off). */

:root {
  --mb-motion-ease: var(--mb-ease, cubic-bezier(0.23, 1, 0.32, 1));
  --mb-motion-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- 1. Filter, sort and page changes: core's loading bar, made visible ----------
   Core draws it black at the very top, over our black top bar, so the 2–4 s wait looked like nothing.
   White with an ink outline reads on the black bar and on white pages; above the phone filter panel.
   Core's own progress animation is kept, also with reduced motion (it is the feedback). */
body .wp-interactivity-router-loading-bar {
  height: 3px;
  background-color: #fff;
  box-shadow: 0 0 0 1px var(--mb-ink, #0B0B0B);
  z-index: 100001;
}

/* ---------- 2. Card photo -> product page photo (cross-document view transition) ----------
   Only the tapped card's photo and the product page's main photo carry a name (set by motion.js and the head
   snippet). The rest of the page swaps instantly: titles, prices and notices are never faded or delayed. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { display: none; }
::view-transition-new(root) { animation: none; }
::view-transition-group(mb-produto) {
  animation-duration: 250ms;
  animation-timing-function: var(--mb-motion-ease-in-out);
}

/* ---------- 3. Full-screen photo viewer (WooCommerce gallery <dialog>, opened by its [open] attribute) ----------
   Not a modal in the top layer, so there is no ::backdrop: the viewer itself fades. Centred (no trigger origin).
   Enters 200 ms opacity + scale from 0.97; leaves 150 ms opacity only; display waits for the exit. */
@media (prefers-reduced-motion: no-preference) {
  .wc-block-product-gallery-dialog {
    opacity: 0;
    transition: opacity 150ms var(--mb-motion-ease), scale 150ms var(--mb-motion-ease), display 150ms allow-discrete;
  }
  .wc-block-product-gallery-dialog[open] {
    opacity: 1;
    scale: 1;
    transition-duration: 200ms;
  }
  @starting-style {
    .wc-block-product-gallery-dialog[open] { opacity: 0; scale: 0.97; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .wc-block-product-gallery-dialog { opacity: 0; transition: opacity 150ms ease, display 150ms allow-discrete; }
  .wc-block-product-gallery-dialog[open] { opacity: 1; }
  @starting-style { .wc-block-product-gallery-dialog[open] { opacity: 0; } }
}

/* ---------- 4. Press feedback on the remaining tap targets ----------
   Same response as the design plugin's buttons (0.97, 150 ms ease-out). `scale` composes with any transform
   WooCommerce already uses to position a control. Icon-only targets 0.95 (0.97 of 24 px is invisible); the large
   department tiles 0.985. Reduced motion: no scale; the instant colour changes stay. */
@media (prefers-reduced-motion: no-preference) {
  .mb-chips a,
  .mb-tiles a,
  .wc-block-product-filters__open-overlay,
  .wc-block-product-filters__open,
  .wc-block-mini-cart__footer-actions .wc-block-components-button,
  .wp-block-query-pagination a,
  .mb-header .wc-block-mini-cart__button,
  .mb-header .wc-block-customer-account__link,
  .mb-header .wp-block-search__button,
  .wc-block-components-drawer__close,
  .wc-block-components-quantity-selector__button,
  .wc-block-next-previous-buttons__button,
  .wc-block-product-gallery-dialog__close-button {
    transition: scale 150ms var(--mb-motion-ease);
  }
  /* These controls now show their own press, so the browser's grey tap flash and the long-press text selection
     go (controls only: product titles and text stay selectable). With reduced motion there is no press, so the
     browser's own tap flash stays: these rules live inside this no-preference block on purpose. */
  .mb-chips a,
  .mb-tiles a,
  .wc-block-product-filters__open-overlay,
  .wc-block-product-filters__open,
  .wc-block-mini-cart__footer-actions .wc-block-components-button,
  .wp-block-query-pagination a,
  .mb-header .wc-block-mini-cart__button,
  .mb-header .wc-block-customer-account__link,
  .mb-header .wp-block-search__button,
  .wc-block-components-drawer__close,
  .wc-block-components-quantity-selector__button,
  .wc-block-next-previous-buttons__button,
  .wc-block-product-gallery-dialog__close-button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  .mb-chips a:active,
  .wc-block-product-filters__open-overlay:active,
  .wc-block-product-filters__open:active,
  .wc-block-mini-cart__footer-actions .wc-block-components-button:active { scale: 0.97; }
  .mb-tiles a:active { scale: 0.985; }
  .wp-block-query-pagination a:active,
  .mb-header .wc-block-mini-cart__button:active,
  .mb-header .wc-block-customer-account__link:active,
  .mb-header .wp-block-search__button:active,
  .wc-block-components-drawer__close:active,
  .wc-block-components-quantity-selector__button:active,
  .wc-block-next-previous-buttons__button:active,
  .wc-block-product-gallery-dialog__close-button:active { scale: 0.95; }
}

/* ---------- 5. Product card photo on hover (mouse only) ----------
   The whole card is one link; the photo answers the pointer with a 1.03 zoom inside its own box. WooCommerce
   already clips that box in product grids (overflow: hidden), and the seal is drawn on the box, so it stays still.
   Grid cards only (home, category, search). Hover easing: ease. Phones and reduced motion: none. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .wc-block-product .wc-block-components-product-image img {
    transition: scale 200ms ease;
  }
  .wc-block-product:hover .wc-block-components-product-image img {
    scale: 1.03;
  }
}