/* Motion layer for every page. All of it is off for reduced motion. */
@media (prefers-reduced-motion:no-preference){
  /* page to page: old page lifts away, new one rises in; the clicked jar photo morphs into the product stage */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:fx-out .32s cubic-bezier(.4,0,.2,1) both}
  ::view-transition-new(root){animation:fx-in .6s cubic-bezier(.16,1,.3,1) both}
  ::view-transition-group(jar){animation-duration:.7s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  header.nav{view-transition-name:nav}
  ::view-transition-group(nav){animation:none}
  ::view-transition-old(nav),::view-transition-new(nav){animation:none}
  @keyframes fx-out{to{opacity:0;transform:translateY(-14px) scale(.99);filter:blur(4px)}}
  @keyframes fx-in{from{opacity:0;transform:translateY(22px)}}

  /* scroll reveals, staggered by --d */
  .fx .fxr{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.16,1,.3,1) var(--d,0s),transform 1s cubic-bezier(.16,1,.3,1) var(--d,0s)}
  .fx .fxr.fxf{transform:translateY(36px) scale(.97)}
  .fx .fxr.in{opacity:1;transform:none}

  /* press feedback */
  .pill,.packs button,.sizes button,.opt,.thumbs button,.bag-btn{-webkit-tap-highlight-color:transparent}
  .pill:active,.packs button:active,.sizes button:active,.bag-btn:active{scale:.96;transition:scale .12s}
  .pill,.packs button,.sizes button,.bag-btn{transition-property:background,border-color,color,transform,scale;transition-duration:.35s}
  .pill:hover{transform:translateY(-2px)}

  /* bag count pops when something lands in it */
  .bag-btn.pop span{display:inline-block;animation:fx-pop .6s cubic-bezier(.34,1.56,.64,1)}
  @keyframes fx-pop{30%{transform:scale(1.5);color:var(--bronze,#c9925a)}}

  /* price and summary re-settle when the choice changes */
  .tick{animation:fx-tick .45s cubic-bezier(.16,1,.3,1)}
  @keyframes fx-tick{from{opacity:.25;transform:translateY(6px)}}
}