/* ═══════════════════════════════════════════════════════
   SELOXA — SCROLL MOTION
   Subtle fade + small upward rise as content scrolls into view.
   Loaded by inc/motion.php, after seloxa.css. Driven by
   assets/js/seloxa-motion.js.

   How it fits together:
   - Every rule here starts with html.seloxa-motion. That class is
     only added by the tiny script in <head> (inc/motion.php), so
     with no JavaScript, or with "Reduce motion" on, nothing
     here applies and the page looks exactly as normal.
   - Only opacity and transform change, so nothing shifts layout.
   - The JS moves each element through three states:
       hidden   → no extra class (the rule in section 2)
       .sx-in   → revealing (section 3)
       .sx-done → finished; every rule here stops applying and
                  the element is back to its normal styles
                  (including its normal hover effects).

   KEEP IN SYNC: the element list below is repeated in
   assets/js/seloxa-motion.js (TARGETS). Change both together.

   Compliance text (research-use notices, disclaimer band,
   checkout acknowledgment, the product-page lab result card)
   is never in this list.
   ═══════════════════════════════════════════════════════ */


/* 1. TIMING — mobile first, then desktop (≥769px, the site's breakpoint) */
html.seloxa-motion {
  --sx-rise: 12px;                               /* how far it rises */
  --sx-dur: 600ms;                               /* how long it takes */
  --sx-ease: cubic-bezier(0.22, 1, 0.36, 1);     /* fast start, soft landing */
}
@media (min-width: 769px) {
  html.seloxa-motion {
    --sx-rise: 20px;
    --sx-dur: 750ms;
  }
}


/* 2. HIDDEN — waiting to be revealed.
   !important + this long selector are needed to beat existing
   !important rules (e.g. the shop cards' hover lift) while the
   reveal runs. They stop applying once the element is .sx-done. */
html.seloxa-motion :is(
  /* Homepage */
  .home .seloxa-mm-band,
  .home .wp-block-woocommerce-product-collection li.wc-block-product,
  .home .seloxa-why__head,
  .home .seloxa-why__col,
  .home .seloxa-faq__heading,
  .home .seloxa-faq__item,
  /* Shop, category and related-product cards */
  body:not(.home) ul.products li.product,
  body:not(.home) .seloxa-lab-grid .seloxa-lab-tile,
  /* Single product */
  .single-product div.product .summary > .product_title,
  .single-product div.product .summary > .seloxa-pd-pricerow,
  .single-product section.related > h2,
  /* About and Contact */
  .seloxa-motion-inner .entry-content > h2,
  .seloxa-motion-inner .entry-content > p
):not(.sx-done) {
  opacity: 0 !important;
  transform: translate3d(0, var(--sx-rise), 0) !important;
  transition: none !important;
}


/* 3. REVEALING — the JS adds .sx-in (plus a per-element --sx-delay for
   the stagger). The element fades to full opacity and settles into place. */
html.seloxa-motion :is(
  .home .seloxa-mm-band,
  .home .wp-block-woocommerce-product-collection li.wc-block-product,
  .home .seloxa-why__head,
  .home .seloxa-why__col,
  .home .seloxa-faq__heading,
  .home .seloxa-faq__item,
  body:not(.home) ul.products li.product,
  body:not(.home) .seloxa-lab-grid .seloxa-lab-tile,
  .single-product div.product .summary > .product_title,
  .single-product div.product .summary > .seloxa-pd-pricerow,
  .single-product section.related > h2,
  .seloxa-motion-inner .entry-content > h2,
  .seloxa-motion-inner .entry-content > p
).sx-in {
  opacity: 1 !important;
  transform: none !important;
  transition:
    opacity var(--sx-fade, var(--sx-dur)) var(--sx-ease) var(--sx-delay, 0ms),
    transform var(--sx-move, var(--sx-dur)) var(--sx-ease) var(--sx-delay, 0ms) !important;
}

/* Already on screen when the page loaded: no rise, no stagger,
   just a quick gentle fade so the first screen never feels slow.
   (Done by changing the timing variables used above: fade 250ms,
   movement 0ms = snaps into place while still invisible.) */
html.seloxa-motion .sx-instant {
  --sx-fade: 250ms;
  --sx-move: 0ms;
  --sx-delay: 0ms;
}


/* 4. REDUCED MOTION — belt and braces. The <head> script already skips
   everything for these visitors; this makes sure nothing can stay hidden. */
@media (prefers-reduced-motion: reduce) {
  html.seloxa-motion :is(
    .home .seloxa-mm-band,
    .home .wp-block-woocommerce-product-collection li.wc-block-product,
    .home .seloxa-why__head,
    .home .seloxa-why__col,
    .home .seloxa-faq__heading,
    .home .seloxa-faq__item,
    body:not(.home) ul.products li.product,
    body:not(.home) .seloxa-lab-grid .seloxa-lab-tile,
    .single-product div.product .summary > .product_title,
    .single-product div.product .summary > .seloxa-pd-pricerow,
    .single-product section.related > h2,
    .seloxa-motion-inner .entry-content > h2,
    .seloxa-motion-inner .entry-content > p
  ) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}