/* Reward content is visible by default, including when the motion script fails. */
.motion-ready #rewards [data-reveal]{opacity:1;translate:none;filter:none;transition:none}
.motion-ready #rewards .reward-flow .flow-arrow{animation:none}
#receipts{border-bottom:1px solid #424242}

@media(prefers-reduced-motion:no-preference){
  [data-reward-motion].reward-entered{animation:reward-copy-in .65s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--reward-motion-delay,0ms)}
  [data-reward-motion="heading"].reward-entered{animation-name:reward-heading-in;animation-duration:.85s;transform-origin:0 100%}
  [data-reward-motion="total"].reward-entered{animation-name:reward-total-in;animation-duration:.9s;transform-origin:0 80%}
  #rewards .reward-flow.reward-entered .flow-arrow{animation:reward-arrow-sweep .8s .12s cubic-bezier(.16,1,.3,1) both}
  [data-reward-motion="milestone"].reward-entered{animation-name:reward-milestone-in;animation-duration:.65s}
  [data-reward-motion="progress"].reward-entered{animation-name:reward-progress-in;animation-duration:1.05s}
  [data-reward-motion].reward-entered:focus-within{animation:none}
}

@keyframes reward-heading-in{
  from{opacity:0;transform:translateY(28px);clip-path:inset(0 0 45% 0)}
  to{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}
}
@keyframes reward-copy-in{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes reward-total-in{
  from{opacity:0;transform:translateY(30px) scale(.965)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes reward-arrow-sweep{
  0%{opacity:0;transform:translateX(-28px) scaleX(.7)}
  65%{opacity:1;transform:translateX(7px) scaleX(1.08)}
  100%{opacity:1;transform:translateX(0) scaleX(1)}
}
@keyframes reward-milestone-in{
  from{opacity:0;transform:translateY(20px) scale(.975)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
/* Reveal the existing native progress element without changing its value or width. */
@keyframes reward-progress-in{
  from{clip-path:inset(0 100% 0 0)}
  to{clip-path:inset(0 0 0 0)}
}
@media(prefers-reduced-motion:reduce){
  [data-reward-motion],#rewards .flow-arrow{animation:none!important;transition:none!important;transform:none;clip-path:none;opacity:1}
}