/* ==========================================================================
   Prime Peptides — site-wide motion (2026-09-27, tuned the same day)

   Rules (design-engineering pass):
   - One strong ease-out for anything entering or pressing; an iOS-style
     curve for the cart drawer. No ease-in anywhere.
   - UI motion stays under ~300 ms. Only scroll reveals (decorative) run
     longer, and they never hold up content already on screen.
   - Only transform and opacity animate.
   - Hover movement only on mouse devices; touch taps never leave a card
     stuck in its hover pose.
   - Exits are faster than entrances.
   - Reduced motion: no movement at all (the script hides nothing).
   ========================================================================== */
:root {
  --pp-ease: cubic-bezier(.23, 1, .32, 1);          /* strong ease-out */
  --pp-ease-drawer: cubic-bezier(.32, .72, 0, 1);   /* iOS-like sheet */
}

@media (prefers-reduced-motion: no-preference) {
  /* 1. Scroll reveal (set by pp-motion.js on below-the-fold items only) */
  html.pp-motion .pp-rise { transition: opacity .5s var(--pp-ease), transform .5s var(--pp-ease); }
  html.pp-motion .pp-rise.is-pending { opacity: 0; transform: translateY(12px); }

  /* 2. Every pressable thing answers the press */
  .ppcd__cta, .ppcd-ups__card,
  .pp-co4 #place_order, .pp-co4-upsell__add, .pp-co4-coupon .pp-co-coupon__toggle,
  .pp-acc-btn, .pp-acc-due__go, .pp-authm__btn, .pp-authm__switch-btn,
  .pp-cart-summary__cta .checkout-button, .pp-cart-empty__cta, .pp-cart-qty__btn,
  .ppc__btn, .single_add_to_cart_button, .pv3-cert,
  .pp-proof button[type="submit"], .pp-copy,
  .h4-btn, .trx-btn, .brx-btn, .btn, .btn-solid, .btn-ghost, .pp-iconbtn {
    transition-property: transform, background-color, border-color, color, box-shadow;
    transition-duration: 160ms;
    transition-timing-function: var(--pp-ease);
  }
  .ppcd__cta:active, .ppcd-ups__card:active,
  .pp-co4 #place_order:active, .pp-co4-upsell__add:active, .pp-co4-coupon .pp-co-coupon__toggle:active,
  .pp-acc-btn:active, .pp-acc-due__go:active, .pp-authm__btn:active,
  .pp-cart-summary__cta .checkout-button:active, .pp-cart-empty__cta:active, .pp-cart-qty__btn:active,
  .ppc__btn:active, .single_add_to_cart_button:active, .pv3-cert:active,
  .pp-proof button[type="submit"]:active, .pp-copy:active,
  .h4-btn:active, .trx-btn:active, .brx-btn:active, .btn:active, .btn-solid:active, .btn-ghost:active, .pp-iconbtn:active { transform: scale(.97); }

  /* Selectable cards (shipping, payment) give a smaller press */
  .pp-co4 #payment li.wc_payment_method > label,
  .pp-co4 .pp-co-ship { transition: border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 160ms var(--pp-ease); }
  .pp-co4 #payment li.wc_payment_method > label:active,
  .pp-co4 .pp-co-ship:active { transform: scale(.985); }

  /* 3. Cart icon bump after add to cart (scale only, no wobble) */
  .pp-bump { animation: pp-bump .4s var(--pp-ease); }
  @keyframes pp-bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

  /* 4. Cart drawer: native sheet feel in, quicker out, lines settle after */
  .ppcd.is-open .ppcd-item,
  .ppcd.is-open .ppcd-ups { animation: pp-slide-in .28s var(--pp-ease) backwards; }
  .ppcd.is-open .ppcd-item:nth-child(1) { animation-delay: .09s; }
  .ppcd.is-open .ppcd-item:nth-child(2) { animation-delay: .12s; }
  .ppcd.is-open .ppcd-item:nth-child(3) { animation-delay: .15s; }
  .ppcd.is-open .ppcd-item:nth-child(n+4) { animation-delay: .18s; }
  .ppcd.is-open .ppcd-ups { animation-delay: .18s; }
  @keyframes pp-slide-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

  /* 5. Checkout + payment page: panels settle in once, the form first */
  .pp-co4-side__in,
  .pp-co4-main__in { animation: pp-fade-up .35s var(--pp-ease) backwards; }
  .pp-co4-main__in { animation-delay: .04s; }
  .pp-co4-due__value.pp-pulse { animation: pp-pulse .32s var(--pp-ease); }
  @keyframes pp-pulse { 0% { transform: scale(1); } 45% { transform: scale(1.03); } 100% { transform: scale(1); } }
  @keyframes pp-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  html body.pp-co4-page .woocommerce .pp-co4 .place-order button#place_order.is-busy::before { animation-duration: .6s; }

  /* 6. Payment page: the check mark draws in (a once-per-order moment) */
  .pp-or4-head__check { animation: pp-pop .4s var(--pp-ease) .1s backwards; }
  .pp-or4-head__check path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: pp-draw .4s var(--pp-ease) .35s forwards; }
  @keyframes pp-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
  @keyframes pp-draw { to { stroke-dashoffset: 0; } }

  /* 7. Account: the waiting-for-payment alert eases in */
  .pp-acc-due { animation: pp-fade-up .35s var(--pp-ease) .08s backwards; }
}

/* Hover movement is for mouse users only: on touch screens a tap would
   leave the card lifted. Colour and shadow changes stay. */
@media (hover: none), (pointer: coarse) {
  html body .pp-home .h4-reason:hover,
  html body.pp-account-page a.pp-acc-tile:hover,
  html body.pp-account-page a.pp-acc-due:hover,
  html body.pp-co4-page button.pp-co4-upsell__add:hover,
  html body.pp-co4-page .woocommerce .pp-co4 .place-order button#place_order:hover { transform: none; }
}